简单实用,JavaScript 的 8 个数组遍历方法

开发 前端
在 JavaScript 中,有一些用于遍历数组的方法。经常的总结并记住它们,可以让我们的工作得心应手。

 引言

在 JavaScript 中,有一些用于遍历数组的方法。经常的总结并记住它们,可以让我们的工作得心应手。

 

[[331711]]

 

map

map() 数组的每个元素都会调用回调函数,并将处理结果返回一个新数组。

 

  1. const numbers = [1, 2, 3, 4]; 
  2. const foo = number => number + 10; 
  3. const newNumbers = numbers.map(foo); 
  4. console.log(`新数组:${newNumbers}`); 
  5. console.log(`旧数组:${numbers}`); 
  6. /* 
  7.  * 新数组:11,12,13,14 
  8.  * 旧数组:1,2,3,4 
  9. */ 

every

every() 方法使用指定函数检测数组中的所有元素是否满足条件,元素全部满足条件,方法返回 true ,有一个元素不满足条件,方法返回 false 且其余元素不再检测。

 

  1. const numbers = [1,2,3,4]; 
  2. const foo = num => num < 5; 
  3.  
  4. if (numbers.every(foo)) { 
  5.   console.log('数组中所有元素都小于 5'); // is ok 
  6. else { 
  7.   console.log('数组中至少有一个元素大于 5'); 

some

some() 方法使用指定函数检测数组中是否有元素满足条件,有一个元素满足条件,方法返回 true 且剩余的元素不会再执行检测,没有满足条件的元素,方法返回 false 。

 

  1. const numbers = [1,2,3,4]; 
  2. const foo = num => num > 3; 
  3.  
  4. if (numbers.some(foo)) { 
  5.   console.log('数组中至少有一个元素值大于 3'); // is ok  
  6. else { 
  7.   console.log('数组中没有大于 3 的元素值'); 

filter

filter() 方法通过一个函数,筛选数组中的元素。用符合条件的元素创建一个新数组。

 

  1. const numbers = [1,2,3,4]; 
  2. const foo = number => number > 2; 
  3. const newNumbers = numbers.filter(foo); 
  4. console.log(`原始数组 [${numbers}] 中,满足 > 2 的元素有 : ${newNumbers}`); 
  5. // 原始数组 [1,2,3,4] 中,满足 > 2 的元素有 : 3,4 

reduce

reduce() 方法接收一个函数累加器,数组中的每个元素 (从左到右) 应用于函数,最终计算出一个最终值。

 

  1. const numbers = [1, 2, 3, 4]; 
  2. const sum = (total, num) => total + num; 
  3. const numbers_sum = numbers.reduce(sum, 0); // 将 0 作为 reduce 的初始值 
  4. console.log(`原始数组 '${numbers}' 的元素累加后,最终值是 ${numbers_sum}`); 
  5. // 原始数组 [1,2,3,4] 的元素累加后,最终值是 10 

reduceRight() 和 reduce() 使用方法一样,区别是它从右到左将数组中的每个元素应用于函数。

for

传统的 for 循环遍历数组很常用。

 

  1. const numbers = [1, 2, 3, 4]; 
  2. for (let index = 0; index < numbers.length; index++) { 
  3.   console.log(numbers[index]); // 1 2 3 4 

forEach

forEach() 将数组的每个元素传入回调函数,且对空数组不会执行回调函数。

 

  1. const numbers = [1, 2, 3, 4]; 
  2. numbers.forEach((number, index, numbers) => { 
  3.   console.log(`下标 ${index} 在数组 ${numbers} 中的值是 ${number}`); 
  4. }); 
  5. /* 
  6.  * 下标 0 在数组 1,2,3,4 中的值是 1 
  7.  * 下标 1 在数组 1,2,3,4 中的值是 2 
  8.  * 下标 2 在数组 1,2,3,4 中的值是 3 
  9.  * 下标 3 在数组 1,2,3,4 中的值是 4 
  10. */ 

while

while 也可以遍历数组,但很少用。

 

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

 

责任编辑:华轩 来源: 今日头条
相关推荐

2019-07-25 10:08:05

JavaScript数组转换

2009-09-08 09:59:26

LINQ遍历多个数组

2023-05-04 23:54:02

JavaScrip代码技巧

2021-06-18 10:05:14

JavaScript数组遍历

2024-01-04 16:46:58

JavaScript开发

2021-06-15 10:01:27

JavaScript数组遍历Entries

2016-10-13 19:33:10

javascript数组indexOf

2022-08-16 10:53:56

JavaScript前端技巧

2010-09-28 14:35:34

DOM遍历

2016-12-27 10:19:42

JavaScriptindexOf

2021-09-22 23:17:09

Java开发数组

2009-11-17 15:00:19

PHP遍历数组

2010-01-12 16:30:21

VB.NET数据转换

2010-09-14 10:29:43

配置tftp服务器

2020-04-01 11:05:24

Spark数据倾斜Hadoop

2022-11-13 15:33:30

JavaScript数组开发

2024-01-31 12:13:02

JavaScriptSet元素

2009-09-08 10:37:57

C#遍历CheckBo

2017-03-20 14:45:42

JavaScript详解

2009-11-17 09:02:36

PHP数组赋值
点赞
收藏

51CTO技术栈公众号