开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

前言

日常开发中，简单来说就是增删改查，这其中难点就是数据的处理，把数据处理成我们想要的结构是避免不了的，在此过程中如果我们对数组跟对象的方法熟悉，会帮我们提高效率。今天我们来看一下数组方法，一些方法可能我们会用，但是该方法return的值是什么？能不能改变原数组？我们也要熟悉。

方法

数组总共有20多种方法，我们就讲解一下常用的方法，根据操作类型大致可以分为以下几类：

循环过滤

forEach() 作用：循环数组不会改成原数组，默认返回undefined。

     const arr = [1,2]
      arr.forEach((item,index)=>{
        //item为元素 index为下标
        console.log(item,index)
        // 1 0;2,1
      })

map() 作用：循环数组，将数组中的每一个元素执行回调函数，返回新数组，不会改成原数组。

     const arr = [1,2]
     const arr1 = arr.map((item,index)=>{
        //item为元素 index为下标
       return item+1
      })
     console.log(arr1)//[2,3]

filter()作用：循环数组，返回满足条件的元素，返回新数组，不会改变原数组。

    const arr = [1,2]
     const arr1 = arr.filter((item,index)=>{
        //item为元素 index为下标
       return item>1
      })
     console.log(arr1)//[2]

reduce() 作用：把一个函数当成累加器，数组中的每个值从左到右开始缩减，最终计算为一个值。可以用来求和。

     const arr = [1,2]
     const sum = arr.reduce((pre,cur)=>{
      return pre+cur
     },0)
     //pre为前一个值 cur为当前值 0是初始值
     console.log(sum)//3

查找元素（都不会改变原数组）

findeIndex()作用：找到第一个符合条件元素的下标，没有则返回-1。

     const arr = [1,2]
     const index = arr.findIndex(item=>item===1)
     console.log(index) //0 第一个元素

find()作用：找到第一个符合的条件元素，返回当前元素。

     const arr = [1,2,3,4]
     const item = arr.find(item=>item>1)
     console.log(item) //2

indexOf()作用：获取第一个跟给定值相同元素的下标。

     const arr = [1,2,1,1]
     const index = arr.indexOf(1)
     console.log(index) //0

lastIndexOf()获取最后一个。

    const arr = [1,2,1,1]
     const index = arr.lastIndexOf(1)
     console.log(index) //3

every()作用：测试所有元素是否符合判定条件，只有当所有元素都满足条件时才会返回true,否则为false。

     const arr = [1,2,3,4]
     const flag = arr.every(item=>item>1)
     console.log(flag) //false

some()作用：只要有一个元素满足判定条件就为true。我们可以通过这个做判断，比用forEach做些判断好用的多。

     const arr = [1,2,3,4]
     const flag = arr.some(item=>item>1)
     console.log(flag) //true

includes()作用：判断数组中是否包含特定值，返回布尔值。

     const arr = [1,2,3,4]
     const flag = arr.includes(1)
     console.log(flag) //true

增删元素

concat()作用：合并两个或多个数组，不会改变原数组，返回新数组。那个数组在前面，那个数组元素就在新数组前面，注意concat不会去重，所以要注意是否有重复元素。

     const arr = [1,2]
     const arr1 = [3,4]
     console.log(arr1.concat(arr))//[3,4,1,2]

reverse()作用：将一个数组倒序，返回该数组，会改变数组。

     const arr = [1,2]
     console.log(arr.reverse)//[2,1]

shift()删除第一个元素，返回该元素的值，更改数组的长度。

     const arr = [1,2,3]
     console.log(arr.shift())//1

unshift()作用：将一个或多个元素添加到数组开头，返回该数组的新长度，改变原数组。

     const arr = [1,2,3]
     console.log(arr.unshift(4))//4 数组长度

pop()作用：与shift()相反，删除最后一个元素，返回该元素的值，并更改数组的长度。
push()作用：添加一个或多个元素到数组末尾，返回该数组新长度。
slice(start,end)作用：截取一个新的数组,返回包含被删除元素的数组。不会改变原数组，不包含end下标,没有end或者end大于最大下标时，会从start截取到最后一个元素。我们可以利用slice(-1)获取最后一个元素；slice(0)浅拷贝一个数组。

     const arr = [1,2,3,4]
     const arr1 = arr.slice(1)
     console.log(arr1)//[2,3,4]

splice(index,number,value)作用：添加、删除、替换新的元素来修改数组，改变原数组。index为小标，number为个数，value为新增的元素。

     const arr = [1,2,3,4]
     const arr1 = arr.splice(1,1,5,6)
     console.log(arr1)//[2]
     console.log(arr)//[1, 5, 6, 3, 4]

fill(value,start,end)作用：用value值在start跟end范围内填充数组，如果没有提供范围，该方法将替换所有数组的值。

     const arr = new Array(3)
     arr.fill(8)
     console.log(arr)//[8,8,8]

总结

以上就是常用的数组方法，对于一些方法返回的结果是不是有点小意外呢？数组还有一些方法如flat(),如果大家感兴趣的可以去搜一搜，还有各个方法实现的源码，还是可以学到很多东西的。