JavaScript数组遍历方法大集合

最新推荐文章于 2024-04-24 00:45:00 发布

weixin_45070265

最新推荐文章于 2024-04-24 00:45:00 发布

阅读量305

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45070265/article/details/108605164

版权

javascript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

1.for

for循环是最常用,也是最简单的遍历方法
基本语法:
for(let i=0; i<arr.length; i++){循环体}

let arr=['张三','李四','王五']
    for(let i=0; i<arr.length; i++){
        console.log(arr[i])
    }

//将数组的长度保存下来,避免每次访问数组的长度(当数组元素比较多时,效果更明显)
let arr=['张三','李四','王五']
for(let i=0,len=arr.length; i<len; i++){
        console.log(arr[i])
    }

2.while

while循环只接受一个参数,满足条件就继续执行,不满足就停止

    let arr = [1, 2, 5, 10, 5]
    function arrMin(arr) {
        let len = arr.length
        let min = arr[0]
        // while循环只接受一个参数,满足条件就继续执行,不满足就停止
        while (len) {
            min = arr[0] < min ? arr[0] : min
            len--
        }
        return min
    }
    console.log(arrMin(arr))//1

3.forEach()

语法:arr.forEach((value,index,arr){})
forEach回调函数中的第三个参数可以省略
特点:
1.forEach遍历数组,让数组中的每一项都执行一次回调函数
2.没有返回值(默认undefined)
3.如果数组元素的值是基本数据类型,则不会影响原始数组;如果数组元素的值是引用类型,则会改变数组元素的值
4.不能正确响应break和continue
5.如果数组中存在空位,forEach会跳过空位

/* forEach不支持return ,没有返回值(undefined) */
let arr=['张三','李四','王五']
    let res=arr.forEach((item,index)=>{
        console.log(item,index)
        return item*2
    })
    console.log(res)//undefined
    console.log(arr)//['张三','李四','王五']

/*如果数组元素的值是引用类型,则会改变数组元素的值*/
    let newarr=[{id:0,name:'张三'},{id:1,name:'李四'}]
    newarr.forEach((item,index)=>{
		item.id=item.id+1
    })
	console.log(newarr)//[{id:1,name:'张三'},{id:2,name:'李四'}]

/* 不能使用break和continue*/
  let arr=['张三','李四','王五']
    arr.forEach((item,index )=>{
        console.log(`${index}===>${item}`)
         if(key>1) break;
    })
    // 报错:Uncaught SyntaxError: Illegal break statement

/* 如果数组中存在空位,forEach会跳过空位 */
 let arr = [1, , 3, 4]
    arr.forEach((value, index) => {
        console.log(`${value}+a`)
    })
    // 1+a
    // 3+a
    // 4+a

4.map()

语法:arr.map((value,index,arr)=>{})
其中map回调函数中的第三个参数arr是要当前要遍历的数组,可以省略
特点:
1.map遍历数组,让数组中的每个元素都执行一次回调函数
2.可以使用return,return的结果是一个新数组
3.如果数组元素的值是基本数据类型,则不会影响原始数组;如果数组元素的值是引用类型,则会改变数组元素的值
4.由于返回的结果是一个数组,所以可以进行链式操作
5.不能正确响应break和continue
6.如果数组中存在空位,map会跳过空位

/* 可以使用return,return的结果是一个新数组.数组元素的值是基本数据类型不会影响原数组 */
let arr = [1, 3, 6, 9, 11, 12]
    var res = arr.map((value, index) => {
        console.log(value, index)
        return value * 2
    })
    console.log(res)//[2, 6, 12, 18, 22, 24]
    console.log(arr)//[1,3,6,9,11,12]

/*如果数组元素的值是引用类型,则会改变数组元素的值*/
    let newarr=[{id:0,name:'张三'},{id:1,name:'李四'}]
    newarr.map((item,index)=>{
		item.id=item.id+1
    })
	console.log(newarr)//[{id:1,name:'张三'},{id:2,name:'李四'}]

/* 使用map遍历可以返回新数组,所以可以进行链式操作 */
    let arr = [1, 3, 5]
    var res = arr.map((value,index) => {
        return value * 2
    }).map((value, index) => {
        return value*index
    })
    console.log(res)//[0, 6, 20]
    /*
    [1, 3, 5]使用map遍历,将数组中的每个元素乘2之后的结果是[2,6,10],
    再用[2,6,10]进行遍历,将数组中的每个元素乘对应的索引之后结果为[0, 6, 20]
	*/

   /* 不能正确响应break和continue */
  let arr = [1, 3, 5]
     arr.map((value,index )=>{
         console.log(`${index}===>${value}`)
         if(value>5) break;
     })
     // 报错:Uncaught SyntaxError: Illegal break statement

/* 如果数组中存在空位,map会跳过空位 */
    let array = [1, , 3, 4]
    array.map((value, index) => {
        console.log(`${value}+a`)
    })
    // 1+a
    // 3+a
    // 4+a

5.for of

语法:for(let value of arr){}
特点:
1. 只能遍历数组元素,不能遍历索引
2. 可以正确响应break和continue
3. 如果数组中存在空位,for of不会跳过空位
4.不仅能遍历数组还能遍历字符串

/*  for of中可以使用break和continue */
let arr = [1, 5, 9, 10, 2, ]
    for (let value of arr) {
        if (value > 5) break;
        console.log(value)
    }
    //1
    // 5

    for (let value of arr) {
        if (value > 5) continue;
        console.log(value)
    }
    //1
    // 5
    // 2

    /*  for of 可以遍历字符串 */
    let str = '遍历字符串'
    for (let value of str) {
        console.log(value)
    }
    // 遍
    // 历
    // 字
    // 符
    // 串

与前面对比看看

 /* 如果数组中存在空位,for of不会跳过空位 */
    let array = [1, , 3, 4]
    for (let value of array) {
        console.log(`${value}+a`)
    }
    // 1+a
    // undefined+a
    // 3+a
    // 4+a

6.for in

语法:for(let key in arr){}
特点:
1.遍历数组索引,根据索引也可以遍历数组元素
2.for in不仅能遍历数组,还能还能遍历对象和字符串
3.如果数组中存在空位,for in会跳过空位

 let arr=[1,2,5,10,6,8]
 for(let index in arr){
     console.log(index,arr[index])
 }
 // 0 2
// 1 5
// 2 10
// 3 6

/* for in不仅能遍历数组,还能还能遍历对象和字符串 */
 let obj={
     name:'张三',
     age:18
 }
 for(let key in obj){
     console.log(key,obj[key])
 }
// name 张三
// age 18

 let str='芒果好吃'
 for(let key in str){
     console.log(key,str[key])
 }
// 0 芒
// 1 果
// 2 好
// 3 吃

 /* 如果数组中存在空位,for in会跳过空位 */
 let array = [1, , 3, 4]
 for (let key in array) {
        console.log(`${array[key]}+a`)
    }
    // 1+a
    // 3+a
    // 4+a

7.filter()

语法:arr.filter(function(item,index,arr){})
特点: 将满足条件的过滤出来放入一个新的数组,不会影响原数组

 let arr=[98,60,55,72,45,88]
//  过滤出数组中大于60的
let newArr=arr.filter(function(item){
    return item>60
})
// ES6写法
// let newArr=arr.filter((item=> item>60))
console.log(newArr)//[98, 72, 88]
console.log(arr)// [98, 60, 55, 72, 45, 88]

let arr2=[0,1,3,3,4,4,5,5]
// 过滤出索引与值相等的数组元素
let newArr2=arr2.filter((item,index)=>{
    console.log(item,index)
    return item===index
})
console.log(newArr2)//[0, 1, 3, 4]

let objArr=[
    {id:1,name:'张三',age:18},
    {id:2,name:'李四',age:20},
    {id:3,name:'王五',age:10},
    {id:4,name:'马六',age:22},
    {id:5,name:'田七',age:26},
]
// 过滤出age大于20的元素
let newObjeArr=objArr.filter((item)=>item.age>20)
console.log(newObjeArr)

8.every()

语法:arr.every(function(item,index,arr){})
特点: 检查是否数组中的所有元素都满足条件,返回结果是布尔值

 let arr=[55,60,70,25,80]
 console.log(arr.every((item=>item>60)))//false
 console.log(arr.every((item=>item<100)))//true

9.some()

语法:arr.some(function(item,index,arr){})
特点: some 检查数组元素是否有满足条件的,返回布尔值

    let arr = [55, 60, 70, 25, 80]
    console.log(arr.some((item => item > 60)))//true
    console.log(arr.some((item => item > 100)))//false

10.find()和findIndex()

find() 方法返回通过测试函数的第一个数组元素的值。如果没有满足条件的返回undefined
findIndex() 方法返回通过测试函数的第一个数组元素的索引。如果没有满足条件的返回-1

     let arr=[10,16,20,55,60]
     console.log(arr.find(item=>item>20))//55
     console.log(arr.find(item=>item>100))//undefined
     console.log(arr.findIndex(item=>item>20))//3
     console.log(arr.findIndex(item=>item>100))//-1

11.reduce()

语法:arr.reduce((total,value,index,arr){},totalInit)
reduce()方法有两个参数,
第一个参数是回调函数,回调函数有四个参数,分别是总数(初始值/先前返回的值),项目值,项目索引,数组本身
第二个参数是回调函数中的第一个参数的初始值(可以省略)

	 //  数组求和
	 //(可以使用debugger查看函数执行过程)
   // debugger;
    let arr = [1, 2, 3, 4, 5]
    let sum = arr.reduce((prevTotal, item) => prevTotal + item)
    console.log(sum)//15
    /* 
        遍历过程
        index       item        pretoTotal+item
        0           1           0+1=1
        1           2           1+2=3
        2           3           3+3=6
        3           4           6+4=10
        4           5           10+5=15
     */

    //  给preTotal一个初始值10
    console.log(arr.reduce((prevTotal, item) => prevTotal + item, 10))//25
    /* 
        遍历过程
        index       item        pretoTotal+item
        0           1           10+1=11
        1           2           11+2=13
        2           3           13+3=16
        3           4           16+4=20
        4           5           20+5=25
     */

12.reduceRigth()

reduceRight() 与reduce方法类似,数组元素中右向左遍历

   console.log(arr.reduceRight((prevTotal, item) => prevTotal + item))//15
   /*
      遍历过程
      index       item        pretoTotal+item
      4           5           0+5=5
      3           4           5+4=9
      2           3           9+3=12
      1           2           12+2=14
      0           1           14+1=15
   */

13.keys(),values()和entries()

keys(),values()和entries()是ES6提供的——用于遍历数组.可以用for…of循环进行遍历

1. keys()是对键名的遍历

  let arr = [2, 5, 3]
    // 遍历数组元素索引(键名)
    for (let key of arr.keys()) {
        console.log(key)
    }
    //0
    //1
    //2

2. values()是对键值的遍历

  let arr = [2, 5, 3]
// 遍历数组元素(键值)
    for (let value of arr.values()) {
        console.log(value)
    }
    //2
    //5
    //3

3.entries()是对键值对的遍历

  let arr = [2, 5, 3]
// 遍历键值对
    for (let [index, value] of arr.entries()) {
        console.log(`${index}===>${value}`)
    }
    //  0===>2
    //  1===>5
    //  2===>3

总结

1.在固定长度或长度不需要计算的时候for循环效率高于foreach。

2.forEach,让数组中的每个元素都执行一次回调函数,没有返回值(默认undefined)

3.map,让数组中的每个元素都执行一次回调函数.可以使用return,return的结果是一个新数组.(由于返回的结果是一个数组,所以可以进行链式操作)

4.for of , 可以遍历数组元素,不能遍历索引, 可以使用break,continue, forEach和map遍历时break,continue和return都不能使用
for of不仅能遍历数组还能遍历字符串
如果数组中存在空位,for of不会跳过空位,但forEach,map和for in会跳过空位

5.for in,遍历数组索引,根据索引也可以遍历数组元素
for in不仅能遍历数组,还能遍历对象和字符串

6.filter, 将满足条件的数组元素过滤出来组成新的数组,并返回这个新数组

7.every,检查是否数组中的所有元素都满足条件,返回结果是布尔值

8.some ,检查数组元素是否有满足条件的,返回布尔值

9.indexOf()搜索某个元素在数组中索引位置并返回元素的索引值,如果不存在返回-1

10.lastIndexOf(),与indexOf()方法类似,只是查找的顺序不同

11.[ES6] find() 方法返回通过测试函数的第一个数组元素的值。如果没有满足条件的返回undefined

12.[ES6] findIndex() 方法返回通过测试函数的第一个数组元素的索引。如果没有满足条件的返回-1

13.reduce() 方法在每个数组元素上运行函数，可以使用reduce()方法求和

14.reduceRight() 与reduce方法类似,数组元素中右向左遍历

参考

w3school
ECMAScript 6 入门–阮一峰

weixin_45070265

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数组遍历方法大集合

1.forfor循环是最常用,也是最简单的遍历方法基本语法:for(let i=0; i<arr.length; i++){循环体}let arr=['张三','李四','王五'] for(let i=0; i<arr.length; i++){ console.log(arr[i]) }//将数组的长度保存下来,避免每次访问数组的长度(当数组元素比较多时,效果更明显)let arr=['张三','李四','王五']for(let i=0,len=
复制链接

扫一扫