<万博manbetx平台> [回归基础] JavaScript 中循环迭代数组的方法比较及使用 – while、for、forEach()、map() 、reduce() 、filter()、every() 、some()-万博manbetx平台

[回归基础] JavaScript 中循环迭代数组的方法比较及使用 – while、for、forEach()、map() 、reduce() 、filter()、every() 、some()

10年服务1亿前端开发工程师

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

  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) 打赏
未经允许不得转载:万博manbetx平台 » [回归基础] JavaScript 中循环迭代数组的方法比较及使用 – while、for、forEach()、map() 、reduce() 、filter()、every() 、some()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏