JS循环遍历数组的九个常用方法

404 阅读3分钟

1. forEach

这个方法是为了取代for循环遍历数组的,返回值为undefined
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

例如

    let item = [21, 2, 15, 9, 40, 5, 7, 99];
    item.forEach((item,index,arr)=>{
        console.log(item);  
        console.log(index);
        console.log(arr); 
     })

其中:

  • item代表遍历的每一项
  • index代表遍历的每项的索引
  • arr代表数组本身

2. filter

接收函数 函数返回布尔值 过滤数组 遍历找到符合条件的 也就是return为true

    let item = [21, 2, 15, 9, 40, 5, 7, 99];
    let newArr= item.filter((item,index,arr)=>{
        //返回数组每项值大于9的数组
        return item > 9
    })
    console.log(newArr);  //  [21, 15, 40, 99]

3. map

map方法主要对数组的复杂逻辑处理时用的多,特别是react中遍历数据,也经常用到,写法和forEach类似
支持return返回值,把每一次循环return返回的值组成一个新的数组,对原数组没有影响

    // 在实际中,我们可以利用map方法方便获得数组对象中的特定属性值
    let users = [
        {"name": "张小花", "email": "zhang@qq.com"},
        {"name": "body", "email": "body@qq.com"},
        {"name": "李小璐", "email": "li@qq.com"}
    ];
    let newEmail = users.map(function (item) {
        return item.name;
    });
    console.log(newEmail.join(',')); // 张小花,body,李小璐
    
    //第2种获取数组对象中的值
    let emails = [];
    users.map(function (item){
        emails.push(item.email);
    });
    console.log(emails); // ["zhang@qq.com", "body@qq.com", "li@qq.com"]

4. some

some方法用于只要数组中至少存在一个满足条件的结果 返回值就是true 否则返回false
接收函数 返回boolean

         let item = [21, 2, 15, 9, 40, 5, 7, 99];
         let someArr= item.some((item,index,arr)=>{
            return item>100
         })
         console.log(someArr);  // false

5. every

every方法用于数组中的每一项都得满足条件时,返回值就是true 否则返回false 接收函数 返回boolean

        let item = [21, 2, 15, 9, 40, 5, 7, 99];
        let everyArr= item.every((item,index,arr)=>{
             return item>1
          })
        console.log(everyArr);  // true

6. includes

includes() 方法用于判断字符串是否包含指定的子字符串。

如果找到匹配的字符串则返回 true,否则返回 false。

接收函数 返回boolean

注意:  includes() 方法区分大小写。

     var arr = [10, 20, 30, 40, 50];
     let arr1 = arr.includes(10); //true
     let arr2 = arr.includes(50, 2); //false
     console.log(arr1,arr2);
     array.includes(element, start)
     //element 是必要参数,它是要搜索的元素。
     //start 是一个可选的参数,默认值是0,在数组的哪个位置开始搜索。

7. findIndex

接收函数 适用于复杂数据类型 最终返回数值(下标),数据返回第一个符合条件的下标 不符合的返回-1
注意:  findIndex() 对于空数组,函数是不会执行的。

注意:  findIndex() 并没有改变数组的原始值。

         
         /*对象,取出满足要求的下标*/
         const nameArr = [
           { id: 1, userName: "zhaoqian", age: 16 },
           { id: 2, userName: "sunli", age: 18 },
           { id: 3, userName: "zhouwu", age: 26 },
           { id: 4, userName: "zhengwang", age: 18 },
         ];
         /*满足条件,返回下标位置2*/
         var i1 = nameArr.findIndex((value) => value.age == 26);
         console.log(i1);
         /*没有满足条件的,返回-1*/
         var i2 = nameArr.findIndex((value) => value.id == 168);
         console.log(i2);

8. indexOf

接收数值 返回数值(下标),符合条件返回下标 否则返回-1 适用于基础类型

        let indexList = [];
        let arr2 = ['a', 'b', 'a', 'c', 'a', 'd'];
        let element = 'a';
        let index = arr2.indexOf(element); /*满足条件,返回下标位置0*/
        let element1 = 'a1';
        let index1 = arr2.indexOf(element1); /*没有满足条件的,返回-1*/
        while (index !== -1) {
            indexList.push(index);
            index = arr2.indexOf(element, index + 1);
        }
        console.log(indexList);
        // [0, 2, 4]

9. find

接收函数 方法返回(内部)第一个符合条件的整条数据,没有符合的的直接返回undefined

注意:  find() 对于空数组,函数是不会执行的。

注意:  find() 并没有改变数组的原始值。

      var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        let newArr= arr.find((item) => {
          // find() 方法为数组中的每个元素都调用一次函数执行:
          // 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
          // 如果没有符合条件的元素返回 undefined
          return item > 3;
        });

        // 输出结果
        console.log(newArr); // 4