JS常用数组循环方法

for 循环

const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

• 优点: 可完全控制循环的开始和结束，适用于需要遍历部分数组或进行复杂逻辑的场景。

• 缺点: 代码稍显冗长。

 for...of 循环

ES6 引入的简洁的遍历数组元素的方式。

const array = [1, 2, 3, 4, 5];

for (const value of array) {
    console.log(value);
}

• 优点: 语法简洁，专注于数组元素本身，不需要手动处理索引。

• 缺点: 无法直接访问元素的索引。

forEach 方法

数组的内置方法，用于遍历数组中的每个元素。

const array = [1, 2, 3, 4, 5];

array.forEach((value, index) => {
    console.log(`Index: ${index}, Value: ${value}`);
});

• 优点: 简洁易用，支持回调函数的方式，可直接访问索引和元素。

• 缺点: 无法使用 break 或 continue 中断循环。

 map 方法

用于遍历数组并返回一个新的数组，通常用于转换数据。

const array = [1, 2, 3, 4, 5];
const newArray = array.map(value => value * 2);

console.log(newArray); // [2, 4, 6, 8, 10]

• 优点: 可在遍历的同时对数据进行转换并返回新数组。

• 缺点: 如果不需要返回新数组，仅用于遍历则不合适。

 filter 方法

用于遍历数组并基于某些条件过滤数组，返回一个新的数组。

const array = [1, 2, 3, 4, 5];
const filteredArray = array.filter(value => value > 2);

console.log(filteredArray); // [3, 4, 5]

• 优点: 在遍历时过滤掉不符合条件的元素，返回新数组。

• 缺点: 同样，如果不需要过滤，仅用于遍历则不合适。

reduce 方法

用于遍历数组并累积计算，通常用于求和、求积或其他累积操作。

const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, value) => accumulator + value, 0);

console.log(sum); // 15

• 优点: 强大且灵活，适用于复杂的累积操作。

• 缺点: 初学者可能不容易理解，需要注意初始值的设置。

every 和 some 方法

这两个方法遍历数组并检查数组中的元素是否符合某个条件。

• every: 如果数组中每个元素都符合条件，则返回 true。

• some: 如果数组中至少一个元素符合条件，则返回 true。

const array = [1, 2, 3, 4, 5];

const allGreaterThanZero = array.every(value => value > 0);
console.log(allGreaterThanZero); // true

const someGreaterThanThree = array.some(value => value > 3);
console.log(someGreaterThanThree); // true

• 优点: 直接返回布尔值，适合进行条件检查。

• 缺点: 不适用于需要处理数组中每个元素的场景。

for...in 循环

尽管 for...in 主要用于遍历对象的属性，但在特殊情况下也可以用于遍历数组的索引。

const array = [1, 2, 3, 4, 5];

for (const index in array) {
    console.log(`Index: ${index}, Value: ${array[index]}`);
}

• 优点: 可用于遍历对象和数组。

• 缺点: 在遍历数组时会遍历所有可枚举属性，包括继承的属性，不建议在数组遍历中使用。

总结

不同的循环方式适用于不同的场景。对于简单的遍历，for、for...of 和 forEach 是常见的选择；如果需要转换或过滤数组，map 和 filter 是不错的工具；reduce 则用于更复杂的累积操作