新增Array方法(ES5)

2019-11-06 07:18:06

字體：大中小

來源：轉載

供稿：網友

前言

最近研究zepto源碼的時候發現一些非常好用的數組方法，這些就是es5新增的數組方法，而w3c這些網站并沒有這些方法介紹，可能是太久沒更新維護了。總結了一下，給這些方法分了類，大體如下： 5個迭代方法：forEach()、map()、filter()、some()、every()； 2個索引方法：indexOf() 和 lastIndexOf()； 2個歸并方法：reduce()、reduceRight()；

迭代方法

這些方法都接收兩個參數，第一個參數是一個函數，它接收三個參數，數組當前項的值、當前項在數組中的索引、數組對象本身。第二個參數是執行第一個函數參數的作用域對象，也就是上面說的函數中this所指向的值。注意，這幾種方法都不會改變原數組。

1、forEach(即遍歷)

var arr = [1, 2, 3, 4]; [4, 3, 2, 1].forEach(function (item, index, array) { console.log('item', item); //打印當前值(4,3,2,1) console.log('index', index); //打印索引值(0,1,2,3) console.log('array', array); //[4, 3, 2, 1] console.log('this', this); //如果有arr參數值的話，打印[1, 2, 3, 4]，否則打印window對象 }, arr); var arr2 = [5, 6, 7, 8]; [].forEach.call(arr, function (item, index, array) { console.log('item', item); //打印當前值(1,2,3,4) console.log('index', index); //打印索引值(0,1,2,3) console.log('array', array); //[1, 2, 3, 4] console.log('this', this); //如果有arr2參數值的話，打印[5, 6, 7, 8]，否則打印window對象 }, arr2);

這里把方法的作用域對象也講下，后面的例子就不重復了。如果這第2個可選參數不指定，則使用全局對象代替（在瀏覽器是為window），嚴格模式下甚至是undefined。而且刪除數組中某項后，forEach遍歷數組也有點不同。

var array = [1, 2, 3]; delete array[1]; // 移除 2 console.log(array); // 打印"1,,3" console.log(array[1]);//打印undefined console.log(array.length); //長度仍然是3 array.forEach(alert); // 彈出的僅僅是1和3 array.forEach(console.log); //打印1 0 [1,,3]、3 2 [1,,3]

2、map(映射)

var data = [1, 2, 3, 4]; var arrayOfSquares = data.map(function (item) { return item * item; }); console.log(arrayOfSquares); //打印[1, 4, 9, 16]

map是一一對應的關系，如果沒有return的話，則返回一個跟原數組相同長度的undefined數組。在實際使用的時候，我們可以利用map方法方便提取對象數組中的特定屬性值們。

3、filter(過濾)

過濾同map相似，不過沒有return的話，返回的數組就沒有該項，常用于篩選部分符合條件的數組。

4、some(某項滿足)

some遍歷數組，如果有某項滿足條件，則跳出循環不再執行，返回true；否則返回false。

5、every(所有項滿足)

every遍歷數組，如果某項沒有滿足條件，則跳出循環不再執行，返回false；如果所有項都滿足則返回true。

索引方法

1、indexOf(索引)

indexOf方法在字符串中一直都用，數組這里的indexOf方法很類似:array.indexOf(searchElement[, fromIndex])。

var array = [1, 4, 6, 2, 4]; console.log(array.indexOf(4, "x")); // 1 ("x"被忽略) console.log(array.indexOf(4, "2")); // 4 (從2號位開始搜索) console.log(array.indexOf(3)); // -1 (未找到) console.log(array.indexOf("4")); // -1 (未找到，因為4 !== "4")

返回整數索引值，如果沒有匹配（進行嚴格匹配），返回-1。fromIndex可選，表示從這個位置開始搜索，若缺省或格式不合要求，使用默認值0，fromIndex使用字符串數值也是可以的，例如”3”和3都可以，沒有進行嚴格匹配。

2、lastIndexOf(倒序查找)

var array = [1, 6, 4, 2, 4]; console.log(array.lastIndexOf(4)); //4 console.log(array.lastIndexOf(4, 1)); //-1

倒序查找，如果制定了fromIndex，則從fromIndex往前查找。

歸并方法

1、reduce(合并)

var result = [1, 2, 3, 4].reduce(function (PRevious, current, index, array) { console.log('previous', previous); //1,3,6 return previous + current; }); console.log(result); //10 result = [1, 2, 3, 4].reduce(function (previous, current, index, array) { console.log('previous', previous); //3,4,6,9 return previous + current; }, 3); console.log(result); //13

array.reduce(callback[, initialValue])，如果不存在initialValue的話，則第一個previous是數組第一項。最后兩個參數為索引值index以及數組本身。執行過程：

// 初始設置previous = initialValue = 3, current = 1// 第一次迭代previous = (3 + 1) = 4, current = 2// 第二次迭代previous = (4 + 2) = 6, current = 3// 第三次迭代(退出循環)previous = (6 + 3) = 9, current = 4

實際應用當中，我們可以實現二維數組的扁平化(即轉化為一維數組)。

var matrix = [ [1, 2], [3, 4], [5, 6] ]; console.log(matrix.reduce(function (prev, curr) { //[1, 2, 3, 4, 5, 6] return prev.concat(curr); }));