JavaScript内置对象 - Array数组几种循环方式

在JavaScript中，有几种方法可以循环遍历数组。以下是其中一些常见的方法：

一、循环方法

1.1、for循环

这是最基本的循环方式，可以使用它来遍历数组。

示例：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// 通过for循环获取所有元素
for(let i = 0; i < numbers.length; i++){
    console.log("索引：" + i, "值：" + numbers[i]);
}

输出结果如下：

索引：0 值：2
索引：1 值：50
索引：2 值：150
索引：3 值：30
索引：4 值：65
索引：5 值：90
索引：6 值：7
索引：7 值：90
索引：8 值：16
索引：9 值：19
索引：10 值：23
索引：11 值：200

1.2、for...in循环

在Javascript中，for...in循环用于遍历对象的可枚举属性，也可以遍历数组，示例如下：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// 通过for...in获取所有元素
for(let i in numbers){
    console.log("索引：" + i, "值：" + numbers[i]);
}

输出结果如下：

索引：0 值：2
索引：1 值：50
索引：2 值：150
索引：3 值：30
索引：4 值：65
索引：5 值：90
索引：6 值：7
索引：7 值：90
索引：8 值：16
索引：9 值：19
索引：10 值：23
索引：11 值：200

1.3、for...of循环

这是ES6引入的一种新的遍历数组的方法，它可以使你在遍历数组时，更加方便的访问数组元素的值，而不是数组的索引。
示例：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// 通过for ... of循环获取
for(let val of numbers){
    console.log("值：" + val)
}

输出结果：

值：2
值：50
值：150
值：30
值：65
值：90
值：7
值：90
值：16
值：19
值：23
值：200

1.4、for...in与for...of的区别

for...in 可以遍历数组，也可以遍历对象
for...of 可以遍历数组，如果要遍历对象，需要通过iterator迭代器

for ... in 遍历数组和对象，示例如下：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
const fruits = {id: 1, name: "Orange"};

// 通过for...in获取所有元素
for(let i in numbers){
    console.log("索引：" + i, "值：" + numbers[i]);
}

// 通过for...in获取对象中元素
for(let key in fruits){
    console.log("键：" + key, "值：" + fruits[key]);
}

输出结果如下：

// for...in输出数组中的元素

索引：0 值：2
索引：1 值：50
索引：2 值：150
索引：3 值：30
索引：4 值：65
索引：5 值：90
索引：6 值：7
索引：7 值：90
索引：8 值：16
索引：9 值：19
索引：10 值：23
索引：11 值：200

// fon...in输出对象中的元素
键：id 值：1
键：name 值：Orange

for...of遍历数组和对象示例：

const fruits = {id: 1, name: "Orange"};
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// for...of遍历数组中元素
for(let value of numbers){
    console.log("值：" + value);
}

// 获取fruits的迭代器实例对象
const fruitsIterator = Object.entries(fruits);
// for...of遍历对象中元素
for(let value of fruitsIterator){
    console.log(value);
}

输出结果如下：

// for...of输出数组中的元素
值：2
值：50
值：150
值：30
值：65
值：90
值：7
值：90
值：16
值：19
值：23
值：200

// for...of通过迭代器输出对象中元素
[ 'id', 1 ]
[ 'name', 'Orange' ]

1.5、forEach()方法循环

Array.prototype.forEach方法用于调用数组的每个元素，并将元素传递给回调函数。

示例：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// 通过forEach()方法获取所有元素
numbers.forEach((item, index) => {
    console.log("值：" + item, " 索引：" + index);
});

输出结果如下：

值：2 索引：0
值：50 索引：1
值：150 索引：2
值：30 索引：3
值：65 索引：4
值：90 索引：5
值：7 索引：6
值：90 索引：7
值：16 索引：8
值：19 索引：9
值：23 索引：10
值：200 索引：11

二、有结果的循环方法

2.1、map()方法循环

Array.prototype.map方法创建一个新数组，其结果是该数组中的每个元素都调用一个函数后的返回值。

此方法适用于获取数组数据，需要将数组中元素重新过滤处理时使用。

示例：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// 将数组中所有元乘以2
const newArray = numbers.map(item => item * 2);

console.log("原数组：", numbers);
console.log("新数组：", newArray);

输出结果如下：

原数组： [ 2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200 ]

新数组： [ 4, 100, 300, 60, 130, 180, 14, 180, 32, 38, 46, 400 ]

2.2、filter()方法循环

Array.prototype.filter方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

此方法适用于需要将获取的数组结果，进行过滤筛选出可用元素并返回新数组时使用。

示例：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// 筛选出所有偶数值
const newArray = numbers.filter(item => item%2==0);

console.log("原数组：", numbers);
console.log("新数组：", newArray);

输出结果如下：

原数组： [ 2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200 ]

新数组： [ 2, 50, 150, 30, 90, 90, 16, 200 ]

2.3、reduce()方法循环

Array.prototype.reduce方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

此循环方法多用于求和时使用。

示例：

const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];

// 求和（将数组中所有元素累加结果）
const total = numbers.reduce((total, value) => total + value, 0);

console.log("值：", total);

输出结果如下：

值： 742