In JavaScript, there are several ways to loop through an array. Here are some common methods:
1. Loop method
1.1. for loop
This is the most basic form of looping and can be used to iterate over an array.
Example:
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]);
}The output is as follows:
Index: 0 Value: 2
Index: 1 Value: 50
Index: 2 Value: 150
Index: 3 Value: 30 Index:
4 Value: 65 Index:
5 Value: 90 Index
: 6 Value: 7
Index: 7 Value: 90
Index: 8 Value: 16
Index: 9 Value: 19
Index: 10 Value: 23
Index: 11 Value: 200
1.2. for...in loop
In Javascript, the for...in loop is used to traverse the enumerable properties of an object or an array. The example is as follows:
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]);
}
The output is as follows:
Index: 0 Value: 2
Index: 1 Value: 50
Index: 2 Value: 150
Index: 3 Value: 30 Index:
4 Value: 65 Index:
5 Value: 90 Index
: 6 Value: 7
Index: 7 Value: 90
Index: 8 Value: 16
Index: 9 Value: 19
Index: 10 Value: 23
Index: 11 Value: 200
1.3. for...of loop
This is a new method of traversing arrays introduced in ES6. It allows you to more conveniently access the values of array elements instead of the index of the array when traversing the array.
Example:
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 通过for ... of循环获取
for(let val of numbers){
console.log("值：" + val)
}Output result:
Value: 2
Value: 50
Value: 150
Value: 30
Value: 65 Value:
90
Value: 7
Value: 90
Value: 16
Value: 19
Value: 23
Value: 200
1.4. The difference between for...in and for...of
- for...in can traverse arrays or objects
- for...of can traverse the array. If you want to traverse the object, you need to use iterator.
for ... in traverses arrays and objects, examples are as follows:
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]);
}The output is as follows:
// for...in outputs the elements in the array
Index: 0 Value: 2
Index: 1 Value: 50
Index: 2 Value: 150
Index: 3 Value: 30 Index:
4 Value: 65 Index:
5 Value: 90 Index
: 6 Value: 7
Index: 7 Value: 90
Index: 8 Value: 16
Index: 9 Value: 19
Index: 10 Value: 23
Index: 11 Value: 200// fon...in elements in the output object
Key: id Value: 1
Key: name Value: Orange
for...of traverses arrays and objects example:
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);
}The output is as follows:
// for...of outputs the elements in the array
value: 2
value: 50
value: 150
value: 30
value: 65
value: 90
value: 7
value: 90
value: 16
value: 19
value: 23
value: 200// for...of outputs the elements in the object through the iterator
[ 'id', 1 ]
[ 'name', 'Orange' ]
1.5. forEach() method loop
The Array.prototype.forEach method is used to call each element of the array and pass the element to the callback function.
Example:
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 通过forEach()方法获取所有元素
numbers.forEach((item, index) => {
console.log("值：" + item, " 索引：" + index);
});The output is as follows:
Value: 2 Index: 0
Value: 50 Index: 1
Value: 150 Index: 2
Value: 30 Index: 3
Value: 65 Index: 4
Value: 90 Index: 5
Value: 7 Index: 6
Value: 90 Index: 7
Value: 16 Index: 8
Value: 19 Index: 9
Value: 23 Index: 10
Value: 200 Index: 11
2. The circular method with results
2.1. Map() method loop
The Array.prototype.map method creates a new array whose result is the return value of a function called on each element in the array.
This method is suitable for obtaining array data and is used when the elements in the array need to be re-filtered.
Example:
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);The output is as follows:
Original array: [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200]
New array: [4, 100, 300, 60, 130, 180, 14, 180, 32, 38, 46, 400]
2.2. filter() method loop
The Array.prototype.filter method creates a new array containing all elements of the test implemented by the provided function.
This method is suitable for use when you need to filter the obtained array results to select available elements and return a new array.
Example:
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);The output is as follows:
Original array: [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200]
New array: [2, 50, 150, 30, 90, 90, 16, 200]
2.3. reduce() method loop
The Array.prototype.reduce method applies a function to the accumulator and each element in the array (from left to right), reducing it to a single value.
This loop method is mostly used for summing.
Example:
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);The output is as follows:
Value: 742