ES6中新增的对数组的操作

简介

在ES6中增加了对Javascript新增的方法有很多，例如箭头函数，Promise，class等等，今天我们在这里来聊一下ES6中相对于ES5新增的那些对数组的操作的方式。

数组的遍历

数组的遍历可以说是对数组的操作里面最常用的一个方法了，那么提起数组的遍历，第一个想到的肯定就是for循环，这里我会把ES5跟ES6里面的数组遍历的方法都拿出来，做个对比，跟大伙聊下，数组遍历的那些事

//for循环遍历
    let array = [1,2,3,4,5]
    for(let i =0 ; i<array.length;i++){
        console.log(i,array[i]) // 0,1,2,3,4  1,2,3,4,5
    }

这种也是最最基础的一个遍历方式，虽然写起来很长，而且它是通过索引来得到对应的数据的，但是它有一个最大的优点，就是它在所有的遍历数组的方法里面，是性能最高的一个方法。

同时，如果需要中途跳出循环，也可以通过break来实现

for(let i =0 ; i<array.length;i++){
   if(i === 2){
        break
    }
    console.log(i,array[i]) // 0,1  1,2
    }

前几天的时候，我看到一道面试题，问的是break跟continue在for循环中的区别，这里也顺便说一下

for(let i =0 ; i<array.length;i++){
   if(i === 2){
        continue
    }
    console.log(i,array[i]) // 0,1,3,4  1,2,4,5
    }

看出来区别没有，break在跳出循环的时候，for循环是停止的，但是在continue跳出循环的时候，遍历还在继续执行，这个就是break和continue在for循环里的区别了。

随着时间的推移ES5里面又增加了几个遍历数组的方法。

let array = [1,2,3,4,5]
let arrayOne = array.forEach((item)=>{
        console.log(item)
 	})

这种方法有一个最大的好处，就是可以不依赖于索引，直接对数组进行遍历，代码非常的简洁。但是它也有一个很大的缺陷，就是break和continue无法在forEach里面使用。

另外的循环遍历里面还有一个非常好用的方法，就是every，而且它的功能也很强大

let array = [1,2,3,4,5]
    let arrayTwo = array.every((item)=>{
        console.log(item)  // 1,2,3,4,5
        return true
    })

这里要说明一下，在every里面，return true 等价于continue ，而return false 则等价于break的作用，默认的情况为return false。

还有一个遍历的方法，叫做for … in… ，但是这个方法遍历的不是Array，而是object，不过由于数组本身也是一个objec，所以也是可以使用for … in … 来遍历，不过这里面有一个bug

    let array = [1,2,3,4,5]
    for (let key in array) {
        console.log(key,array[key])
    }

这里遍历出来的结果是这样的

看起来好像也没什么毛病，但是仔细看一下，两边数字的颜色不一样，左边是黑色，右边是蓝色，在Chrome的控制台里面，黑色代表的是字符串，蓝色代表的才是数字，也就是说，在这里遍历出来的key其实是一个字符串，这里可以验证一下

   let array = [1,2,3,4,5]
    array.a = 6
    for (let key in array) {
        console.log(key,array[key])
    }

这个时候在控制台打印出来的值就是，所以由此可知，for…in…并不是用来遍历数组的，它拿到的索引也并不是index定位。

在ES6里面，为了可以更方便的来遍历数组，或者说，为此增加了一个方法，也就是for…of…

let data = ['a','b','c','d']
for (const item of data) {
    console.log(item) // a b c d
}

这个方法可以直接遍历出数组的value值来，而不需要通过key的值来获得数组所要的value

因为for…of…严格意义上来说，它也是一个遍历对象的一个方法，所以如果出现了一些复杂的对象的时候怎么办！

因为这个博文是讲数组的，所以如果想了解它是如何遍历一些复杂的对象结构的话，可以看我的这篇文章

https://blog.csdn.net/m0_46380179/article/details/105743801

生成数组

生成数组的方式同样也有很多，在ES5里面生成数组的主要方法有下面这几种使我们比较经常使用到的

let arrayOne = Array()
let arrayTwo = []

那么在ES6里面又增加了什么新的生成数组的方法呢
我在这里介绍一下第一种：array.of()

 let array = Array.of(1,2,3,4,5)
   console.log(array) //[1,2,3,4,5]

这里array.of跟Array最大区别就是在传递一个参数的时候

 let array = Array.of(2)
  	console.log(array) //[2]
 let arrayOne = Array(2)
 	console.log(arrayOne) // [empty*2] 即 [ , ]

这里要着重介绍的是第二种方式，也就是：array.fill()
就如同字面上的意思，它就是起到一个填充的作用，例如

let array = Array(4).fill(2)
console.log(array) // [2,2,2,2]

fill的语法其实是fill（value,state,end），也就是在有了fill这个方法之后，想要替换掉数组里面的某个数值，再也不需要通过遍历数组之后，再使用splice来替换了。

let array = [1,2,3,4,5] 
// 替换掉3和2，为 9 
let arrayOne = array.fill(9,1,3)
console.log(arrayOne) // [1,9,9,4,5]

这种方法可以说是非常的方便了。

查找数组

查找数组里面是否有符合条件的值的方法在ES5里面，同样的也有很多种，看返回数据的需求，使用不同的方法

如果需要返回布尔值，则可以使用some

let array = [1,2,3,4,5]
let arrayOne = array.some((item)=>{
    return item === 2
})
console.log(arrayOne) //true

如果需要返回对应的下标值，则可以使用indexOf

let array = [1,2,3,4,5]
let arrayOne = array.indexOf(2)
console.log(arrayOne) // 1

如果需要返回所找到的对应的数值，则可以使用filter

let array = [1,2,3,4,5]
let arrayOne = array.filter((item)=>{
    return item === 3
})
console.log(arrayOne) // [3]

当然上面的这些方法，是在数组的数据量不是很大的时候使用的，如果说数组的数据量非常的大，比如数组里面有1000个数据，那么使用上述的方法就会特别的损耗性能，因为我们只是想要找到一个符合条件的值就可以了。

这里ES6里面提供了两个新的方法

如果需要返回的是布尔值，则使用 includes

let array = [1,2,3,4,5]
let arrayOne = array.includes(3)
console.log(arrayOne) //true

如果需要的是返回符合条件的数值，则可以使用 find

let array = [1,2,3,4,5]
let arrayOne = array.find((item)=>{
    return item === 3
})
console.log(arrayOne) // 3

如果需要返回符合条件的数值的下标，则可以使用 findindex

let array = [1,2,3,4,5]
let arrayOne = array.findIndex((item)=>{
    return item === 3
})
console.log(arrayOne) // 2

最后

我也是个刚刚开始接触前端没多久的大四的老狗，ES6我也还在探寻它的奥妙之处，写的不是很好的地方，欢迎评论区指正，如果你觉得这篇文章对你有帮助的话，麻烦可以帮我点个赞喔，你的点赞是我创作的动力呀！！！