遍历数组的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

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

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

JavaScript历数有多种方法。其中常用的方法包括forEach、map、for循环、for of、for in、filter和find。 1. 使用forEach方法进行历。forEach方法接受一个回调函数作为参数,该函数在历数的每个元素时被调用。可以使用item参数来访问当前历到的元素,使用index参数来访问元素的索引,使用self参数来访问数本身。例如: arr.forEach(function(item, index, self) { console.log(item); }); 这段代码会打印出数arr中的每个元素。 2. 使用map方法进行历和映射。map方法也接受一个回调函数作为参数,该函数在历数的每个元素时被调用,并返回一个新的数。可以使用item参数来访问当前历到的元素。例如: let newArr = arr.map(item => { return item * 2; }); 这段代码会将数arr中每个元素都乘以2,并将结果保存在新数newArr中。 3. 使用for循环进行历。可以使用临时变量将数的长度缓存起来,以避免重复获取数长度。例如: for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } 这段代码会按顺序历数arr中的每个元素,并打印出来。 4. 使用for of循环进行历。for of循环可以直接历数中的每个元素。例如: for (var item of arr) { console.log(item); } 这段代码会按顺序历数arr中的每个元素,并打印出来。 5. 使用for in循环进行历。for in循环历的是数的索引,而不是数的值。例如: for (var index in arr) { console.log(arr[index]); } 这段代码会按顺序历数arr中的每个元素,并打印出来。 6. 使用filter方法进行历和筛选。filter方法也接受一个回调函数作为参数,该函数在历数的每个元素时被调用,并返回一个满足某个条件的新数。例如: let newArr = arr.filter(item => { return item < 3; }); 这段代码会返回一个新数newArr,其中包含数arr中小于3的元素。 7. 使用find方法进行历。find方法也接受一个回调函数作为参数,该函数在历数的每个元素时被调用,直到找到满足某个条件的元素为止。例如: let result = arr.find(item => { return item === 3; }); 这段代码会返回数arr中第一个等于3的元素。 以上是JavaScript中常用的几种历数方法。根据实际需求选择合适的方法来进行历。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [JS历数的十五种方法](https://blog.youkuaiyun.com/weixin_39987434/article/details/130869691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值