JavaScript 中的12种循环遍历方法【总结】

在 JavaScript 中，我们经常需要对数据进行遍历，获取其中的值或者进行一定的处理，本文总结了 JavaScript 中常见的 12 种数据遍历方法，分别是：

for 循环
for...in 循环
for...of 循环
forEach() 方法
map() 方法
filter() 方法
some() 方法
every() 方法
reduce() 方法
reduceRight() 方法
keys() 方法
values() 方法

下面我们一一来详细讲解这些方法的使用及注意事项。

1. for 循环

for 循环是 JavaScript 中最基本也最常见的循环语句，可以用来遍历数组和对象。

遍历数组

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

遍历对象

const obj = {name: "Tom", age: 20};
for (let key in obj) {
    console.log(key + ": " + obj[key]);
}

2. for...in 循环

for...in 循环是用来遍历对象的属性名称的。

const obj = {name: "Tom", age: 20};
for (let key in obj) {
    console.log(key + ": " + obj[key]);
}

3. for...of 循环

for...of 循环是用来遍历可迭代对象的。

const arr = [1, 2, 3, 4, 5];
for (let value of arr) {
    console.log(value);
}

4. forEach() 方法

forEach() 方法是用来遍历数组的，它是通过回调函数来实现遍历的。

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(value) {
    console.log(value);
});

5. map() 方法

map() 方法是用来遍历数组的，它可以对数组中的每个元素进行处理，并返回新的数组。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(function(value) {
    return value * 2;
});
console.log(newArr); // [2, 4, 6, 8, 10]

6. filter() 方法

filter() 方法是用来遍历数组的，它可以过滤数组中的元素，并返回新的数组。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(function(value) {
    return value > 2;
});
console.log(newArr); // [3, 4, 5]

7. some() 方法

some() 方法是用来遍历数组的，它可以判断数组中是否存在符合条件的元素。

const arr = [1, 2, 3, 4, 5];
const isExist = arr.some(function(value) {
    return value > 2;
});
console.log(isExist); // true

8. every() 方法

every() 方法是用来遍历数组的，它可以判断数组中是否所有元素都符合条件。

const arr = [1, 2, 3, 4, 5];
const isAll = arr.every(function(value) {
    return value > 2;
});
console.log(isAll); // false

9. reduce() 方法

reduce() 方法是用来遍历数组的，它可以对数组中的元素进行归纳计算。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce(function(total, value) {
    return total + value;
});
console.log(sum); // 15

10. reduceRight() 方法

reduceRight() 方法是用来遍历数组的，它可以从右到左对数组中的元素进行归纳计算。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduceRight(function(total, value) {
    return total + value;
});
console.log(sum); // 15

11. keys() 方法

keys() 方法是用来遍历对象的属性名称的。

const obj = {name: "Tom", age: 20};
const keyArr = Object.keys(obj);
console.log(keyArr); // ["name", "age"]

12. values() 方法

values() 方法是用来遍历对象的属性值的。

const obj = {name: "Tom", age: 20};
const valueArr = Object.values(obj);
console.log(valueArr); // ["Tom", 20]

总结：

以上是 JavaScript 中常见的 12 种数据遍历方法，每个方法都有独特的用途，需要根据实际情况选择使用。

示例：

// 使用 map() 方法将数组中每个元素的值加 1 并返回新的数组
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(function(value) {
    return value + 1;
});
console.log(newArr); // [2, 3, 4, 5, 6]

// 使用 reduce() 方法计算数组中所有元素的乘积
const arr = [1, 2, 3, 4, 5];
const product = arr.reduce(function(total, value) {
    return total * value;
});
console.log(product); // 120

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 中的12种循环遍历方法【总结】 - Python技术站