• 變量

  • ES6新增let變量嚼酝，用來聲明變量，用法類似于var碗脊，只是聲明的變量只在let命令所在的代碼塊內有效

  • 例1：

  • for(var j = 0; j < 3 j++) {} console.log(j); // 3
    for(let i = 0; i < 3 i++) {} console.log(i); // ReferenceError: i is not defined
    

  • 例2：

  • var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10
    

  • var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6
    

  • const也是用于聲明變量摆碉，表明聲明一個常量，一旦聲明后蛉鹿，值不能被修改，也就意味著一旦聲明就必須進行初始化

  • 例：

  • const str = 123;
    str = 456; // TypeError: Assignment to constant variable.
    

  • 以上兩種聲明方式不存在變量提升往湿，也就是只能在聲明之后使用妖异，一旦在聲明之前使用則會報錯，var則存在聲明提升

  • 例：

  • console.log(a); // undefined;
    var a = 1;
    console.log(b); // 報錯
    let b = 1;
    

  • 在一個塊級作用域內领追，同一個變量不能被重復聲明

  • let a = 1;
    let a = 2; // 報錯
    

  • 塊級作用域

    • 類似于function他膳，在塊級作用域外不能訪問作用域內的變量

    • 例：

    • {
          let a = 1;
      }
      

• 變量解構與賦值

  • 準確來說是模式匹配

    • 數組的解構

    • 例1:

    • let [a, b, c] = [1, 2, 3];
      // a 1
      // b 2
      // c 3
      

    • 以上是按照順序進行匹配賦值

    • 例2：

    • let [a, , b] = [1, 2];
      // a 1
      // b undefined
      

    • 例3：設置默認值

    • let [a = 3, , b = 4] = [1, 2];
      // a 1
      // b 4
      

    • 對象的解構

    • 例1：

    • let {a, b} = {a: 1, b: 2}
      // a 1
      // b 2
      

    • 例2：

    • let {c, b} = {a: 1, b: 2}
      // c undefined
      // b 2
      

    • 例3：設置默認值

    • let {a = 1, b = 2} = {a: 3}
      // a 3
      // b 2
      

    • 解構嵌套

    • 例：

    • let obj = {
        p: [
          'Hello',
          { y: 'World' }
        ]
      };
      
      let { p: [x, { y }] } = obj;
      x // "Hello"
      y // "World"
      
      

• 字符串擴展

  • 模板字符串

    • 在es5及之前，想要將幾個字符串組合為一個绒窑，并且加上參數棕孙，必須通過+來拼接

    • 例：

    • let h = '標題';
      let p = '段落';
      let result = '<div>'
      + '<h1>' + h + '<h1>'
      + '<p>' + p + '</p>'
      + '</div>';
      

    • 在es6中新增反引號來標識的模板字符串來簡化上面這一過程

    • 例：

    • let h = '標題';
      let p = '段落';
      let result = `<div>
          <h1>${h}</h1>
          <p>${p}</p>
      div`;
      

    • 上面的${}中可以寫任何表達式

    • 例：

    • let h = '標題';
      let p = '段落';
      let result = `<div>
          <h1>${h ? h : '標題不存在'}</h1>
          <p>${p}</p>
      div`;
      

    • 模板字符串也可以用來執(zhí)行函數

    • 例：

    • alert`1`;
      

  • 以下方法用來表示一個字符串是否在兩一個字符串中，支持兩個參數

  • includes 第一個參數表示需要查找的字符串些膨，第二個參數表示查找的起始下標位置

  • let a = 'abc';
    let result1 = a.includes('a'); // true
    let result2 = a.includes('d'); // false
    let result3 = a.includes('a', 1); // false
    

  • startsWith 第一個參數表示需要查找的字符串蟀俊，第二個參數表示查找的起始下標位置

  • let a = 'abc';
    let result1 = a.startsWith('a'); // true
    let result2 = a.startsWith('b'); // false
    let result3 = a.startsWith('b', 1); // true
    

  • endsWith 第一個參數表示需要查找的字符串，第二個參數表示查找的字符串從前往后的個數订雾，查前多少個的意思肢预，不按照下標來計算

  • let a = 'abc';
    let result1 = a.endsWith('c'); // true
    let result2 = a.endsWith('b'); // false
    let result3 = a.endsWith('b', 2); // true
    

• 數值的方法

  • Number.isInteger()

  • 判斷是否為一個整數

  • 例：

  • Number.isInteger(2); // true
    Number.isInteger(2.1); // false
    

  • 指數運算符**,指數運算符從右往左計算

  • 例：

  • let result = 2 ** 3; // 8
    let result = 2 ** 3 ** 2; // 512  相當于2 ** (3 ** 2)
    

• 函數的擴展

  • 為參數加默認值

  • 例：es5中,為了保證程序的正常運行，我們一般會像下面這樣寫

  • function fn(a, b) {
      a = a || 123;
      b = b || 456;
      console.log(a, b); // 1 456
    }
    fn(1, '');
    

  • es6中

  • 例：

  • function fn(a = 123, b = 456) {
      console.log(a, b); // 1 456
    }
    fn(1, '');
    

  • 配合解構

  • function fn({a = 123, b = 456}) {
      console.log(a, b); // 1 456
    }
    fn({a: 1})
    

  • 箭頭函數

  • 例：

  • let fn1 = id => {
      console.log(id); // 1
    }
    fn1(1);
    // 等同于
    let fn2 = function(id) {
      console.log(id); // 2
    }
    fn2(2);
    
    // 需要返回值時
    let fn3 = id => id;
    // 等同于
    let fn4 = function(id) {
      return id;
    }
    
    // 箭頭函數會把箭頭后面的{}解析為代碼塊洼哎，如果需要返回一個對象時,需要用小括號包裹
    let fn5 = (id1, id2) => ({a: id1 ** 2, b: id2 ** 3});
    

  • rest參數

  • 例：

  • // 當參數不固定時烫映，想要獲取一個參數的集合
    // es5
    function fn1() {
      console.log(arguments) // [2, 3, 4] 是一個偽數組
    }
    fn1(2, 3, 4);
    // es6
    function fn2(...arg) {
      console.log(arg) // [2, 3, 4] 真實的數組
    }
    fn2(2, 3, 4);
    

• 擴展運算符

  • 數組的擴展

  • 例：

  • 擴展到的地方必須有一個宿主沼本，比如對象或者數組

  • let [...a] = [1, 2, 3];
    console.log(a); // [1, 2, 3]
    let {...b} = [1, 2, 3];
    console.log(b); {0: 1, 1: 2, 2: 3}
    

  • 例：

  • let a = [1, 2, 3];
    let b = [...a];
    console.log(b); // [1, 2, 3];
    

  • 合并數組

  • let a = [1, 2, 3];
    let b = [4, 5, 6];
    let c = [...a, ...b];
    console.log(c); // [1, 2, 3, 4, 5, 6]
    

  • 只能進行淺拷貝

  • let a = [
      {
          name: 'li'
      }
    ]
    let b = [...a];
    console.log(a[0] === b[0]); // true;
    b[0].name = 'wang';
    console.log(a[0] === b[0]); // true;
    // 我們發(fā)現b拷貝于a，但是當b里面子對象的值發(fā)生改變后窑邦，依然影響到了a擅威，所以慎用
    

  • 與解構混用

    • 當使用擴展運算符時，把擴展運算符的表達式放在最后一位冈钦，否則會報出錯誤

  • let a = [1, 2, 3, 4, 5];
    let [b, ...c] = a;
    console.log(b, c); // 1, [2, 3, 4, 5]
    

  • 字符串擴展

  • let a = 'hello';
    let [...b] = a;
    console.log(b); // ['h', 'e', 'l', 'l', 'o'];
    

  • Array.form()方法

  • 用于將類數組的對象轉為真實的數組，比如dom

  • let domList = document.getElementsByTagName('div');
    let result = Array.from(domList);
    console.log(resule, result instanceof Array); // [div, div, div] true
    

  • Array.of()

  • 用于將一組值轉為數組

  • let a = '123';
    let b = '456';
    let result = Array.of(a, b);
    console.log(result); // ['123', '456']
    

  • Array.fill()

  • 用于填充一個數組李请，常常用于數組的初始化瞧筛，設置默認的初始值

  • let a = [1, 2, 3].fill(0);
    console.log(a); // [0, 0, 0]
    

  • 還可以接受第二個和第三個參數, 分別代表填充的起始位置和結束位置，不會填充結束位置

  • let a = [1, 2, 3, 4, 5].fill({name: 'li'}, 2, 3);
    console.log(a); // [1, 2, {name: 'li'}, 4, 5]
    

  • 數組實例的includes方法

  • 相當于indexOf(),用于檢測一個元素是否存在于一個數組中导盅，返回布爾值较幌，和indexOf不同的是，它可以檢測到NaN的是否存在白翻，而在es5中NaN和任何值都是不相等的

  • let a = [1, 2, 3, NaN];
    console.log(a.includes(2)); // true
    console.log(a.includes(NaN)); // true
    console.log(a.includes(5)); // false
    

  • 也可以接受兩個參數乍炉，第二個參數代表檢查的起始位置，默認從0開始

  • let a = [1, 2, 3, NaN];
    console.log(a.includes(2, 0)); // true
    console.log(a.includes(2, 2)); // false
    console.log(a.includes(NaN滤馍， -1)); // true 從倒數的位置查岛琼，如果負值絕對值大于數組長度，則從0開始
    

參考：http://es6.ruanyifeng.com/