[回归基础] JavaScript 中循环迭代数组

[回归基础] JavaScript 中循环迭代数组

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

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循环执行的时候,会发生以下事件:

  1. 如果有初始化表达式 initialExpression ,它将被执行。这个表达式通常会初始化一个或多个循环计数器,但语法上是允许一个任意复杂度的表达式的。这个表达式也可以声明变量。
  2. 计算 condition 表达式的值。如果 condition 的值是 true,循环中的 statement 会被执行。如果 condition 的值是 falsefor 循环终止。如果 condition 表达式整个都被省略掉了,condition 的值会被认为是 true
  3. 循环中的 statement 被执行。如果需要执行多条语句,可以使用块 ({ ... }) 来包裹这些语句。
  4. 如果有更新表达式 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 的数组。

回调函数第一次执行时,accumulatorcurrentValue 的取值有两种情况:调用 reduce 时提供 initialValueaccumulator 取值为 initialValuecurrentValue 取数组中的第一个值;没有提供 initialValueaccumulator 取数组中的第一个值,currentValue 取数组中的第二个值。

注意: 不提供 initialValuereduce 会从索引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 中循环迭代数组的一下语句和方法,具体方法的信息请查阅相关文档。

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到