1. 程式人生 > 程式設計 >ES5新增陣列的實現方法

ES5新增陣列的實現方法

1、靜態方法 isArray():

Array.isArray()
// Array.isArray方法返回一個布林值,表示引數是否為陣列。
// 它可以彌補typeof運算子的不足。
var arr = [1,2,3];
 console.log(typeof arr); // "object"
 Array.isArray(arr) // true
// 上面程式碼中,typeof運算子只能顯示陣列的型別是Object,
// 而Array.isArray方法可以識別陣列。

2、例項(物件)方法 map():

map方法將陣列的所有成員依次傳入引數函式,然後把每一次的執行結果組成一個新陣列返回。

var numbers = [1,3];
var res = numbers.map(function (n) {
 return n + 1;
});
res:  // [2,3,4]
numbers:// [1,3]
// 上面程式碼中,numbers陣列的所有成員依次執行引數函式,
// 執行結果組成一個新陣列返回,原陣列沒有變化。

map方法接受一個函式作為引數。該函式呼叫時,map方法向它傳入三個引數:當前值、當前位置和陣列本身。

[1,3].map(function(elem,index,arr) {
 return elem * index;
});
// [0,6]
// 上面程式碼中,map方法的回撥函式有三個引數,elem為當前成員的
// 值,index為當前成員的位置,arr為原陣列([1,3])

3、forEach():

forEach方法與map方法很相似,也是對陣列的所有成員依次執行引數函式。但是,forEach方法不返回值,只用來操作資料。這就是說,如果陣列遍歷的目的是為了得到返回值,那麼使用map方法,否則使用forEach方法。

forEach的用法與map方法一致,引數是一個函式,該函式同樣接受三個引數:當前值、當前位置、整個陣列。

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

注意:forEach方法無法中斷執行,總是會將所有成員遍歷完。如果希望符合某種條件時,就中斷遍歷,則要使用for迴圈。

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

4、filter():

filter方法用於過濾陣列成員,滿足條件的成員組成一個新陣列返回;
它的引數是一個函式,所有陣列成員依次執行該函式,返回結果為true的成員組成一個新陣列返回;
該方法不會改變原陣列;
filter方法的引數函式可以接受三個引數:當前成員,當前位置和整個陣列。

// filter方法的引數函式可以接受三個引數:當前成員,當前位置和整個陣列。
var res = [1,4,5].filter(function (elem,arr) {
 return index % 2 === 0;
});
console.log(res); // [1,5]
// 上面程式碼返回偶數位置的成員組成的新陣列。

5、reduce();

reduce方法依次處理陣列的每個成員,最終累計為一個值。reduce是從左到右處理(從第一個成員到最後一個成員)
reduce方法引數是一個函式,該函式接受以下兩個引數。
1累積變數,預設為陣列的第一個成員
2當前變數,預設為陣列的第二個成員

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

上面程式碼中,reduce方法求出陣列所有成員的和:
第一次執行,a是陣列的第一個成員1,b是陣列的第二個成員2;
第二次執行,a為上一輪的返回值3,b為第三個成員3;
第三次執行,a為上一輪的返回值6,b為第四個成員4;
第四次執行,a為上一輪返回值10,b為第五個成員5;
至此所有成員遍歷完成,整個方法的返回值就是最後一輪的返回值15。

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

indexOf方法返回給定元素在陣列中第一次出現的位置,返回結果是匹配開始的位置。如果沒有出現則返回-1。

var a = ['a','b','c'];
a.indexOf('b'); // 1
a.indexOf('y'); // -1
// indexOf方法還可以接受第二個引數,表示搜尋的開始位置。
['a','c'].indexOf('a',1); // -1
// 上面程式碼從1號位置開始搜尋字元a,結果為-1,表示沒有搜尋到。

lastIndexOf方法返回給定元素在陣列中最後一次出現的位置,如果沒有出現則返回-1;
lastIndexOf方法的用法跟indexOf方法一致,主要的區別lastIndexOf從尾部開始匹配,indexOf則是從頭部開始匹配。
另外,lastIndexOf的第二個引數表示從該位置起向前匹配。

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

注意:這兩個方法不能用來搜尋NaN的位置,即它們無法確定陣列成員是否包含NaN。如下:

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

這是因為這兩個方法內部,使用嚴格相等運算子(===)進行比較,而NaN呢,就比較狠,它連自己都不等於,是唯一一個不等於自身的值!

到此這篇關於ES5新增陣列的實現方法的文章就介紹到這了,更多相關ES5新增陣列內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!