JS遍历对象、数组的一些方法与适用场景

从一到十

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);

特点：

1. 可以拿到元素、索引、数组自身三个值。
2. 支持向回调函数传递参数this，前提是不要使用箭头函数作为回调。
3. 不支持中断。

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]

特点：

1. 可以拿到元素、索引、数组自身三个值。
2. 得到一个新数组，不影响原数组。
3. 不支持中断。
4. 新数组与原数组长度一致。
5. 回调函数返回新元素。

map强调的是处理每一个元素数据并得到一个新数组。

filter

特点：

1. 可以拿到元素、索引、数组自身三个值。
2. 得到一个新数组，不影响原数组。
3. 不支持中断。
4. 新数组与原数组长度可能不一致。
5. 回调函数返回bool类型决定是否将当前元素压入新数组。

filter强调的是筛选出所有符合条件的数据并得到一个新数组。

some

every

与some类似，不需要得到新数组，只是想知道数组中的每个元素是否都满足条件。

find

findIndex

与find类似，但是返回的是索引，没有任何元素符合条件则返回-1。

reduce

从数组第一个元素开始，每次循环将数据的处理结果传递到下一次循环，直到处理完每个元素，最终得到一个值。

reduceRight

和reduce一样，不过是从数组末尾开始处理。

总结

1. 遍历对象用for...in...。
2. 遍历数组用for、for...of...、forEach。
3. 期望对原数组加工处理并得到一个新数组用map。
4. 期望对原数组进行筛选并得到一个筛选后的新数组，用filter。
5. 找出数组中满足条件的第一个元素用find、findIndex。对标的是filter，不过仅仅返回一条数据。
6. 仅需要知道数组中是否有满足条件的元素，而不需要得到元素数据，用some、every。
7. 需要对数组中每条数据进行处理，并且每次的处理依赖上次的处理结果，用reduce、reduceRight。