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

1、文法特性

1.1、變量

• let

• const

特性：

1. 無法重複聲明

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

1. const

   是定義常量的，無法修改

const a = 1;
a = 2;   // 報錯，常量再配置設定錯誤

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

1. 具有塊級作用域

最著名的閉包問題，就是因為

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) 
           

1. 數組展開

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

1. json

   展開

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

1.5、模闆字元串``

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

在模闆字元串裡面使用

${}

插入變量值

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