总结js数组遍历的多种方法以及findIndex和includes的使用方法和场景

for循环遍历

使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果比较明显。

for(let i = 0;i < arr.length;i++) {
            
        }

map遍历

  1. map特点 :循环执行次数等于数组长度,返回数组长度等于原数组长度。回调函数需要return : 新数组隐射之后的元素
  2. map场景 : 以某种规则来隐射数组,例如:数组中每一个元素 * 0.5 数组中每一个元素 +1
 let arr = [80, 90, 100, 20, 30, 66];
        let newArr = arr.map((item, index) => {
            // console.log(item);
            // return item * 0.5;
            return item + 1;
        });

        console.log(newArr);

filter遍历

  1. filter特点 :循环执行次数等于数组长度,返回数组长度 != 原数组长度,回调函数 return true : 符合规则,添加到新数组中 return false : 不符合规则,不添加到新数组
  2. filter场景 :以某种规则 过滤 数组(找出符合条件的元素) 例如: 找出数组的奇数,找出数组的负数
let arr = [18, 20, 35, 66, 87, 90, -100, -20];
        //1.找出数组的正数
        let arr1 = arr.filter((item, index) => {
            return item >= 0;
            // if(item >= 0 ){
            //     return true;
            // }else{
            //     return false;
            // };
        });
        //2.简写
        let arr2 = arr.filter(item => item >= 0);
        console.log(arr1);

forEach遍历

  1. forEach特点 :循环执行次数等于数组长度,无返回值,回调函数不需要return
  2. forEach场景 : 相当于for循环的另一种写法
let arr = [18, 20, 35, 66, 87, 90, -100, -20];
         let res = arr.forEach((item,index)=>{
             console.log(item);
         });
         console.log(res);//undefined

some遍历

  1. some特点:循环执行次数 != 数组长度,返回的布尔值若是true:找到符合条件元素,返回的布尔值为false:未找到。回调函数若是return true循环结束,且some函数的返回值也会true。回调函数return false循环继续,直到遍历完所有元素还没有找到此时就会无条件返回false
  2. some场景 : 找出数组中是否有符合条件的元素,例如:判断数组有没有负数,判断数组有没有未成年
let arr = [18, 20, 35, -66, 87, 90];
        let res = arr.some((item, index) => {
            return item < 0;
        });
        console.log(res);

every遍历

  1. every特点 :循环执行次数 != 数组长度,返回布尔值,回调函数若是 return true,循环继续,直到遍历完所有元素还是true,此时every返回true,若是return false,循环结束,且every函数返回值也是false
  2. every场景 :找出数组中是否 所有元素 都符合条件,every作用与some类似,只是逻辑相反~,例如判断有没有负数
  3. 和some的区别:(1)some是找负数 true:有负数 false:没有负数 (2)every:判断数组是不是都是正数 true:都是(没有负数) false:不是全部正数(有负数)
let arr = [18, 20, 35, 66, 87, 90];

         let res = arr.every((item,index)=>{
            return item>0;
         });
         console.log(res);//true 都是正数,没负数   false 不都是正数 有负数

findIndex和includes

findIndex() : 找出数组中 第一个满足条件的元素位置(下标)

arr.findIndex((item,index)=>{
return true;//循环立即结束。findIndex方法返回值就是当前的index
return false;//循环继续。直到遍历完所有元素还是false,此时findIndex返回值是-1
})
//
例如需求:找出数组中第一个未成年人的位置
let arr = [
            {name:'张三',age:20},
            {name:'张三',age:18},
        ];
        let res = arr.findIndex((item,index)=>{
            return item.age<18;
            
        });

includes() : 判断数组/字符串中是否包含指定的值

  1. indexOf()跟这个非常非常类似,作用一样
  2. indexOf()区别:返回的元素下标 -1:不存在 不是-1:存在
  3. includes()区别: 返回布尔值 true:存在 false:不存在
includes() : 判断数组/字符串中是否包含执行的值
        let arr1 = [10,20,30,40,50];
        let str = '草叶';

        if(str.indexOf('草叶') != -1){
            console.log(true);
        }else{
            console.log(false);   
        };

        console.log( str.includes('草叶') );//true
        console.log( arr1.includes(30) );//true
© 版权声明
THE END
喜欢就支持以下吧
点赞2
分享
评论 抢沙发