ES6-Array的擴充套件

keephhh發表於2017-09-20
原文網址 : https://juejin.im/post/59c1e1846fb9a00a4a4cbdc8
套件

1. Array.from( likeArrObj, [valueHandleFn], [thisObj] )

Array.from()用於將以下兩類物件轉化為真正的陣列：

  • 類似陣列的物件（array-like object，即本身 具有length屬性的物件 ）
  • 可遍歷物件（ 原型鏈上具有[Symbol.iterator]方法的物件 ，即具有iterator介面的iterable物件）

它接受三個引數：

  • likeArrObj： 需要被轉化的物件
  • [valueHandleFn]： 用於處理該物件中每個值的一個 遍歷函式 ，類似於map()，該引數可選。
  • [thisObj]： 用於 繫結[valueHandleFn]中的this ，也就是隻有使用了[valueHandleFn]，它才會有作用

它返回的是將該物件轉化成功後，得到的陣列。

1.1 程式碼示例

  let likeArrObj = {
    '0': 0,
    '1': 1,
    '2': 2,
    length: 3,
  }

  // ES5 的寫法 (兩種)
  var arr_es5_01 = Array.prototype.slice.call( likeArrObj )
  var arr_es5_02 = [].prototypr.slice.call( likeArrObj )

  // ES6 的寫法 (兩種)
  let arr_es6_01 = Array.from( likeArrObj )
  let arr_es6_02 = [...likeArrObj]複製程式碼

1.1.1 對程式碼的說明：

  1. Array.prototype.slice( startNum, endNum ) 可以淺複製一部分array元素，起始於startNum，終止於(endNum - 1)。

淺複製 是說只拷貝陣列元素的內容，而不管該內容是不是指向另一個值。

  • 通俗點講，就是隻拷貝一層資料。
    深複製 與淺複製對應，它會不僅拷貝陣列元素的內容，還會分析其內容是否為一個“ 指標 ”型別的值，如物件，函式，陣列等。
  • 如果是一個“ 指標 ”型別的值，則會繼續將其值下的所有內容統統複製一份.
  • 內容中的內容全要複製，直到其內容為 undefined 、 null 、 Boolean 、 Number 、 String 、 Symbol 的一種。
  1. Function.prototype.call( thisObj, arg1, arg2, ..., argn ) 用於在執行時指定該函式的this繫結物件

thisObj 是需要繫結的物件
arg1, arg2, ..., argn 是該函式呼叫的引數
Function.prototype.apply( thisObj, argArr ) 與該方法功能一致，只是在引數傳遞上，使用的是一個陣列形式

  1. [...likeArrObj]中的 ... 是擴充套件運算子，它通過呼叫likeArrObj的 [Symbol.iterator]方法 來將其打散成一個個獨立的量，最後再用 [] 來將其合成一個新的陣列，所以使用該寫法時，一定需要確保likeArrObj具有 [Symbol.iterator]方法。

1.2 應用場景

它的常見應用場景：

  • 將 document.querySelectorAll( str ) 返回的NodeList集合轉化為真正的陣列
  • 將 arguments 物件轉化為真正的陣列

轉化為真正的陣列之後，就可以使用 Array.prototype.forEach() 方法來操作該物件了。

ES6標準入門第二版（阮一峰）

相關文章