遍历数组的12种方法

let arr = [ 'a', 'b', 'c', 'a' ]

1. indexOf()   遍历数组,返回元素在数组中第一次出现的下标

里面接收2个参数.参数1是要查找的元素,参数2是开始查找的下标

    let res =  arr.indexOf( 'a',1 ) 

    console.log(res)         // 3

分析: 查找字符串a在数组里第一次出现时的下标,从数组的下标1开始查找,第一次出现时为下标3.

2. forEach()  遍历数组获取每一个元素,没有返回值

参数为一个函数,函数的形参1代表数组元素,形参2代表元素下标

      arr.forEach(function( item, index){

        console.log(item,index)

        })

3. map()  遍历数组,返回一个新数组,数组由参数里的返回值组成.必须使用return.

参数为一个函数,函数的形参1代表数组元素,形参2代表元素下标

举例1:   

    let res = arr.map(function(item){

            return   item+"e"

     }) ;

     console.log(res)   ;    //[ 'ae', 'be', 'ce', 'ae' ]

举例2:   

     let res = arr.map(function(item, index){

            return   index

     }) ;

      console.log(res)  ;      //[0,1,2,3]

4. filter() 遍历数组,返回一个新数组:新数组由参数里,条件为true的元素组成.

参数为一个函数,函数的形参1代表数组元素,形参2代表元素下标

    let res = arr.filter(function(item, index){

                  return item.index >= 2

            });

     console.log(res)  ; // [ 'c' ,'a' ]

5. some()  遍历数组,判断数组元素有无符合函数参数里的条件,只要检测到有一个元素符合条件就返回ture,否则false.

参数为一个函数,函数的形参1代表数组元素,形参2代表元素下标

    let res = arr.some(function(item, index){

                  return index >= 2

            });

    console.log(res)  ; //   true

应用: 遍历购物车,判断商品id是否在购物车里存在,没有就加入id,有就增加数量

6. every()  遍历数组,判断数组元素是否全部符合函数参数里的条件,全部满足返回true,否则false.

参数为一个函数,函数的形参1代表数组元素,形参2代表元素下标

    let res = arr.every(function(item, index){

                  return index >= 2

            });

    console.log(res)  ;  //false

应用:全选功能,只要有一个没有被选中,就取消全选按钮的选中状态.

7. reduce() 遍历数组, 返回参数函数里的返回值.一般作为累加器计算总价

情况1.只有一个函数作为参数1时,函数的形参1表示上次返回的值,首次为数组的第一个元素,形参2代表剩余所有元素

    let arr=[1,4,7,2,9]

    let res = arr.reduce(function(pre, item){

                return pre+= item

            })

            console.log(res)  //23

 情况2.参数1是一个函数,参数2代表函数的形参1的值,此时函数的形参2就代表数组所有元素

        let arr=[1,4,7,2,9]   

        var res = arr.reduce(function(pre, item){

                return pre+= item

            }, 10)                           

            // 将firstItem的值设置为10,现在item不再代表剩余元素,而是表示所有数组元素

            console.log(res)         //33

 8.reduceRight()

形参1代表数组的倒数第一个元素,形参2代表剩余元素,遍历时逆向输出

    let arr=[1,4,7,2,9]

    let res = arr.reduceRight(function(tailender, item){

                console.log(item)

            })         // 2 7 4 1

    let arr=[1,4,7,2,9];let res =[]

    arr.reduceRight(function(tailender,item){

                res.push(item)

            },0)

            console.log(res)  //倒序输出数组

9. for  of  遍历数组元素值,不支持遍历普通对象

     for( let item of arr ){

                console.log(item)

            }      // 1 4 7 2 9

10. for  in  遍历数组的索引值/对象的键名,会遍历原型链的属性

     for( let index in arr ){

                console.log(index)

            }        // 0 1 2 3 4

 11.find()返回的是第一个符合条件的值

var ages = [3, 10, 18, 20];

let res = ages.find(function checkAdult(age) {

                return age >= 18

                })

console.log(res) //18

12.findIndex()返回的是第一个返回条件的值的索引值 

var ages = [3, 10, 18, 20];

let res = ages.findIndex(function checkAdult(age) {

                return age >= 18

                })

console.log(res) //2

————————————————

原文有误,本文仅作修正和补充
————————————————
版权声明:本文为CSDN博主「天生喜欢」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_64077152/article/details/121774424

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值