?2016-2026 Matools All rights reserved,
粵ICP備17059708號
ES6為數(shù)組添加了多個新方法，既對它的功能進行了強化，也消除了容易產(chǎn)生歧義的語法。
一、靜態(tài)方法
1）of()
ES6為Array對象新增的第一個靜態(tài)方法是of()，用于創(chuàng)建數(shù)組，它能接收任意個參數(shù)，返回值是由這些參數(shù)組成的新數(shù)組。創(chuàng)建數(shù)組比較傳統(tǒng)的做法是用構(gòu)造函數(shù)Array()，但當(dāng)參數(shù)是一個正整數(shù)時，得到的卻是一個帶指定長度的空數(shù)組，而不是包含該參數(shù)的數(shù)組。Array.of()就不存在這種會產(chǎn)生歧義的行為，它不受參數(shù)的數(shù)據(jù)類型和數(shù)量的影響，返回的都是相同的結(jié)果，兩種創(chuàng)建方式的對比如下所示。
Array.of(2); //[2] Array(2); //[ , ]
2）from()
第二個新增的靜態(tài)方法是from()，可將類數(shù)組對象和可迭代對象轉(zhuǎn)換成數(shù)組，它接收3個參數(shù)，第一個是待轉(zhuǎn)換的對象，第二和第三都是可選參數(shù)，前者是回調(diào)函數(shù)，后者是執(zhí)行回調(diào)函數(shù)時所綁定的this對象。在下面的代碼中，obj是一個類數(shù)組對象，分別用兩種方式對其進行類型轉(zhuǎn)換，可以看出，Array.from()與傳統(tǒng)方式相比，可讀性與簡潔性更勝一籌。
var obj = {0: 1, 1: 2, 2: 3, length: 3}; [].slice.call(obj); //傳統(tǒng)轉(zhuǎn)換方式
Array.from(obj); //新的轉(zhuǎn)換方式
利用回調(diào)函數(shù)可以完成更加復(fù)雜的映射轉(zhuǎn)換（例如讓每個元素翻倍，如下代碼所示），它的第一個參數(shù)是當(dāng)前元素，第二個參數(shù)是元素索引。
Array.from(obj, function(value, index) { return value * 2; });
二、原型方法
很多第三方類庫（例如underscore.js、lodash.js等）都會提供數(shù)組相關(guān)的輔助函數(shù)，而ES6將其中的幾個函數(shù)納入到了標(biāo)準(zhǔn)中，大大降低了數(shù)組的使用難度，新增的原型方法如表6所示。
表6? 新的原型方法
方法 功能描述
fill() 將固定值填充到數(shù)組指定的范圍內(nèi)
copyWithin() 將數(shù)組的元素復(fù)制到同一數(shù)組的其它位置
find() 查找第一個滿足條件的匹配元素
findIndex() 查找第一個滿足條件的匹配元素的索引
keys() 遍歷數(shù)組的索引（鍵）
values() 遍歷數(shù)組的元素（值）
entries() 遍歷數(shù)組的索引和元素（鍵/值對）
1）fill()和copyWithin()
fill()和copyWithin()兩個方法都能接收3個參數(shù)（如表7所示），表中的復(fù)制序列是指需要復(fù)制的元素序列，而位置就是數(shù)組的索引。
表7? 三個參數(shù)說明
方法 第一個參數(shù) 第二個參數(shù)（可選） 第三個參數(shù)（可選）
fill() value：需要填充的值 start：開始填充的位置 end：結(jié)束填充的位置
copyWithin() target：開始執(zhí)行復(fù)制的位置 start：復(fù)制序列的起始位置 end：復(fù)制序列的結(jié)束位置
在使用這兩個方法時，有五個點需要注意，如下所列：
（1）不僅會修改原始數(shù)組，還會覆蓋指定范圍內(nèi)的元素。
（2）復(fù)制或填充執(zhí)行的都是淺拷貝。
（3）當(dāng)方法中的索引參數(shù)為負數(shù)時，會先和數(shù)組的長度相加，再計算出最終的索引。
（4）保持數(shù)組的長度不變，在數(shù)組末尾停止復(fù)制或填充。
（5）end參數(shù)的默認值為數(shù)組長度，并且該位置上的元素會被忽略。
在了解過它們使用時的注意事項后，再來理解下面的代碼就會相對簡單很多。
var arr1 = [1, 2, 3, 4, 5]; arr1.fill(6, 0, 2); //[6, 6, 3, 4, 5]
arr1.fill(7, 2, -1); //[6, 6, 7, 7, 5] var arr2 = [1, 2, 3, 4, 5];
arr2.copyWithin(2, 0, 2); //[1, 2, 1, 2, 5] arr2.copyWithin(2, 0,
-2); //[1, 2, 1, 2, 1]
2）find()和findIndex()
find()和findIndex()是對indexOf()的一種補充，indexOf()只能通過全等匹配（===）來搜索指定的值，而這兩個新方法卻可以自定義匹配條件。在下面的代碼中，通過indexOf()方法只能檢索出數(shù)字1的位置，改成字符串“1”后就無法匹配成功。
var arr = [1, 2, 3, 4, 5]; arr.indexOf(1); //0 arr.indexOf("1"); //-1
find()和findIndex()都能接收2個參數(shù)，第一個是回調(diào)函數(shù)，第二個是可選的參數(shù)，表示執(zhí)行回調(diào)函數(shù)時所綁定的this對象，其中回調(diào)函數(shù)包含3個參數(shù)：當(dāng)前元素、元素索引和原始數(shù)組。當(dāng)匹配失敗時，find()返回undefined，而findIndex()返回-1。下面用這兩個新方法搜索字符串“1”，可分別獲得匹配元素和其所在的索引。
arr.find(function(value, index, array) { //1 return value == "1"; });
arr.findIndex(function(value, index, array) { //0 return value == "1"; });
keys()、values()和entries()是三個迭代器方法，都返回一個可迭代的對象，為了能更直觀的演示它們各自的功能，現(xiàn)在利用擴展運算符將返回值轉(zhuǎn)換成數(shù)組，如下所示。
var arr = ["a", "b", "c"]; [...arr.keys()]; //[0, 1, 2] [...arr.values()]; //
["a", "b", "c"] [...arr.entries()]; //[[0, "a"], [1, "b"], [2, "c"]]
?
熱門工具 換一換