ES6對數組的擴展


ECMAScript6對數組進行了擴展,為數組Array構造函數添加了from()、of()等靜態方法,也為數組實例添加了find()、findIndex()等方法。下面一起來看一下這些方法的用法。

Array.from()

Array.from()將類數組(array-like)對象與可遍歷的對象轉化為數組並返回。例如將dom節點集合轉化為數組,以前我們可能都會這樣寫:

var divs = document.querySelectAll("div");
[].slice.call(divs).forEach(function (node) {
   console.log(node);         
})

現在我們可以這樣寫:

var divs = document.querySelectAll("div");
Array.from(divs).forEach(function (node) {
   console.log(node);         
})

上面兩種寫法基本上是相同的。

Array.from()也可以將ES6中新增的Set、Map等結構轉化為數組:

// 將Set結構轉化為數組
Array.from(new Set([1, 2, 3, 4])); // [1, 2, 3, 4]

//將Map結構轉化為數組
Array.from(new Map(["name", "zlw"])); // ["name", "zlw"]

 字符串既是類數組又是可遍歷的,所以Array.from()也可將字符串轉化為數組:

Array.from("zlw"); // ["z", "l", "w"]

Array.from()還有兩個可選參數,完整語法如下:

Array.from(obj, mapFn, thisArg)

mapFn其實就是數組的map方法,對數組的每個元素處理。thisArg是執行環境的上下文。  Array.from(obj, mapFn, thisArg) 等同於 Array.from(obj).map(mapFn, thisArg)

Array.of()

Array.of()將其參數轉化為數組。如:

Array.of(1, 2, 3); // [1, 2, 3]

我們知道用Array構造函數也可以實現同樣功能:

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

他們的不同之處在於:

Array.of(3); // [3]

Array(3) // [undefined, undefined, undefined] 

當傳入一個參數時,Array.of()會返回只有一個元素的數組,而Array()會返回長度為傳入參數而元素都為undefined的數組。

Array.prototype.fill()

fill()方法用一個值填充數組給定開始和結束位置之間的的所有值,語法如下:

fill(value, start, end)

參數start、end是填充區間,包含start位置,但不包含end位置。如果省略,則start默認值為0,end默認值為數組長度。如果兩個可選參數中有一個是負數,則用數組長度加上該數來確定相應的位置。例:

[1, 2, 3].fill(4) // [4, 4, 4]
[1, 2, 3].fill(4, 1, 2) // [1, 4, 3]
[1, 2, 3].fill(4, -3, -2) // [4, 2, 3] 

Array.prototype.find()與Array.prototype.findIndex()

find()方法返回數組中符合條件的第一個元素,如果沒有則返回undefind。語法如下:

array.find(callback, context);

參數包括一個回調函數和一個可選參數(執行環境上下文)。回調函數會遍歷數組的所有元素,直到找到符合條件的元素,然后find()方法返回該元素。例:

[1, 2, 3, 4].find(function(el, index, arr) {
   return el > 2; 
}) // 3

[1, 2, 3, 4].find(function(el, index, arr) {
  return el > 4;
}) // undefined

findIndex()方法與find()方法用法類似,返回的是第一個符合條件的元素的索引,如果沒有則返回-1。例:

[1, 2, 3, 4].findIndex(function(el, index, arr) {
   return el > 2; 
}) // 2

[1, 2, 3, 4].findIndex(function(el, index, arr) {
  return el > 4;
}) // -1

Array.prototype.entries()、Array.prototype.keys與Array.prototype.values()

entries()、keys與values都返回一個數組迭代器對象。例:

var entries = [1, 2, 3].entries();
console.log(entries.next().value); // [0, 1]
console.log(entries.next().value); // [1, 2]
console.log(entries.next().value); // [2, 3]

var keys = [1, 2, 3].keys(); console.log(keys.next().value); // 0
console.log(keys.next().value); // 1
console.log(keys.next().value); // 2

var valuess = [1, 2, 3].values(); console.log(values.next().value); // 1
console.log(values.next().value); // 2
console.log(values.next().value); // 3

迭代器的next()方法返回的是一個包含value屬性與done屬性的對象,而value屬性是當前遍歷位置的值,done屬性是一個布爾值,表示遍歷是否結束。

我們也可以用for...of來遍歷迭代器:

for (let i of entries) {
  console.log(i)
} // [0, 1]、[1, 2]、[2, 3]
for (let [index, value] of entries) { console.log(index, value) } // 0 1、1 2、2 3

for (let key of keys) { console.log(key) } // 0, 1, 2
for (let value of values) { console.log(value) } // 1, 2, 3

Array.prototype.copyWithin()

copyWithin()方法語法如下:

arr.copyWithin(target, start, end = this.length)

最后一個參數為可選參數,省略則為數組長度。該方法在數組內復制從start(包含start)位置到end(不包含end)位置的一組元素覆蓋到以target為開始位置的地方。例:

[1, 2, 3, 4].copyWithin(0, 1) // [2, 3, 4, 4]

[1, 2, 3, 4].copyWithin(0, 1, 2) // [2, 2, 3, 4]

如果start、end參數是負數,則用數組長度加上該參數來確定相應的位置:

[1, 2, 3, 4].copyWithin(0, -2, -1) // [3, 2, 3, 4]

需要注意copyWithin()改變的是數組本身,並返回改變后的數組,而不是返回原數組的副本。

數組推導(array comprehensions)

 數組推導就是利用for...of循環基於現有的數組生成新數組。例:

[for (i of [1, 2, 3]) i * i]  // [1, 4, 9]

數組推導允許使用if語句:

// 單個if語句
[for (i of [1, 2, 3]) if (i < 3) i] // [1, 2]

//多重if語句
[for (i of [1, 2, 3]) if (i < 3) if (i > 1) i] // [2]

需要注意的是for...of總是寫在最前面。

數組推導也允許使用多重for..of循環:

[for (i of [1, 2, 3]) for (j of [4, 5, 6]) i * j] // [4, 5, 6, 8, 10, 12, 12, 15, 18]

數組推導中還可以包含數組推導:

[for (i of [1, 2, 3]) [for (j of [4, 5, 6]) i * j]] // [[4, 5, 6], [8, 10, 12], [12, 15, 18]]

 

各大瀏覽器對ES6的支持可以查看kangax.github.io/es5-compat-table/es6/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM