部分列子引用的阮一峰ES6教程中的例子

這篇文章主要是自己經(jīng)常用得一些方法總結, 想全篇學習es6, 可以看阮一峰ES6入門

1: let命令

• let命令坡贺，用來聲明變量。它的用法類似于var翘瓮，但是所聲明的變量贮折，只在let命令所在的代碼塊內有效

• for循環(huán)用它聲明計數(shù)器很好, 因為計數(shù)器i只在for循環(huán)體內有效，這樣這次的i在塊級作用域被調用時都是當時的i被保存, 下次生成的又是新的i , 效果類似閉包
• 不存在變量提升, 所以一定要先聲明在使用,
• 不同作用域中聲明同一函數(shù)名; 例如:
  • 函數(shù)中用let聲明了變量, 如果全局有一個同名變量名, 函數(shù)中次變量始終指向函數(shù)內的變量, 且在let聲明前調用報錯,
• **同作用域的同一個變量名: **
  • 不允許在同一作用域使用同一變量名多次聲明, 不然會報錯
• let新增了塊級作用域,效果類似閉包, 單好使多了

變量的空位

[, , ,]數(shù)組中,號分隔卻沒有值, 表示空位

ES5中, 對空位的處理是忽略空位

• forEach(), filter(), every() 和 some()都會跳過空位资盅。
• map()會跳過空位调榄，但會保留這個值
• join()和toString()會將空位視為undefined，而undefined和null會被處理成空字符串呵扛。

ES6 中則是明確將空位轉為undefined
接下來的方法中

Array.from方法會將數(shù)組的空位每庆，轉為undefined
  Array.from(['a',,'b'])
  // [ "a", undefined, "b" ]

擴展運算符（...）也會將空位轉為undefined
  [...['a',,'b']]
  // [ "a", undefined, "b" ]

遍歷:// entries()
 [...[,'a'].entries()] 
// [[0,undefined], [1,"a"]]
等等, 只要是空位都會被undefined填充 

2: 變量的解構

1: 我的理解就是變量名和值一一對應,

  var [a, b, c] = [1, 2, 3];  相當于 var a = 1;  var b = 2; var c = 3;

  let [foo, [[bar], baz]] = [1, [[2], 3]];foo : 1;   bar : 2;   baz :  3 

2: 我這里沒有用很多,還有很多方法, 可以去看下最上面阮一峰的教程

3: 字符串

• 1: 提供了遍歷字符串的接口

    for (let codePoint of 'foo') { console.log(codePoint)}
      // "f"
      // "o"
      // "o"
  

• 2:includes(), startsWith() endsWidth()
  返回的是布爾值, 可以做字符串的判斷, 包括一些驗證

• includes()：返回布爾值，表示是否找到了參數(shù)字符串今穿。

• startsWith()：返回布爾值缤灵，表示參數(shù)字符串是否在源字符串的頭部。

• endsWith()：返回布爾值荣赶，表示參數(shù)字符串是否在源字符串的尾部凤价。

• 3: repeat()重復一個字符串多少次

    w.repeat(3); 
     =>  " www"
  

  • 如果重復次數(shù)是小數(shù), 會轉換成字符串,
  • 如果重復次數(shù)是負數(shù), 0 ~ -1 會轉換成 0 , 小于-1會報錯
  • 如果重復次數(shù)是字符串會轉換成數(shù)字

• 4: 模板字符串
  模板字符串（template string）是增強版的字符串，用反引號（`）標識拔创。它可以當作普通字符串使用，也可以用來定義多行字符串富蓄，或者在字符串中嵌入變量

  省去了以前前端在js中拼接html的煩擾, 還可以任意添加變量方法等

html的拼接

  $('#list').html(
      `<ul>
         <li>first</li>
         <li>second</li>
      </ul>`
    );

字符串中插入變量

```
  function fn() {
     return " World";
  }
  `Hello ${fn()} lalala` 
  "Hello World  lalala"
```

遇到的問題:
用url往后端傳值時, 用字符串模板, 單獨寫 src=包裹會報錯,
最后在變量外包裹了 src={ }才解決

 <iframe className="cdp-map-content-ifram" id="ss" src={`/map/hisTrack.jsp?themeCfgObj=${themeCfgObj}`}/>

4: 數(shù)組

• 1: Array.from()主要方法是將兩類類似數(shù)組的對象轉換為真正的數(shù)組, 包括可遍歷對象
• 1: 所謂類似數(shù)組的對象剩燥，本質特征只有一點，即必須有l(wèi)ength屬性立倍。因此任何有l(wèi)ength屬性的對象灭红，都可以通過Array.from方法轉為數(shù)組

 這是個類似數(shù)組的對象: 
let arrayLike = {
        '0': 'a', 
        '1': 'b',
        '2': 'c', 
        length: 3
   };

     // ES5的寫法var arr1 = [].slice.call(arrayLike);
     // ['a', 'b', 'c']
     // ES6的寫法let arr2 = Array.from(arrayLike); 
     // ['a', 'b', 'c']

• 常見的類似數(shù)組的對象是DOM操作返回的NodeList集合，以及函數(shù)內部的arguments對象口注。Array.from都可以將它們轉為真正的數(shù)組变擒。
• 字符串和Set結構 都可以使用Array.from都可以將它們轉為真正的數(shù)組。
• 兼容處理:

const toArray = (() =>
     Array.from ? Array.from : obj => [].slice.call(obj)
)();

• Array.from還可以接受第二個參數(shù)寝志，作用類似于數(shù)組的map
  方法娇斑，用來對每個元素進行處理，將處理后的值放入返回的數(shù)組材部。

  Array.from([1, 2, 3], (x) =>
     x * x
)
// [1, 4, 9]

2: Array.of()方法用于將一組值毫缆，轉換為數(shù)組
Array.of() // [] Array.of(undefined) // [undefined] Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1
3: find() 和 findIndex()

• 數(shù)組實例的find方法，用于找出第一個符合條件的數(shù)組成員乐导。它的參數(shù)是一個回調函數(shù)苦丁，所有數(shù)組成員依次執(zhí)行該回調函數(shù)，直到找出第一個返回值為true的成員物臂，然后返回該成員旺拉。如果沒有符合條件的成員产上，則返回undefined

```
    [1, 5, 10, 15].find(function(value, index, arr) { 
            return value > 9;
      }, this) 
      // 10
```

• 上列中可見find方法的回調函數(shù)可以接受三個參數(shù)，依次為當前的值蛾狗、當前的位置和原數(shù)組晋涣。

• find(回調函數(shù), this) 第二個參數(shù)是this

• findIndex(回調函數(shù), this); 用法同find() 只不過返回第一個符合條件的數(shù)組成員的位置，如果所有成員都不符合條件淘太，則返回-1

• 4: 數(shù)組的遍歷
  數(shù)組都可以使用 for...of循環(huán)來遍歷數(shù)組, for ( ... of ...) {}
  keys() , values(), entries();

  • key() 遍歷結果為數(shù)組的鍵名
  • value()遍歷的結果為數(shù)組的鍵值
  • entries()遍歷的結果為數(shù)組的鍵值對
    for (let index of ['a', 'b'].keys()) {
    console.log(index)
    ;}
    // 0 // 1
    for (let elem of ['a', 'b'].values()) {
    console.log(elem)
    ;}
    // 'a' // 'b'
    for (let [index, elem] of ['a', 'b'].entries()) {
    console.log(index, elem)
    ;}
    // 0 "a" // 1 "b"

• 5: es7的includes()
  array.includes(x) 數(shù)組中是否有值x;
  方法返回一個布爾值姻僧，表示某個數(shù)組是否包含給定的值，與字符串的includes方法類似

    [1, 2, 3].includes(2);  // true
    [1, 2, 3].includes(4);  // false
    [1, 2, NaN].includes(NaN); // true
  

  其還有第二個參數(shù):
  表示搜索的起始位置蒲牧，默認為0撇贺。
  如果第二個參數(shù)為負數(shù)，則表示倒數(shù)的位置冰抢，
  如果這時它大于數(shù)組長度（比如第二個參數(shù)為-4松嘶，但數(shù)組長度為3），則會重置為從0開始挎扰。

    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
  

5: 函數(shù)

• 1: ES6允許為函數(shù)的參數(shù)設置默認值翠订，即直接寫在參數(shù)定義的后面。

  function log(x, y = 'World') {
     console.log(x, y);
  }

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

• 2: ES6引入rest參數(shù)（形式為“...變量名”）遵倦，用于獲取函數(shù)的多余參數(shù)

    function add(...values) { 
      let sum = 0;
      for (var val of values) { 
        sum += val; 
      } 
      return sum;
  }
  
  add(2, 5, 3) // 10
  

  • 注意尽超，rest參數(shù)之后不能再有其他參數(shù)（即只能是最后一個參數(shù)），否則會報錯

      // 報錯
      function f(a, ...b, c) {  // ...}
    

  • 函數(shù)的length屬性梧躺，不包括rest參數(shù)似谁。

      (function(a) {}).length  // 1
      (function(...a) {}).length  // 0
      (function(a, ...b) {}).length  // 1
    

• 3: 擴展運算符
  擴展運算符（spread）是三個點（...）將一個數(shù)組轉為用逗號分隔的參數(shù)序列。

    (...[1, 2, 3])
    // 1 ,2 ,3
  

  • 可以替代數(shù)組的apply , 將數(shù)組轉為函數(shù)的參數(shù)

      es5: 
        var args = [0, 1, 2];
        f.apply(null, args);
    
     es6: 
        var args = [0, 1, 2];
        f(...args);
    

        ES5的寫法
            Math.max.apply(null, [14, 3, 77])
    
        ES6的寫法
            Math.max(...[14, 3, 77])
    

  • 擴展運算符的運用:

    • 1: 合并數(shù)組

        var arr1 = ['a', 'b'];
        var arr2 = ['c'];
        var arr3 = ['d', 'e'];
      
      // ES5的合并數(shù)組
      arr1.concat(arr2, arr3);
      // [ 'a', 'b', 'c', 'd', 'e' ]
      
      // ES6的合并數(shù)組
      [...arr1, ...arr2, ...arr3]
      // [ 'a', 'b', 'c', 'd', 'e' ]
      

    • 2: 與解構賦值結合

        const [first, ...rest] = [1, 2, 3, 4, 5];
        first // 1
        rest  // [2, 3, 4, 5]
      

      • 注意:如果將擴展運算符用于數(shù)組賦值掠哥，只能放在參數(shù)的最后一位巩踏，否則會報錯
    • 3: 字符串
      擴展運算符還可以將字符串轉為真正的數(shù)組。

        [...'hello']
      // [ "h", "e", "l", "l", "o" ]
      

    • 其他方法: 詳細見頁頭阮一峰es6入門教程

• 5: 箭頭函數(shù)
  ES6允許使用“箭頭”（=>）定義函數(shù)续搀。

      var f = v => v;
  
    等同于: 
    var f = function (v) {
         return v 
    }
  
    第一個等號后面的為function的參數(shù)(v);
    第二個箭頭等號指的是返回值, return v
  

  參數(shù)位寫法: 第一個等號后 ( = ),

  • 如果參數(shù)為空, 第一個等號后面是 () 例如: var f = () => 5;
  • 如果參數(shù)只有1個, 第一個等號后面是這個參數(shù), 例如: var f = v => v;
  • 如果參數(shù)有多個, 第一個等號后面是(x,y,z,....) , 例如: var sum = (num1, num2) => { return num1 + num2; }

  箭頭等號( => )后代碼塊寫法:

  • 如果返回的代碼塊只有一條語句直接寫: var f = () => 5;
  • 如果返回的代碼塊多于一句塞琼，加上{ }: var sum = (num1, num2) => { return num1 + num2; }
  • 如果返回是個對象怎么辦(對象有已一個{}), 再加一個{}, var getTempItem = id => ({ id: id, name: "Temp" });　因為{ } 被解析成代碼塊

  箭頭函數(shù)使用起來簡化了es5函數(shù)

    // 正常函數(shù)寫法
      [1,2,3].map(function (x) {
         return x * x;
      });
  
    // 箭頭函數(shù)寫法
    [1,2,3].map(x => x * x);
  

  箭頭函數(shù)使用注意事項 :

  • 1: 函數(shù)體內的this對象，就是定義時所在的對象禁舷，而不是使用時所在的對象, 即作用域始終綁定定義時所在的作用域彪杉，而不是指向運行時所在的作用域。

  • 2: 不可以當作構造函數(shù)榛了，也就是說在讶，不可以使用new命令，否則會拋出一個錯誤霜大。
  • 3: 不可以使用arguments對象构哺，該對象在函數(shù)體內不存在。如果要用，可以用Rest參數(shù)代替曙强。
  • 4: 不可以使用yield命令残拐，因此箭頭函數(shù)不能用作Generator函數(shù)。

  關于箭頭函數(shù)的this, 始終固化為終綁定定義時所在的對象
  指向的固定化碟嘴，并不是因為箭頭函數(shù)內部有綁定this的機制溪食，實際原因是箭頭函數(shù)根本沒有自己的this，導致內部的this就是外層代碼塊的this娜扇。正是因為它沒有this错沃，所以也就不能用作構造函數(shù)。

這次先到這, 還有一些沒有總結, 下次繼續(xù)