JavaScript

javaScript是一種指令碼語言，主要由下面三部分組成：

• 核心（ECMAScript)
• 文件物件模型（DOM) Document object model(整合js，css，html)
• 瀏覽器物件模型（BOM) Broswer object model（整合js和瀏覽器）

注意：ES6是指ECMAScript 6。

JavaScript引入方式

//第一種，在Script標籤內寫程式碼
<script> 
    js程式碼
</script>

//第二種，直接引入js檔案
《script src="myscript.js"></script>

JavaScript語言規範

//  這是單行註釋
/*
多行註釋
*/

//結束符 是以分號為結束符號 ；

JavaScript語言基礎（與python做對比）

變數宣告

1、js的變數名可以使用字母、數字、_、$組成，同樣不能用數字開頭

2、用var、let (let是ES6後才支援的）來宣告變數

3、不能用關鍵字作為變數名

4、宣告常量用const，一旦宣告，該值就不能改變（ES6新增）

var userName='json'
let id='111'
const PI=3.14

注意：變數名是區分大小寫的

　　　 js推薦使用駝峰式命名規則：如userName

　　 pyton則推薦用_下劃線命名規則：如user_name

var、let的區別：

　　var宣告的都是全域性變數，全域性變數容易受影響

　　let宣告的是區域性變數，所以let可以區分

JavaScript資料型別

js跟python一樣，都是擁有動態型別：

>var x;
>var x=1;
>var x='alex'
>x
<alex

數值型別（Number)

js不區分整形和浮點型，就只用number這一種型別

var a=11
var b=11.11
typeof b
<number
//注意NaN也是number型別
typeof NaN
<number
//NaN 表示不是一個數字

型別轉換

parseInt('111') //
 
返回 111
parseFloat('11.11')  //返回11.11
parseInt('11sagljks') //返回11，如果是小數字符串則返回整數部分，如11.11返回11
parseInt("aljgla")  //返回NaN
//總結：只要是數字開頭就可以轉換，否則會報錯

字串型別（String）

js支援單引號、雙引號，但是不止三引號

python支援引號、雙引號、三引號

字串的拼接：

　　js推薦直接用+做拼接　

　　python推薦用join做拼接

var a="json";
var a1='pytoh';
var a2='''hello'''  //不支援

//模板字串
var aa=`
    my name is ${a1} , ${a2}world
`
//返回 my name is pytoh ,hello world
//注意：${}會自動去前面尋找大括號內變數名對應的值，如果找不到，則會報錯。

字串常用的方法：

h="hellowold"
h.length
>9

h1=" hell "
h1.trim()
>"hell"
h1.trimLeft()
>"hell "

h1.trimRight()
>" hell"

h.charAt(2)
>"l"

h.indexOf('ol')
>6

h.substring(1,3)
>"el"

h.slice(0,-1)
>"hellowol"

h.toLowerCase()
>"hellowold"

h.toUpperCase()
>"HELLOWOLD"

h.split('o')
>(3)["hell", "w", "ld"]

name1='hello'
name2='world'
name1.concat(name2)
>"helloworld"

注意：js使用切片的時候，用slice()方法

slice和substring的區別

string.slice(start, stop)和string.substring(start, stop)：

兩者的相同點：
　　如果start等於end，返回空字串
　　如果stop引數省略，則取到字串末
　　如果某個引數超過string的長度，這個引數會被替換為string的長度

substirng()的特點：
　　如果 start > stop ，start和stop將被交換
　　如果引數是負數或者不是數字，將會被0替換

silce()的特點：
　　如果 start > stop 不會交換兩者
　　如果start小於0，則切割從字串末尾往前數的第abs(start)個的字元開始(包括該位置的字元)
　　如果stop小於0，則切割在從字串末尾往前數的第abs(stop)個字元結束(不包含該位置字元)

布林值

js中布林值都是小寫的。python中布林值首字母都是大寫

js布林值為false的情況有：空字串，NaN，0，undefined，null

null和undefined的區別

• null表示值是空，一般在需要指定或清空一個變數時才會使用
• undefined表示當宣告一個變數但是沒有初始化時，該變數預設值時undefined

注意：函式沒有設定return返回值的時候，函式返回的是undefined

物件（object）

js中一切皆物件，如：字串、數值、陣列、函式

js也提供了多個內建物件，如string、Data、array等

物件知識帶有屬性和方法的特殊資料型別

陣列

js的陣列類似於python中的列表

陣列常用的方法如下：

//例子：
var l=[1,2,3]
l.pop()
>3

l.push(5)
>3

l.unshift(6)
>4

l
>(4)[6, 1, 2, 5]

l.shift() #刪除頭部元素
>6
l
>(3)[1, 2, 5]

l.slice(0,2)
>(2)[1, 2]

l.reverse()
>(3)[5, 2, 1]

l.join('a')
>"5a2a1"

var l2=["a","b","c"]
l.concat(l2)
>(6)[1, 2, 5, "a", "b", "c"]

l.sort()
>(3)[1, 2, 5]

forEach()方法例項：引數最多三個，第一個引數是必須的，第二個，可選，表示當前元素的索引值，第三個引數，可選，表示當前元素所屬的陣列物件

splice（index,howmany,item1）方法例項：同樣也是三個引數，第一個引數是必須的，表示起始位置，第二個引數也是必需的，表示刪除元素個數，必須是數字，也是是“0”。如果這個引數沒有設定，則會從index開始刪除到陣列最後一個元素，第三個引數，可選，表示要新增到陣列的新元素。

map()方法例項：引數性質跟forEach一致

運算子

//算數運算子 + - * / % ++ --
var x=1;
var res1=x++;    //結果是1 ，先賦值再運算
var res2=++x;    //結果是3，先運算再賦值

//比較運算子 > >= < <= != == === !==
//注意：
1=="1"      //結果是true 。弱等於，會自動轉換資料型別
1===“1”   //結果是false 。強等於，不會自動轉換資料型別

//邏輯運算子 
/*
注意：python是   and   or   not
         js 是 &&  ||  ！
         邏輯運算的時候，返回的是資料，而不是布林值
*/    
!5&&'5'
>5
5&&'5'
>5
0 || 1
>1

//賦值運算子 =  += -= *= /+

流程控制

//if-else結構
if(條件){程式碼塊}else{程式碼塊｝

//if-else if - esle結構
if(條件){
程式碼塊
}else if{
程式碼塊
}else{
程式碼塊
}

//switch結構：
switch(num){
    case 0:
    程式碼塊
    barek;
    .....
    default:
    console.log("...")
}
//注意：case子句通常要加break語句，否則程式會繼續執行後續case中語句

//for結構：
for(條件）｛
  程式碼塊
｝

//while結構：
while(條件）｛程式碼塊}

//三元運算
/*
python 三元運算子是 var  res=1 if 1>2 else 3
js  三元運算子是   var res=1>3?1:3
*/

函式

函式定義(可以帶引數，也可以不帶）

//python 是def  js是function
function f(引數1,..){
　　程式碼塊
}
//匿名函式
var sum=function(a,b){
    return a+b;
}
sum(1,2);

//立即執行函式
（function(a,b){
    return a+b;
})(1,2);

//箭頭函式(ES6才運許使用）
var f=v =>v;   //箭頭左邊是形參，右邊是返回值
//等價於
var f=function(v){
    return v
}

var f=(arg1,arg2) => arg1+arg2;
var f=function(arg1,arg2){
    return arg1+arg2;
}

注意：函式中arguments引數，是存放存入的引數。

　　　函式只能返回一個值，如果要返回多個值，只能將其放在陣列或物件中返回

函式的全域性變數和區域性變數

區域性變數：在函式內部宣告的變數就是區域性變數，只能在函式內部訪問，函式執行完畢，該變數也會被刪除

全域性變數：在函式外部宣告的變數，該變數會在頁面關閉後被刪除

作用域：跟python作用域關係查詢一模一樣。

首先在函式內部查詢變數，找不到再到外層函式查詢，逐步找到最外層。

自定義物件

本質就鍵對集合，類似於python中中的字典。

#第一種建立自定義物件的方式
var d={'user':'hell','passwd':123}
#第二種建立自定義物件的方式
var d1=new Object()
d1.id='alex';         
d1.password=123;
//等價於
d1={'id':'alex','password':123}
//遍歷物件內容
for （var i in d1){
　　console.log(i,d1[i]);
}

Data物件

var d1=new Date();
var d2=new Date("2020/9/20 21:03") //引數是日期字串
var d3=new Date(1000)         //引數是毫秒
var d4=new Date(2020,9,20,21,3,1,100)  //引數是年月日時分秒毫秒
//Date物件方法
var d=new Date()
getDate()                 // 獲取日
getDay ()                 //獲取星期
getMonth ()              // 獲取月（0-11）
getFullYear ()            // 獲取完整年份
getYear ()                 //獲取年
getHours ()               //獲取小時
getMinutes ()             //獲取分鐘
getSeconds ()             //獲取秒
getMilliseconds ()        //獲取毫秒
getTime ()                  //返回累計毫秒數(從1970/1/1午夜)

JSON物件

在python中序列化、反序列化

• dumps 序列化
• loads 反序列化

在js中序列化反、序列化

• JSON.stringify() 等價於dumps 序列化
• JSON.parse() 等價於loads 反序列化

RegExp物件

在python中，使用正則，需要藉助於re模組，

在js中，則需要建立正則物件

//第一種建立正則物件方法
let reg1= new RegExp("正則語句“)
//eg:
let reg1 =new RegExp(^[a-zA-Z][a-zA-Z0-9]{5,11})
//第二種
let reg2 = /正則語句/
//eg:
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/   //匹配以字母開頭，長度在5~11

//匹配內容，呼叫test方法
reg1.test('helloworld)

//全域性匹配缺陷
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/ g
/*
全域性模式有一個lastIndex屬性，匹配結果為true是，lastIndex是字串的長度，下次匹配會從字串尾部開始匹配，匹配結果為false時，lastIndex會重新置0，從頭開始匹配。
*/
reg2.test('helloworld')  
>true
reg2.test('helloworld')  //此時lastIndex是10，從字母d後面開始匹配，所以結果為false
>false

//第二個缺陷，當test()，不傳引數的時候，預設傳undefined