如何實(shí)現(xiàn)ES5新增數(shù)組

這篇文章主要講解了如何實(shí)現(xiàn)ES5新增數(shù)組，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

1、靜態(tài)方法 isArray():

Array.isArray()
// Array.isArray方法返回一個(gè)布爾值，表示參數(shù)是否為數(shù)組。
// 它可以彌補(bǔ)typeof運(yùn)算符的不足。
var arr = [1, 2, 3];
 console.log(typeof arr); // "object"
 Array.isArray(arr) // true
// 上面代碼中，typeof運(yùn)算符只能顯示數(shù)組的類型是Object，
// 而Array.isArray方法可以識(shí)別數(shù)組。

2、實(shí)例（對(duì)象）方法 map()：

map方法將數(shù)組的所有成員依次傳入?yún)?shù)函數(shù)，然后把每一次的執(zhí)行結(jié)果組成一個(gè)新數(shù)組返回。

var numbers = [1, 2, 3];
var res = numbers.map(function (n) {
 return n + 1;
});
res：  // [2, 3, 4]
numbers：// [1, 2, 3]
// 上面代碼中，numbers數(shù)組的所有成員依次執(zhí)行參數(shù)函數(shù)，
// 運(yùn)行結(jié)果組成一個(gè)新數(shù)組返回，原數(shù)組沒有變化。

map方法接受一個(gè)函數(shù)作為參數(shù)。該函數(shù)調(diào)用時(shí)，map方法向它傳入三個(gè)參數(shù)：當(dāng)前值、當(dāng)前位置和數(shù)組本身。

[1, 2, 3].map(function(elem, index, arr) {
 return elem * index;
});
// [0, 2, 6]
// 上面代碼中，map方法的回調(diào)函數(shù)有三個(gè)參數(shù)，elem為當(dāng)前成員的
// 值，index為當(dāng)前成員的位置，arr為原數(shù)組（[1, 2, 3]）

3、forEach():

forEach方法與map方法很相似，也是對(duì)數(shù)組的所有成員依次執(zhí)行參數(shù)函數(shù)。但是，forEach方法不返回值，只用來操作數(shù)據(jù)。這就是說，如果數(shù)組遍歷的目的是為了得到返回值，那么使用map方法，否則使用forEach方法。
forEach的用法與map方法一致，參數(shù)是一個(gè)函數(shù)，該函數(shù)同樣接受三個(gè)參數(shù)：當(dāng)前值、當(dāng)前位置、整個(gè)數(shù)組。

function log(elem, index, array) {
 console.log('[' + index + '] = ' + elem );
}
[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

注意：forEach方法無法中斷執(zhí)行，總是會(huì)將所有成員遍歷完。如果希望符合某種條件時(shí)，就中斷遍歷，則要使用for循環(huán)。

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
 if (arr[i] === 2) break;
 console.log(arr[i]);  // 1
}

4、filter():

filter方法用于過濾數(shù)組成員，滿足條件的成員組成一個(gè)新數(shù)組返回；
它的參數(shù)是一個(gè)函數(shù)，所有數(shù)組成員依次執(zhí)行該函數(shù)，返回結(jié)果為true的成員組成一個(gè)新數(shù)組返回；
該方法不會(huì)改變?cè)瓟?shù)組；
filter方法的參數(shù)函數(shù)可以接受三個(gè)參數(shù)：當(dāng)前成員，當(dāng)前位置和整個(gè)數(shù)組。

// filter方法的參數(shù)函數(shù)可以接受三個(gè)參數(shù)：當(dāng)前成員，當(dāng)前位置和整個(gè)數(shù)組。
var res = [1, 2, 3, 4, 5].filter(function (elem, index, arr) {
 return index % 2 === 0;
});
console.log(res); // [1, 3, 5]
// 上面代碼返回偶數(shù)位置的成員組成的新數(shù)組。

5、reduce();

reduce方法依次處理數(shù)組的每個(gè)成員，最終累計(jì)為一個(gè)值。reduce是從左到右處理（從第一個(gè)成員到最后一個(gè)成員）
reduce方法參數(shù)是一個(gè)函數(shù),該函數(shù)接受以下兩個(gè)參數(shù)。
1累積變量，默認(rèn)為數(shù)組的第一個(gè)成員
2當(dāng)前變量，默認(rèn)為數(shù)組的第二個(gè)成員

var res = [1, 2, 3, 4, 5].reduce(function (a, b) {
 console.log(a, b);
 return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
res//最后結(jié)果：15

上面代碼中，reduce方法求出數(shù)組所有成員的和:
第一次執(zhí)行，a是數(shù)組的第一個(gè)成員1，b是數(shù)組的第二個(gè)成員2；
第二次執(zhí)行，a為上一輪的返回值3，b為第三個(gè)成員3；
第三次執(zhí)行，a為上一輪的返回值6，b為第四個(gè)成員4；
第四次執(zhí)行，a為上一輪返回值10，b為第五個(gè)成員5；
至此所有成員遍歷完成，整個(gè)方法的返回值就是最后一輪的返回值15。

6、indexOf()、lastIndexOf()方法：

indexOf方法返回給定元素在數(shù)組中第一次出現(xiàn)的位置，返回結(jié)果是匹配開始的位置。如果沒有出現(xiàn)則返回-1。

var a = ['a', 'b', 'c'];
a.indexOf('b'); // 1
a.indexOf('y'); // -1
// indexOf方法還可以接受第二個(gè)參數(shù)，表示搜索的開始位置。
['a', 'b', 'c'].indexOf('a', 1); // -1
// 上面代碼從1號(hào)位置開始搜索字符a，結(jié)果為-1，表示沒有搜索到。

lastIndexOf方法返回給定元素在數(shù)組中最后一次出現(xiàn)的位置，如果沒有出現(xiàn)則返回-1;
lastIndexOf方法的用法跟indexOf方法一致，主要的區(qū)別lastIndexOf從尾部開始匹配，indexOf則是從頭部開始匹配。
另外，lastIndexOf的第二個(gè)參數(shù)表示從該位置起向前匹配。

var a = [2, 5, 9, 2];
 a.lastIndexOf(2); // 3
 a.lastIndexOf(7); // -1

注意：這兩個(gè)方法不能用來搜索NaN的位置，即它們無法確定數(shù)組成員是否包含NaN。如下：

[NaN].indexOf(NaN);   // -1
[NaN].lastIndexOf(NaN);// -1

這是因?yàn)檫@兩個(gè)方法內(nèi)部，使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行比較，而NaN呢，就比較狠，它連自己都不等于，是唯一一個(gè)不等于自身的值！

看完上述內(nèi)容，是不是對(duì)如何實(shí)現(xiàn)ES5新增數(shù)組有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。