ES6新增特性 --語法篇（一） --- 語法特性

1、語法特性

1.1、變量

• let
• const

特性：

1. 無法重複聲明

let a = "1";
let a = "2"  // 報錯，重複聲明

2. const 是定義常量的，無法修改

const a = 1;
a = 2;   // 報錯，常量再分配錯誤

/* 但是因爲function、Array、Object是引用值，不會報錯 */
const b = {name: "duck"};
b.name = "pig"  // 不會報錯

3. 具有塊級作用域

最著名的閉包問題，就是因爲var沒有屬於自己的塊級作用域（函數級作用域）纔會出現的，所以需要使用一個函數來包裹它，給它一個塊級作用域

let btns = document.getElementsByTagName("button");
 for(var i = 0; i < btns.length; i++) {
     (function (i){
         btns[i].onclick = function() {
             console.log(i)
         };
     })(i)
 }

但如果使用有塊級作用域的變量let，就不會出現這個問題了

let btns = document.getElementsByTagName("button");

for(let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        console.log(i)
    };
}

1.2、解構賦值

作用：

方便取出 json、Array、Object的值

比較適合取出一個大的結構的一個你要的數據，

經常是在網絡請求ajax獲取裏面的值

使用：

1. 兩邊的結構必須一樣
2. 右邊必須是個（對象）
3. 賦值和解構同時完成

/* 使用方法 */

// json = {a: 12, b:5}
let { a, b } = json

// array
array = [12, 5, 8];
let [ a, b, c ] = array;

1.3、箭頭函數

注意：

箭頭函數和普通函數除了寫法不同，還有就是this的不同

箭頭函數的this：**來自函數作用域鏈，它的取值遵循普通普通變量一樣的規則，在函數作用域鏈中一層一層往上找。**換句話說，箭頭函數的this，就是最近作用域的this

使用：

1. 如果只有一個參數，() 可以不寫
2. 如果只有一個語句，並且是return，{} 也可以不寫

let array = [12, 8, 37, 26, 9];

 /* 使用原生 函數 */
 // array.sort(function(a, b) {
 //     return a - b
 // });

/* 使用箭頭函數 */
array.sort((a, b) => a - b)

console.log(array)

1.4、參數拓展 …

1. 參數收集

/*將剩餘的參數全部放進c裏面 */
function show(a, b, ...c) {
   console.log(a, b, c) // 1, 2, Array(5)
}

show(1, 2, 3, 4, 5, 6, 7) 

2. 數組展開

let arr = [];
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [6, 7, 8, 9];
arr = [...arr1, ...arr2];
console.log(...arr);

3. json展開

let json1 = {
    a: 1,
    b: 2
}
let json2 = {
    ...json1,
    c: 3
}
console.log(json2)

1.5、模板字符串``

模板字符串是允許嵌入表達式的字符串字面量。你可以使用多行字符串和字符串插值功能

在模板字符串裏面使用 ${} 插入變量值

let name = 'duck';
console.log(`我的名字叫${name}`);