整理一下常用的JavaScript數(shù)組遍歷的方法。
for
let arr1 = ["Apple", "Orange", "Pear"];
for (let i = 0; i < arr1.length; i++) {
console.log(arr1[i]); // Apple Orange Pear
}
for..of
// 使用for..of進(jìn)行遍歷
let arr2 = ["Apple", "Orange", "Pear"];
// 遍歷數(shù)組元素
for (let key of arr2) {
console.log(key);// Apple Orange Pear
}
for..in（不推薦）
for..in循環(huán)不僅可以遍歷對(duì)象，也可以遍歷數(shù)組【數(shù)組是一種特殊的對(duì)象】
let arr3 = ["Apple", "Orange", "Pear"];
// 遍歷數(shù)組元素
for (let key in arr3) {
console.log(arr3[key]);// Apple Orange Pear
}
for..in還會(huì)遍歷非數(shù)字鍵
let a = [1, 2, 3];
a.foo = true;
for (let k in a) {
console.log(k); // 1 2 3 foo
}
注意：
for..in 循環(huán)會(huì)遍歷 所有屬性，不僅僅是這些數(shù)字屬性。在瀏覽器和其它環(huán)境中有一種稱為“類數(shù)組”的對(duì)象，它們 看似是數(shù)組。也就是說，它們有 length 和索引屬性，但是也可能有其它的非數(shù)字的屬性和方法，這通常是我們不需要的。for..in 循環(huán)會(huì)把它們都列出來。所以如果我們需要處理類數(shù)組對(duì)象，這些“額外”的屬性就會(huì)存在問題。
for..in 循環(huán)適用于普通對(duì)象，并且做了對(duì)應(yīng)的優(yōu)化。但是不適用于數(shù)組，因此速度要慢 10-100 倍。更多可查看：為什么不推薦用for...in遍歷數(shù)組
forEach()
使用forEach()方法，允許為數(shù)組的每個(gè)元素都運(yùn)行一個(gè)函數(shù)，forEach()方法與map()方法很相似，也是對(duì)數(shù)組的所有成員依次執(zhí)行參數(shù)函數(shù)。但是，forEach()方法不返回值，只用來操作數(shù)據(jù)。這就是說，如果數(shù)組遍歷的目的是為了得到返回值，那么使用map()方法，否則使用forEach()方法。
接受三個(gè)參數(shù)：數(shù)組中正在處理的當(dāng)前元素、當(dāng)前元素的索引、調(diào)用forEach()數(shù)組本身。
arr4.forEach(function(element, index, array) {
// ...
});
let arr4 = ["Apple", "Orange", "Pear"];
// 遍歷數(shù)組元素
arr4.forEach(function(element, index, arr4) {
console.log('元素名稱：' + element)
console.log("索引：" + index)
console.log('數(shù)組：' + arr4); // Apple Orange Pear
})
map()
map()方法將數(shù)組的所有成員依次傳入?yún)?shù)函數(shù)，然后把每一次的執(zhí)行結(jié)果組成一個(gè)新數(shù)組返回。作為數(shù)組元素的映射，它提供了一個(gè)回調(diào)函數(shù)，參數(shù)依次為處于當(dāng)前循環(huán)的元素、該元素下標(biāo)、數(shù)組本身，三者均可選。默認(rèn)會(huì)返回一個(gè)數(shù)組。
接受三個(gè)參數(shù)：數(shù)組中正在處理的當(dāng)前元素、當(dāng)前元素的索引、調(diào)用map()數(shù)組本身。
const resultArr = arr5.map(function(element, index, array) {
// 返回新值而不是當(dāng)前元素
})
let arr5 = ["Apple", "Orange", "Pear"];
// 遍歷數(shù)組元素
const resultArr = arr5.map(element => {
return element
})
console.log(resultArr); // [ 'Apple', 'Orange', 'Pear' ]
filter()
filter()方法用于過濾數(shù)組成員，滿足條件的成員組成一個(gè)新數(shù)組返回。它不會(huì)修改原始數(shù)組，而是返回一個(gè)新的數(shù)組，新數(shù)組包含滿足篩選條件的元素。
接受三個(gè)參數(shù)：數(shù)組中正在處理的當(dāng)前元素、當(dāng)前元素的索引、調(diào)用filter()數(shù)組本身。
let resultArr = arr6.filter(function(element, index, array) {
// ...
});
它的參數(shù)是一個(gè)函數(shù)，所有數(shù)組成員依次執(zhí)行該函數(shù)，返回結(jié)果為true的成員組成一個(gè)新數(shù)組返回。該方法不會(huì)改變?cè)瓟?shù)組。
let arr6 = [1, 2, 3, 4, 5, 6];
// 過濾數(shù)組元素
const resultArr = arr6.filter(element => element > 3)
console.log(resultArr); // [ 4, 5, 6 ]
find()
找到具有特定條件的對(duì)象，使函數(shù)返回TRUE的第一個(gè)(單個(gè)元素)。
接受三個(gè)參數(shù)：數(shù)組中正在處理的當(dāng)前元素、當(dāng)前元素的索引、調(diào)用find()數(shù)組本身。
let resultArr = arr7.find(function(element, index, array) {
// ...
});
let arr7 = [
{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Pete'
},
{
id: 3,
name: 'Mary'
},
]
const resultArr = arr7.find(element => element.id == 2);
console.log(resultArr); // { id: 2, name: 'Pete' }
findIndex()
接受三個(gè)參數(shù)：數(shù)組中正在處理的當(dāng)前元素、當(dāng)前元素的索引、調(diào)用findIndex()數(shù)組本身。
let resultIndex = arr8.findIndex(function(element, index, array) {
// ...
});
返回找到元素的索引，而不是元素本身，找不到符合條件的元素返回-1。
let arr8 = [
{
id: 1,
name: 'John'
},
{
id: 2,
name: 'Pete'
},
{
id: 3,
name: 'Mary'
},
]
const resultIndex = arr8.findIndex(element => element.id == 2);
console.log("索引：", resultIndex); // 1
reducer()
接收一個(gè)函數(shù)作為累加器，每一次運(yùn)行reducer會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入，最后將其結(jié)果匯總為單個(gè)返回值。
let resultCount = arr9.reduce(
function(accumulator, item, index, array) {
// ...
},[initial]);
參數(shù)
應(yīng)用函數(shù)時(shí)，上一個(gè)函數(shù)調(diào)用的結(jié)果將作為第一個(gè)參數(shù)傳遞給下一個(gè)函數(shù)。因此，第一個(gè)參數(shù)本質(zhì)上是累加器，用于存儲(chǔ)所有先前執(zhí)行的組合結(jié)果。最后，它成為 reduce 的結(jié)果。
let arr9 = [1, 2, 3, 4, 5]
let resultCount = arr9.reduce((sum, current) => sum + current, 0);
console.log(resultCount); // 15
初始值為0，第一次運(yùn)行sum值為0，current是第一個(gè)數(shù)組元素 為1
在第二次運(yùn)行時(shí)，sum = 1，我們將第二個(gè)數(shù)組元素2與其相加并返回。
在第三次運(yùn)行中，sum = 3，我們繼續(xù)把下一個(gè)元素與其相加，以此類推……
如果沒有初始值的話，reduce會(huì)將第一個(gè)元素作為初始值，并從第二個(gè)元素開始迭代，如果數(shù)組為空，在沒有初始值的情況下會(huì)報(bào)錯(cuò)。
reducerRight()
reduceRight()遍歷為從右到左。
let arr9 = [1, 2, 3, 4, 5]
let resultCount = arr9.reduceRight((sum, current) => sum + current, 0);
console.log(resultCount); // 15
some()
接受三個(gè)參數(shù)：數(shù)組中正在處理的當(dāng)前元素、當(dāng)前元素的索引、調(diào)用some()數(shù)組本身。
let resultArr = arr10.some(function(element, index, array) {
// ...
});
檢查數(shù)組中是否有元素滿足條件，如果滿足條件返回true，否則返回false。不會(huì)修改數(shù)組。
let arr10 = [1, 2, 3, 4, 5]
const result = arr10.some(item => item > 3);
console.log(result); // true
every()
接受三個(gè)參數(shù)：數(shù)組中正在處理的當(dāng)前元素、當(dāng)前元素的索引、調(diào)用every()數(shù)組本身。
let result = arr11.every(function(element, index, array) {
// ...
});
檢查數(shù)組中元素是否都滿足條件，如果都滿足條件返回true，否則返回false
let arr11 = [1, 2, 3, 4, 5]
const result = arr11.every(element => element > 3);
console.log(result); // false
keys()，values()，entries()
ES6 新增的三個(gè)方法用于遍歷數(shù)組，它們都返回一個(gè)遍歷器對(duì)象，可以用for...of循環(huán)進(jìn)行遍歷，唯一的區(qū)別是keys()是對(duì)鍵名的遍歷，values()是對(duì)鍵值的遍歷，entries()是對(duì)鍵值對(duì)的遍歷。
let arr12 = ['張三', '李四', '王五', '趙六']
// 鍵名遍歷
for (let index of arr12.keys()) {
console.log("index", index); // 0 1 2 3
}
// 鍵值遍歷
for (let items of arr12.values()) {
console.log("items", items); // 張三 李四 王五 趙六
}
// 鍵值對(duì)遍歷
for (let items of arr12.entries()) {
console.log("items", items); // [ 0, '張三' ][ 1, '李四' ][ 2, '王五' ][ 3, '趙六' ]
}
該文章在 2024/10/19 12:27:41 編輯過
400 186 1886
