从一到十
JS遍历对象、数组的一些方法与适用场景
for
for (let i = 0; i < arr1.length; ++i) {
console.log(arr1[i]); // 5, 10, 20
}
几乎是任何编程语言都有的基本语法，用于遍历数组，中途可通过break中断遍历。
for...in...
const arr1 = [5, 10, 20];
for (const item in arr1) {
console.log(item); // 0, 1, 2
}
输出的是索引，而不是元素值。它可以用来遍历对象
const arr1 = { a: 5, b: 10, c: 20 };
for (const item in arr1) {
console.log(item); // 5, 10, 20
}
显然，for...in...适用于遍历对象。
for...of...
const arr1 = [5, 10, 20];
for (const item of arr1) {
console.log(item); // 5, 10, 20
}
可以说是for循环的改进版本，不能用于遍历对象，中途可通过break中断遍历。
与下面的写法等效
const arr1 = [5, 10, 20];
for (const index of arr1.values()) {
console.log(index); // 5, 10, 20
}
如果只想获取索引，可以遍历keys
const arr1 = [5, 10, 20];
for (const index of arr1.keys()) {
console.log(index); // 0, 1, 2
}
如果想同时得到索引和值，可以遍历entries
const arr1 = [5, 10, 20];
for (const [index, value] of arr1.entries()) {
console.log(index); // 0, 1, 2
console.log(value); // 5, 10, 20
}
forEach
数组的成员方法
const arr1 = [5, 10, 20];
arr1.forEach(function (value, index, arr) {
console.log(`index = ${index}, value = ${value}`);
console.log(this);
}, 100);
特点：
- 可以拿到元素、索引、数组自身三个值。
- 支持向回调函数传递参数
this，前提是不要使用箭头函数作为回调。 - 不支持中断。
map
数组的成员方法
const arr1 = [10, 20, 30];
const tmp = arr1.map((value, index, arr) => {
return value * 2;
});
console.log(arr1); // [10, 20, 30]
console.log(tmp); // [20, 40, 60]
特点：
- 可以拿到元素、索引、数组自身三个值。
- 得到一个新数组，不影响原数组。
- 不支持中断。
- 新数组与原数组长度一致。
- 回调函数返回新元素。
map强调的是处理每一个元素数据并得到一个新数组。
filter
特点：
- 可以拿到元素、索引、数组自身三个值。
- 得到一个新数组，不影响原数组。
- 不支持中断。
- 新数组与原数组长度可能不一致。
- 回调函数返回
bool类型决定是否将当前元素压入新数组。
filter强调的是筛选出所有符合条件的数据并得到一个新数组。
some
every
与some类似，不需要得到新数组，只是想知道数组中的每个元素是否都满足条件。
find
findIndex
与find类似，但是返回的是索引，没有任何元素符合条件则返回-1。
reduce
从数组第一个元素开始，每次循环将数据的处理结果传递到下一次循环，直到处理完每个元素，最终得到一个值。
reduceRight
和reduce一样，不过是从数组末尾开始处理。
总结
- 遍历对象用
for...in...。 - 遍历数组用
for、for...of...、forEach。 - 期望对原数组加工处理并得到一个新数组用
map。 - 期望对原数组进行筛选并得到一个筛选后的新数组，用
filter。 - 找出数组中满足条件的第一个元素用
find、findIndex。对标的是filter，不过仅仅返回一条数据。 - 仅需要知道数组中是否有满足条件的元素，而不需要得到元素数据，用
some、every。 - 需要对数组中每条数据进行处理，并且每次的处理依赖上次的处理结果，用
reduce、reduceRight。
