1 Array.prototype.filter()
filter() 方法創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素鸟悴。
//ES5
var filtered = [12, 5, 8, 130, 44].filter(function (value) {
return value >= 10;
});
console.log(filtered); // filtered is [12, 130, 44]
//ES6
let [...spraed]= [12, 5, 8, 130, 44];
let filtered = spraed.filter(value => value >= 10);
console.log(filtered);// filtered is [12, 130, 44]
- filter 不會改變原數(shù)組( filter 遍歷的元素崔泵,是傳入 callback 那一刻的值份企,之后數(shù)組的改變不影響遍歷的結(jié)果)
- 返回值: 一個由原數(shù)組中滿足條件的元素組成的新數(shù)組
2 Array.prototype.forEach()
forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。
[].forEach(function(value, index, array) { // ...});
- forEach() 方法就是對每個元素進行遍歷朵你,循環(huán)
- 返回值:總是返回 undefined值慎式,并且不可鏈式調(diào)用
3 Array.prototype.includes()
includes() 方法用來判斷一個數(shù)組是否包含一個指定的值安接,如果是,酌情返回 true或 false雾家。
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
//fromIndex 為負值時铃彰,默認索引從0開始,整個數(shù)組都被搜索
//fromIndex 大于等于數(shù)組長度時芯咧,返回 false牙捉,數(shù)組不會被搜索
includes() 方法可以被用于其他類型的對象:
(function() {
console.log([].includes.call(arguments, 'a')); // true
console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');
相當于
console.log(['a','b','c'].includes('a')); // true
console.log(['a','b','c'].includes('d')); // false
- 返回值:判斷后返回 true / false
4 Array.prototype.map()
map() 方法創(chuàng)建一個新數(shù)組,其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果敬飒。
- map方法會給原數(shù)組中的每個元素都按順序調(diào)用一次函數(shù)邪铲。函數(shù)每次執(zhí)行后的返回值(包括undefined)組合起來形成一個新數(shù)組。
- map 不修改調(diào)用它的原數(shù)組本身
- 返回值:與forEach() 方法類似无拗,但是返回值不同带到,map返回新數(shù)組
var map = Array.prototype.map
var a = map.call("Hello World", function(x) {
return x.charCodeAt(0);
})
// a的值為[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
//如何去遍歷用 querySelectorAll 得到的動態(tài)對象集合
var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
return obj.value;
});
//反轉(zhuǎn)字符串
var str = '12345';
Array.prototype.map.call(str, function(x) {
return x;
}).reverse().join('');
// Output: '54321'
// Bonus: use '===' to test if original string was a palindrome
5 Array.prototype.reduce()
reduce() 方法對累加器和數(shù)組中的每個元素 (從左到右)應用一個函數(shù),將其減少為單個值英染。
- 返回值:函數(shù)累計處理的結(jié)果
var total = [0, 1, 2, 3].reduce(function(sum, value) {
return sum + value;
}, 0);
// total is 6
或
[0, 1, 2, 3].reduce( (prev, curr) => prev + curr );
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]
求最大值
var maxCallback = ( pre, cur ) => Math.max( pre.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
// map/reduce; better solution, also works for empty arrays
[ { x: 22 }, { x: 42 } ].map( el => el.x )
.reduce( maxCallback2, -Infinity );
計算數(shù)組中每個元素出現(xiàn)的次數(shù)
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
6 Array.prototype.find()
find() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值揽惹。否則返回 undefined