数组遍历的方法

1、forEach ( )

forEach() 方法对数组的每个元素执行一次给定的函数,不会改变原数组,没有返回值。

数组中的每个值都会调用回调函数,回调函数有三个参数:

  • currentValue: 必需。当前元素。
  • index: 可选。当前元素的索引值。
  • arr: 可选。当前元素所属的数组对象。
  // forEach 不会改变原数组 没有返回值
      let arr = [1, 2, 3, 4, 5];
      arr.forEach((el) => {
        console.log(el);
      });

2、map ( )

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成,不会改变新数组,有返回值,返回值为符合条件的元素构成的新数组,该方法不会对空数组进行检测。

该方法的第一个参数为回调函数有三个参数:

  • currentValue: 必需。当前元素。
  • index: 可选。当前元素的索引值。
  • arr: 可选。当前元素所属的数组对象。
    // map 不会改变原数组 有返回值
      let arr = [1, 2, 3, 4, 5];
      var result = arr.map((el) => {
        return el * 2;
      });
      console.log(result); // 输出结果为:[2, 4, 6, 8, 10]

3、filter ( )

filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素,不会改变原数组,有返回值,返回值为符合条件的元素构成的新数组。它的参数是一个回调函数,所有数组元素依次执行该函数,返回结果为true的元素会被返回。

该方法的第一个参数为回调函数有三个参数:

  • currentValue: 必需。当前元素。
  • index: 可选。当前元素的索引值。
  • arr: 可选。当前元素所属的数组对象。
      // filter 不会改变原数组 有返回值
      let arr = [1, 2, 3, 4, 5];
      var result = arr.filter((el) => {
        return el > 2;
      });
      console.log(result); // 输出结果为: [3, 4, 5]

4、for...of

for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句,不会改变原数组,有返回值。

语法:

for (variable of iterable) {
  statement
}

其中,有两个参数:

  • variable:每个迭代的属性值被分配给该变量。
  • iterable:一个具有可枚举属性并且可以迭代的对象。
复制代码
      //   for...of 不会改变原数组,有返回值
      let arr = [1, 2, 3, 4, 5];
      function test() {
        for (let el of arr) {
          el = el + 1;
          console.log(el);   // 输出结果为: 2 3 4 5 6
        }
      }
      test();
复制代码

5、every ( )

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值,不会改变原数组。该方法会对数组中的每一项进行遍历,只有所有元素都符合条件时,才返回true,否则就返回false。

 // every 不会改变原数组 返回值为 Boolean 类型
      let arr = [1, 2, 3, 4, 5];
      let result = arr.every((el) => el > 3);
      console.log(result); // 输出结果为为:false

6、some ( )

some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。它不会修改数组。

// some 不会改变原数组 返回值为 Boolean 类型
      let arr = [1, 2, 3, 4, 5];
      let result = arr.some((el) => el > 3);
      console.log(result); // 输出结果为:true

7、find ( )

find() 方法返回数组中满足提供的测试函数的第一个元素的值,返回符合条件的元素,之后的值不会再调用执行函数,否则返回undefined。不会改变原数组,而且对于空数组,函数是不会执行的。

该方法的第一个参数也是一个函数,它有三个参数:

  • currentValue :必需。当前元素。
  • index :可选。当前元素的索引。
  • arr :可选。当前元素所属的数组对象。
 // find 不会改变原数组 有返回值
      let arr = [1, 2, 3, 4, 5];
      let result = arr.find((el) => el > 4);
      console.log(result); // 输出结果为:5
let result2 = arr.find((el) => el > 9); console.log(result2); // 输出结果为:undefined

8、findIndex ( )

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引,若没有找到对应元素则返回 -1。不会改变原数组,而且对于空数组,函数是不会执行的。

该方法的第一个参数也是一个函数,它有三个参数:

  • currentValue :必需。当前元素。
  • index :可选。当前元素的索引。
  • arr :可选。当前元素所属的数组对象。
// findIndex 不会改变原数组 有返回值
      let arr = [1, 2, 3, 4, 5];
      let result = arr.findIndex((el) => el > 2);
      console.log(result); // 输出结果为:2
      let result2 = arr.findIndex((el) => el > 6);
      console.log(result2); // 输出结果为:-1

 

posted @   Wanker  阅读(165)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示