一篇文章带你了解JavaScript 数组迭代方法

开发 前端
在数组中的每个元素上一次操作的方法,称为迭代方法。数组的迭代方法与循环紧密相关。

[[348668]]

在数组中的每个元素上一次操作的方法,称为迭代方法。数组的迭代方法与循环紧密相关。

一、方法

1. Array.forEach()

forEach()方法对数组的每个元素执行一次提供的函数(一个回调函数)。可以使用[forEach()将数组中的每个元素打印到文档。

例1:

  1. var fruits = ["Apple""Mango""Banana""Orange"]; 
  2.      var result = document.getElementById("result"); 
  3.  
  4.      fruits.forEach(function(element, index, array) { 
  5.         result.innerHTML += index + ": " + element + "<br>"
  6. }); 

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

例 2 :

由于2个参数(索引,数组)是可选的。

  1. var fruits = ["Apple""Mango""Banana""Orange"]; 
  2.             var result = document.getElementById("result"); 
  3.  
  4.             fruits.forEach(function(element) { 
  5.                 result.innerHTML += element + "<br>"
  6.             }); 

 

2. Array.map()

map()方法返回一个新数组,不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值,并按照原始数组元素顺序依次处理元素。

注意:

map() 不会对空数组进行检测。

例1:从每个值乘以2的元素创建一个新数组。

  1. <script> 
  2.             function myFunc() { 
  3.                 var nums1 = [1, 5, 20, 14, 55, 16]; 
  4.                 var nums2 = nums1.map(twice); 
  5.                 document.getElementById("result").innerHTML = nums2; 
  6.             } 
  7.  
  8.             function twice(element, index, array) { 
  9.                 return (element * 2); 
  10.             } 
  11. </script> 

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

例2:

由于2个参数(索引,数组)是可选的:

var nums1 = [1, 5, 20, 14, 55, 16]; var nums2 = nums1.map(twice); function twice(element) { return (element * 2); }

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

3. Array.filter()

filter()是JavaScript中Array的常用操作,用于把Array的某些元素过滤掉,然后返回剩下的元素。其主要原理是 filter会把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素。

例:使用值等于或大于18的元素创建一个新数组。

  1. var age = [1, 30, 39, 29, 10, 13]; 
  2.      var val = age.filter(isAdult); 
  3.  
  4.      function isAdult(element, index, array) { 
  5.            return element >= 18; 

由于2个参数(索引,数组)是可选的,因此例:可以跳过它们:

例:

  1. var age = [1, 30, 39, 29, 10, 13]; 
  2.     var val = age.filter(isAdult); 
  3.  
  4.     function isAdult(element) { 
  5.         return element >= 18; 

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

4. Array.reduce()

reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

这在数字中很常见,例如找到数组中所有数字的总和。

例:

  1. var nums = [10, 20, 30, 40, 50]; 
  2.     var sum = nums.reduce(getTotal); 
  3.  
  4.     function getTotal(x, y) { 
  5.        return (x + y); 
  6.     } 

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

5. Array.find()

find()方法返回通过给定检测的数组中的第一个值。

将找到等于或大于18的第一个元素:

例:

  1. var num = [1, 30, 39, 29, 10, 13]; 
  2.     var val = num.find(myFunc); 
  3.  
  4.     function myFunc(element) { 
  5.        return element >= 18; 
  6.     } 

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

6. Array.findIndex()

findIndex()方法返回通过给定检测的数组中的第一个索引值。

例:将找到等于或大于18的第一个元素的索引值。

  1. var num = [1, 30, 39, 29, 10, 13]; 
  2.     var val = num.findIndex(myFunc); 
  3.  
  4.     function myFunc(element) { 
  5.         return element >= 18; 
  6.     } 

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

7. Array.every()

every()方法用于检测数组所有元素是否都符合指定条件(通过函数提供检测)。

例:检查所有数组值是否等于或大于18。

  1. var nums = [1, 30, 39, 29, 10, 13]; 
  2.     var bool = nums.every(function (element) { 
  3.         return element >= 18; 
  4.     }); 
  5.  
  6.     document.getElementById("result").innerHTML = bool; 

 

注:

该函数带有3个参数:元素值(必填),元素索引(可选),数组本身(可选)。

二、总结

本文基于JavaScript基础,介绍了 数组7种迭代方法。每一种都采用案例加运行效果图展示的方式,让读者能够更容易理解。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

 

代码很简单,希望对你学习有帮助。

本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

 

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2023-09-01 16:32:36

JavaScript

2023-06-06 15:45:40

JavaScript数组

2021-01-08 09:03:01

JavaScript 数组数据

2021-01-29 18:41:16

JavaScript函数语法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2020-11-10 10:48:10

JavaScript属性对象

2023-09-06 14:57:46

JavaScript编程语言

2021-05-18 08:30:42

JavaScript 前端JavaScript时

2023-07-30 15:18:54

JavaScript属性

2021-01-26 23:46:32

JavaScript数据结构前端

2021-03-05 18:04:15

JavaScript循环代码

2021-03-09 14:04:01

JavaScriptCookie数据

2024-01-30 13:47:45

2021-06-24 09:05:08

JavaScript日期前端

2020-11-20 08:53:35

JavaScript

2023-10-10 15:29:36

JavaScript开发

2021-03-21 07:36:43

Python迭代知识语言

2021-05-07 14:17:01

JavaScript元素网页

2021-11-26 11:10:07

JavaScript 节点导航
点赞
收藏

51CTO技术栈公众号