JavaScript 中循环迭代数组的方法比较及使用方法汇总

在 JavaScript 中循环迭代数组的方法有很多种。抽时间简单的归纳一下，我们先从经典的方法开始，然后转向新标准提供的方法。

while 循序语句

while 语句只要指定的条件求值为 true ，就会一直执行它的语句块。

JavaScript 代码:

1. // 语法

2. while(condition)

3. statement

条件检测 condition 会在每次 statement 执行之前发生。如果条件返回为真， statement 会被执行并紧接着再次测试条件。如果条件返回为假，执行将停止并把控制权交回给 while 后面的语句。

示例

JavaScript 代码:

let index = 0;
const array = [1,2,3,4,5,6];
while(index < array.length) {
  console.log(array[index]);
  index++;
}

for 循序语句

for 循序语句可以说是 JavaScript 中最经典的循序语句了。for 循环会一直重复执行，直到指定的循环条件为fasle。 JavaScript的for循环和Java与C的for循环是很相似的。

JavaScript 代码:

1. // 语法

2. for([initialExpression]; [condition]; [incrementExpression])

3. statement

当一个for循环执行的时候，会发生以下事件：

1. 如果有初始化表达式 initialExpression ，它将被执行。这个表达式通常会初始化一个或多个循环计数器，但语法上是允许一个任意复杂度的表达式的。这个表达式也可以声明变量。

2. 计算 condition 表达式的值。如果 condition 的值是 true，循环中的 statement 会被执行。如果 condition 的值是 false ，for 循环终止。如果 condition 表达式整个都被省略掉了，condition的值会被认为是 true 。

3. 循环中的 statement 被执行。如果需要执行多条语句，可以使用块 ({ ... }) 来包裹这些语句。

4. 如果有更新表达式 incrementExpression ，执行它，然后流程回到步骤2。

示例

JavaScript 代码:

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

forEach() 方法

forEach() 方法用数组中的每个元素调用一次提供的回调函数。

JavaScript 代码:

1. // 语法

2. array.forEach(callback(currentValue, index, array){

3. //do something

4. }, this)

6. array.forEach(callback[, thisArg])

forEach 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除（使用delete方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项）（例如在稀疏数组上）。forEach() 为每个数组元素执行callback函数；不像 map() 或者 reduce() ，它总是返回 undefined 值，并且不可链式调用。

示例

JavaScript 代码:

const array = [1,2,3,4,5,6];
array.forEach(function(current_value, index, array) {
  console.log(`At index ${index} in array ${array} the value is ${current_value}`);
});
// => undefined

ES6 中很多新的对象（如：Map ,Set , TypedArray 等）都有 forEach() 方法，实用起来类似，具体可以查阅相关资料。

map() 方法

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

JavaScript 代码:

1. // 语法

2. let array = arr.map(function callback(currentValue, index, array) {

3. // Return element for new_array

4. }[, thisArg])

map() 会返回一个新数组，每个元素都是回调函数的结果。map 不修改调用它的原数组本身。

示例

JavaScript 代码:

const array = [1,2,3,4,5,6];
const square = x => Math.pow(x, 2);
const squares = array.map(square);
console.log(`Original array: ${array}`);
console.log(`Squared array: ${squares}`);

reduce() 方法

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

JavaScript 代码:

1. // 语法

2. array.reduce(function callback(accumulator, currentValue, currentIndex, array)[, initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

• accumulator 初始值（或者上一次回调函数的返回值）

• currentValue 当前元素值

• currentIndex 当前索引

• array 调用 reduce 的数组。

回调函数第一次执行时，accumulator 和 currentValue 的取值有两种情况：调用 reduce 时提供 initialValue ，accumulator 取值为 initialValue ，currentValue 取数组中的第一个值；没有提供 initialValue ，accumulator 取数组中的第一个值，currentValue 取数组中的第二个值。

注意: 不提供 initialValue ，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。提供 initialValue ，从索引0开始。如果数组为空并且没有提供initialValue， 会抛出TypeError 。

示例

JavaScript 代码:

const array = [1,2,3,4,5,6];
const sum = (x, y) => x + y;
const array_sum = array.reduce(sum, 0);
console.log(`The sum of array: ${array} is ${array_sum}`);

filter() 方法

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

JavaScript 代码:

1. // 语法

2. var new_array = arr.filter(callback[, thisArg])

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

示例

JavaScript 代码:

const array = [1,2,3,4,5,6];
const even = x => x % 2=== 0;
const even_array = array.filter(even);
console.log(`Even numbers in array ${array}: ${even_array}`);

every() 方法

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

JavaScript 代码:

1. // 语法

2. arr.every(callback[, thisArg])

every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

示例

JavaScript 代码:

const array = [1,2,3,4,5,6];
const under_seven = x => x < 7;
if(array.every(under_seven)) {
  console.log('Every element in the array is less than 7');
} else{
  console.log('At least one element in the array was bigger than 7');
}

some() 方法

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

JavaScript 代码:

1. // 语法

2. arr.some(callback[, thisArg])

some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。

示例

JavaScript 代码:

const array = [1,2,3,9,5,6,4];
const over_seven = x => x > 7;
if(array.some(over_seven)) {
  console.log('At least one element bigger than 7 was found');
} else{
  console.log('No element bigger than 7 was found');
}

小结

这篇文章只是简单的归纳 JavaScript 中循环迭代数组的一下语句和方法，具体方法的信息请查阅相关文档。