总结遍历Array的方法

前言

遍历数组的方法,你能想出来几种,今天小落落就跟你一起缕一缕,我们大前端对于遍历数组的方法。我数了一下,大概有十四种,你能想到几种?

我根据名字做个分类

遍历系列 遍历方法
for系列for、for in、forEach、for of
while系列while、do while
reduce系列reduce、reduceRight
find系列find、findIndex
其它系列map、filter、some、every

for系列

1. for

这可能是我们最常用的,因为我们初学时,可能接触的就是普通的for循环,以下的书写方式
语法

for(语句1;语句2;语句3){
  语句块
}

在for循环中,有三个语句,分别代表的含义:
语句1:定义变量最初的值,在循环开始之前执行。
语句2:变量结束时的值,也就是运行循环的条件。
语句3:循环一次,变量增加或减少的量。每次循环结束后执行。

知识

  1. for循环的三个语句条件都可可省的,如果三个条件都缺少,但是分隔符不能少。如果三个语句条件都没有,表示是一个死循环,只有在循环体内才能结束循环。
    我们也称此类循环为空循环,可以用来做延迟功能。

        var i = 0;
        for(;;){
            if(i==4) break;
            i++;
        }
  2. for循环性能优化
    在使用for进行数组遍历时,可以先将数组长度进行缓存,从而减少计算长度次数。如下

    for(var i=0,len = arr.length;i<len;i++){
        语句块
    }

2. for in

for in 比for有了一个更强大的功能,它可以循环遍历对象,不单单遍历一个数组。

    var obj = {
      name:'test',
      age:18,
      sex:'girl'
    }
    for(var x in obj){
        console.log(`${x}:${obj[x]}`)//输出name:test,age:18,sex:girl 
    }

知识

  1. 由于for in遍历的是对象的属性,所以,他遍历出来的值是字符串型的,并不能直接进行数值计算。
  2. for in 可以循环到原型链上的属性,所以尽量不使用for in遍历数组,如下
    《总结遍历Array的方法》
    我们在数组的原型是添加了一个函数,导致,我们在遍历一个普通数组时,都会在结果处输出。
  3. for in 只遍历可枚举类型。像Array和Object使用内置构造函数所创建 的对象都会继承Object.prototype和String.prototype的不可枚举属性。例如String的indexOf()方法,或者Object的toString方法。它会遍历对象本身以及对象原型上所有的可枚举属性。

3. forEach

forEach是数组自带的一个方法,它可以不需要数组长度,开始对数组进行循环。~~~~
支持箭头函数
语法

var arr = [1,2,3,4,5];
arr.forEach((item,index)=>{
    console.log(item,index)
})

item 就是遍历的数组元素,index元素的下标

forEach与其它的for系列的使用方法不同,因为它是属于数组自带的一个方法,所以用. 点的形式调用

知识

  1. forEach你可以认为它是一个比较执拗的方法,因为他一旦要执行,就不能被中断,break或者return语句都不能退出,它必须要执行完,才可以。且,在forEach方法中使用break会报错。
  2. 不会改变原数组

4. for of

for of是ES6新增的一种遍历方式,它提供了统一的遍历机制.
语法

for(var item of arr){
    console.log(item)
}

它的语法与for in还是蛮像的,有些小伙伴这两个有时候会傻傻分不清楚,小落落也是这样的。

那这两个有什么不同呢

知识

  1. for of 可以遍历的对象:Array、Map、Set、String、Argumentst等

    for in 可遍历的对象:除Symbol以外的可枚举属性。

  2. for of 不能遍历到原型链
  3. for of 可以使用break、continue、return终止循环遍历。

while系列

1. while

语法

while(n<3){
    语句体
}

while我们可以看到,它是先判断条件的,如果条件不满足,语句体是不会被执行的。
可以使用break、continue、return终止循环。

2. do while

语法

do{
    语句体
}while(n<3)

do while与while最大的不同,就是先执行一次语句体,再去做判断。

reduce系列

哈哈哈哈哈,我觉得这个系列,属于小落落的装逼系列。因为像我这等小菜鸡,之前reduce是什么,是万万不知道的。别说还有一个reduceRight。

但其实,所有你没见过的知识,只要你去一点点的了解它,都不会那么可怕。

1. reduce

语法
array.reduce(function(total,currentvalue,currentIndex,arr),initialValue)
total:第一个值是必选的,他代表了初始值,或者是计算结束后的返回值。
currentValue:也是必选的。表示当前的数组元素。
currentIndex:可选的。表示当前的数组元素下标。
arr:可选。表示当前的数组。
initialValue:设置total的初始值。默认值为1

var arr = [1,2,3,4,5,6];
arr.reduce((total,current)=>return ,3)

2. reduceRight

reduceRight与reduce一样,唯一不同的是,reduceRight是从右往左开始计算。reduce是从左往右计算。

find系列

1. find

语法
find()方法返回数组中满足条件的第一个元素。

arr.find(callback(element, index, array){
    语句体
}, this)

用法

var arr = [1,2,3,4,54,5]
var result = arr.find((item,index,arr)item>4)
result//输出54

2. findIndex

find与findIndex语法和用法都是一样的,find是查找的元素,findIndex是查找的元素位置

var arr = [1,2,3,4,54,5]
var result = arr.findIndex((item,index,arr)item>4)
result//输出4

其它系列

1. map

语法
map与forEach一样,也是数组自带的方法,所以使用.点的形式调用。

arr.map(callback(element, index, array){
    语句体
}, this)

callback 表示回调函数
element:数组元素
index:元素下标
array:当前正在遍历的数组本身
this:回调的this指向
知识

  1. 不会改变原数组,但是会返回一个经过处理后的新数组。
  2. map中可以使用return终止循环

用法

var result = arr.map(function(item,index,arr){
    console.log(item)
})

2. filter

语法
filter的用法与map是一样的

arr.filter(callback(element, index, array){
    语句体
}, this)

知识*

  1. filter不会改变原来的数组
  2. 它主要起过滤的作用。它会将满足条件的数组元素组合成一个新的数组,然后作用返回值。

用法

var result = arr.filter(function(item){
    if(item<=4){
        return item;
    }
})
//箭头函数的写法,恩~简洁
var result = arr.filter((item)=>item<=4)

3. every

语法
好巧哇,又是一样的写法

arr.every(callback(element, index, array){
    语句体
}, this)

every根据字面意思,我们可以理解为每一个。意思是说,只有数组元素中的每一个为true,结果才会为true.只要发现有一个为false,结果就是false.
知识

  1. 同样every也不会改变原数组。
  2. 如果回调函数传入的是空数组,返回值一定是false

4. some

语法
好巧哇,又双是一样的写法

arr.some(callback(element, index, array){
    语句体
}, this)

some和every在这里相当于一对反义词。some的直译过来是一些。套在这里,只要有一个为true,返回值就为true.
知识

  1. some找到一个为true的,就会立即返回true.
  2. some也不会改变原数组。

总结

我们总结了这么多关于遍历数组的方法,其实从用法和语法上,我们也能看能将这些方法统一归类

数组中的方法

数组中的方法是否有返回值返回值类型
find查找第一个符合条件的元素有返回值数组元素
findIndex查找第一个符合条件的元素位置有返回值数值
forEach遍历数组有返回值数组
some判断数组中是否有满足条件的元素有返回值布尔型
every判断数组是的元素是否都满足条件有返回值布尔型
filter过滤出来符合条件的元素有返回值数组
map遍历数组元素有返回值数组

其它方法

其它方法遍历类型
for遍历数组
for in遍历对象
for of对象
reduce从左到右计算数组的值
reduceRight从右至左计算数组的值
while先判断条件,再执行循环体
do while先执行循环体,再判断条件

参考链接

[https://www.cnblogs.com/wangx…]
MDN

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注