

在 JavaScript 中循环迭代数组的方法有很多种。抽时间简单的归纳一下,我们先从经典的方法开始,然后转向新标准提供的方法。
while 循序语句
while 语句只要指定的条件求值为 true
,就会一直执行它的语句块。
// 语法 while (condition) statement
条件检测 condition
会在每次 statement
执行之前发生。如果条件返回为真, statement
会被执行并紧接着再次测试条件。如果条件返回为假,执行将停止并把控制权交回给 while
后面的语句。
示例
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循环是很相似的。
// 语法 for ([initialExpression]; [condition]; [incrementExpression]) statement
当一个for循环执行的时候,会发生以下事件:
- 如果有初始化表达式
initialExpression
,它将被执行。这个表达式通常会初始化一个或多个循环计数器,但语法上是允许一个任意复杂度的表达式的。这个表达式也可以声明变量。 - 计算
condition
表达式的值。如果condition
的值是true
,循环中的statement
会被执行。如果condition
的值是false
,for
循环终止。如果condition
表达式整个都被省略掉了,condition
的值会被认为是true
。 - 循环中的
statement
被执行。如果需要执行多条语句,可以使用块({ ... })
来包裹这些语句。 - 如果有更新表达式
incrementExpression
,执行它,然后流程回到步骤2。
示例
const array = [1,2,3,4,5,6]; for (let index = 0; index < array.length, index++) { console.log(array[index]); }
forEach() 方法
forEach() 方法用数组中的每个元素调用一次提供的回调函数。
// 语法 array.forEach(callback(currentValue, index, array){ //do something }, this) array.forEach(callback[, thisArg])
forEach 方法按升序为数组中含有效值的每一项执行一次 callback
函数,那些已删除(使用delete方法等情况)或者未初始化的项将被跳过(但不包括那些值为 undefined 的项)(例如在稀疏数组上)。forEach() 为每个数组元素执行callback函数;不像 map()
或者 reduce()
,它总是返回 undefined
值,并且不可链式调用。
示例
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() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
// 语法 let array = arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, thisArg])
map() 会返回一个新数组,每个元素都是回调函数的结果。map 不修改调用它的原数组本身。
示例
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() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数,将其减少为单个值。
// 语法 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 。
示例
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() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
// 语法 var new_array = arr.filter(callback[, thisArg])
filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过,不会被包含在新数组中。
示例
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() 方法测试数组的所有元素是否都通过了指定函数的测试。
// 语法 arr.every(callback[, thisArg])
every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。
示例
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() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
// 语法 arr.some(callback[, thisArg])
some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。
示例
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 中循环迭代数组的一下语句和方法,具体方法的信息请查阅相关文档。
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂