欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS遍历数组的几种方法

程序员文章站 2022-07-15 08:17:17
...

1.普遍的遍历方式

for(var i= 0;i<arr.length;i++){
    console.log("第一种遍历方式:"+arr[i]);
}

2.for…in两个形参,i为数组下标,arr为要遍历的数组

 for(var i in arr){
        console.log("第二种遍历方式:"+arr[i])
  }

3.forEach 一个参数为数组的元素,第二个元素为数组的下标

arr.forEach((element,index) => {
    console.log("第三种遍历方式:"+element)
});

4.for-of 第一个变量ele代表数组的元素(可以自定义) arr为数组(数据源)

for(var ele in arr){
    console.log("第四种遍历方式:"+ele)
}

5.map遍历 map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);

var arr=array.map((item,index,array)=>{
    return item*10;
})

6.filter遍历 不会改变原始数组,返回新数组

 var arr = [73,84,56,22,100]
 var newArr = arr.filter(item => item>80)

7.every遍历 every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log(arr.every((item,index,array)=>{
    return item>3
}))//false

8.some遍历 some()是对数组中每一项运行指定函数,如果该函数对任一项返回true,则返回true

 var arr = [ 1, 2, 3, 4, 5, 6 ]; 
 console.log(arr.every((item,index,array)=>{
     return item>3
 }))//true  

9.reduce reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。

  var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10

10.reduceRight 类似reduce
11.find find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]
stu.find(ele => ele.name == "李四")//返回结果为{name: "李四", gender: "男", age: 20}

11.findIndex 返回符合条件的数组下标,否则-1

 [1,2,3].findIndex(x=>x==3)//true

12.ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

 for (let index of ['a', 'b'].keys()) {
        console.log(index);
    }
    // 0
    // 1
    for (let elem of ['a', 'b'].values()) {
        console.log(elem);
    }
    // 'a'
    // 'b'
    for (let [index, elem] of ['a', 'b'].entries()) {
        console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"
相关标签: js 遍历数组