
总结了几种常用的遍历方法。
只提供基础例子,高深用法请自己查文档。

for
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 输出: 1, 2, 3, 4, 5
当然,还有 while 循环,我懒得写。
forEach
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
console.log(item);
})
// 输出: 1, 2, 3, 4, 5
forEach 函数里可以传3个参数,可以看【JS】数组forEach
值得注意的是,forEach 是不能使用 break 和 continue 的。
map
map 的使用方法和 forEach 类似,但 map 是有返回值的,可以返回一个新数组。
var arr = [1, 2, 3, 4, 5];
var doubleNumbers = arr.map(item => {
return item * 2;
});
console.log(doubleNumbers);
// 输出: 2, 4, 6, 8, 10
every
every 能否继续遍历,取决于返回值,默认返回 false,所以默认只遍历第一个元素。如需全部遍历,可以把返回值设置成 true。
var arr = [1, 2, 3, 4, 5];
arr.every(function(item) {
console.log(item);
return true;
});
// 输出: 1, 2, 3, 4, 5
every 和 forEach 的使用方法很像,every 的出现解决了 forEach 中无法 break 和 continue 的问题。
var arr = [1, 2, 3, 4, 5];
// every break
arr.every(function(item) {
if (item === 3) {
return false;
} else {
console.log(item);
return true;
}
})
// 输出:1,2
// every continue
arr.every(function(item) {
if (item !== 3) {
console.log(item);
}
return true;
})
// 输出: 1, 2, 4, 5
some
some 的用法和 every 的用法几乎一样,不同点在于,every 遇到 true 才继续遍历,some 遇到 true 会停止遍历。
var arr = [1, 2, 3, 4, 5];
arr.some(function(item) {
console.log(item)
if (item === 3) {
return true;
}
})
// 输出: 1, 2, 3
for ... in ...
能遍历数组,但主要是为 object 设计的,所以用 for...in... 遍历数组会有瑕疵。
var arr = [1, 2, 3, 4, 5];
for (var key in arr) {
// 这里的 key 是字符串
console.log(arr[key])
}
// 输出: 1, 2, 3, 4, 5
瑕疵:往数组上挂一个属性,也会遍历出来
var arr = [1, 2, 3, 4, 5];
arr.a = 9;
for (var key in arr) {
// 这里的 key 是字符串
console.log(key, arr[key])
}
// 输出:
// 0 1,
// 1 2,
// 2 3,
// 3 4,
// 4 5,
// a 9
for of
for of 能遍历一切能遍历的,比如字符串。
var arr = [1, 2, 3, 4, 5];
for (var item of arr) {
console.log(item)
}
// 输出: 1, 2, 3, 4, 5
filter
filter 是一个过滤器,用法如下。
const arr = [1, 2, 3, 4, 5];
var result = arr.filter(function(item) {
return item < 4;
})
console.log(result);
// 输出: [1, 2, 3]
find
find 用于找出第一个符合条件的数组成员,如果找不到则返回 undefined。
const arr = [1, 2, 3, 4, 5];
var result = arr.find(function(item) {
return item === 2;
})
console.log(result);
// 输出: 2
reduce
reduce 主要作用是累加器。也能做一些重构数据结构的工作(当然,也有很多方法代替)。
var arr = [1, 2, 3, 4, 5]
/* 【累加器】 */
var sumVal = arr.reduce(function(sum, number) {
return sum += number;
}, 0)
console.log(sumVal);
// 输出: 15
提取数据,并重组成一个新数组。
// 提取数组
var primariColors = [
{color: 'red'},
{color: 'yellow'},
{color: 'green'}
]
var colors = primariColors.reduce(function(previous, primariColor) {
previous.push(primariColor.color);
return previous;
}, [])
console.log(colors);
// 输出: ["red", "yellow", "green"]










