平时工作时一些数组常用方法，以及操作总结

平时工作中，少不了使用数组，对于后端的返回数据有时若不是符合dom树渲染的数据前端还是会自己重新用后端返回数据重组来进行dom渲染。

废话不多说，我们先来看看数组所包含的方法，也许不是很全，不足处请大家补充，大家相互成长才是写这篇文章的目的不是吗？！

ES5中Array常用API：

1、join()

2、push()

3、pop()

4、splice()

5、indexOf()

6、lastIndexOf()

7、reverse()

8、slice()

9、every()

10、some()

11、reduce()

12、reduceRight()

13、forEach()

14、map()

15、filter()

16、sort()

17、concat()

18、shift()

19、unshift()

20、toLocaleString()

ES6新增：

1、扩展运算符 ...的使用

2、Array.form()

3、Array.of()

4、copyWithin()

5、find（）

6、findIndex()

7、fill()

8、entries()

9、flat()

10、flatMap()

11、keys()

12、values()

13、数组的空位

tips：es6的好多用法本菜鸡还不熟悉，中间借鉴了阮一峰大神的API（没错就是连目录都是抄的）中间加了一些自己使用时的心得看法，大家喷我的时候轻点(我就是抄了，你们说我我也不改)附上阮一峰大神撰写的文档链接 http://es6.ruanyifeng.com/#do...

废话不多说直接上正题

1:数组对象的join方法：

join方法是将数组对象中的，每个对象转换成字符串，并用传入参数字符串进行拼接，并返回一个字符串

let Arr = [1,2,3,4]
    console.log(Arr.join(',')) //1,2,3,4
    console.log(Arr.join('-')) //1-2-3-4
    let Arr2 = [1,2,[3,4],[5,6]]
    console.log(Arr2.join(',')) //1,2,3,4,5,6
    //若数组中有对象，则会对对象先使用tostring方法，所以对象将会被转换成[object Object]，一般不会这么做也不多做说明
    let Arr3 =[1,2,{name:'name1',value:1}]//1,2,[object Object]
    console.log(Arr3.join(','))

2:数组对象的push方法：

该方法相信大家都很熟悉，是向数组末尾追加元素，但是其实这个方法是有一个反参的，大家可能没有注意

let arr = [1,2,3]
console.log(`push返回参数:${arr.push(4)} 追加后的数组对象:${arr} `)//打印结果 push返回参数:4 追加后的数组对象:1,2,3,4
    
    // 注意到打印出的arr.push(4)的反参4没有，没错就是返回拼接后的数组的长度(length属性)

//数组对象是可以接受所有对象的，所以push方法的入参是可以是所有合法对象(Symbol对象这块好像是不行，或者说是我没有转换)
    let arr = [1,2]
    arr.push('String')
    arr.push(Symbol('symbol'))
    arr.push({name:'testName',value:'Saurfang'})
    arr.push([3,4])
    arr.push(undefined)
    arr.push(null)
    arr.push(NaN)
    arr.push(new Date())
    console.dir(arr)

输出结果：

2：数组对象的pop方法：

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

//pop
    let arr = [1,2,3]
    console.log(arr.pop()) //3  返回的是删除的元素
    console.log(arr) //[1, 2]   删除最后一位元素的数组
    let arr2 = [1]
    console.log(arr2.pop())   //1
    console.log(arr2)         //[]
    let arr3 = []
    console.log(arr3.pop())   //undefined
    console.log(arr3)         //[]

3：数组对象的splice()方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目

splice方法有多个参数不必要每个都填写，具体参数我借用w3cschool给我们的文档说明

语法arrayObject.splice(index,howmany,item1,.....,itemX)

参数以及用法

• index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, ..., itemX：可选。向数组添加的新项目。

//splice
    let arr =[1,2,3,4]
    // arr.splice(1,2) //从数组indexOf为1的位置删除两个元素并返回一个数组
    console.log(arr.splice(1,2))// [2, 3]
    console.log(arr)  //[1,4]
    let arr2=[1,2,3,4]
    arr2.splice(1,2,666,777,888) //从arr2indexOf为1的位置删除两个元素并插入666，777，888三个元素
    console.log(arr2) //[1, 666, 777, 888, 4]
    let arr3 = [1,2,3,4]
    arr3.splice(-1,1,7777)//从arr3末尾删除1个元素并在删除元素位置插入7777
    console.log(arr3) //[1, 2, 3, 7777]
    let arr4 = [1,2,3,4]
    arr4.splice(-1,0,6666)//从arr4末尾删除0个元素并在删除元素位置插入7777
    console.log(arr4)  //[1, 2, 3, 6666, 4]
    let arr5 = [1,2,3,4]
    arr5.splice(-2,3,9999)
    console.log(arr5)//[1, 2, 9999]

5：数组对象的indexOf方法:

返回输入参数在数组中的位置(第一次出现)

//indexOf

    let arr =['a','b','c','d']
    console.log(arr.indexOf('c'))  //2
    let arr2 = ['a','b','b','b']
    console.log(arr2.indexOf('b')) //1

6：数组对象的lastIndexOf方法：

返回输入参数在数组中的位置(最后一次出现)
用法就不多做阐述了和indexOf()一样

7：数组对象的reverse方法：

颠倒数组中元素的位置

//reverse
    let arr = [1,2,3,4]
    arr.reverse()
    console.log(arr) //[4, 3, 2, 1]

8：数组对象的slice方法：

从已有的数组中返回选定的元素
用法：arrayObject.slice(start,end)

• start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

//slice
    let arr = [1,2,3,4]
    console.log(arr.slice(0,2))//[1, 2] //返回arr中第1个元素开始截取两个长度的数组长度
    console.log(arr)//[1, 2, 3, 4]//该方法与splice方法不同，只是返回其中一截的数组长度并拼接成数组返回，并不会改变原数组

9：数组对象的every方法

检索数组对象中每个元素是否都符合要求

let arr = [10,11,12,13]
    console.log(arr.every(i=>i>10))//判断arr中所有元素是否大于10//false
    console.log(arr.every(i=>i>9)) //判断arr中所有元素是否大于9//true

10：数组对象的some方法

检索数组对象中是否有符合规则的元素

let arr = [10,11,12,13]
    console.log(arr.some(i=>i<9)) //判断arr中是否有元素小于9  //false
    console.log(arr.some(i=>i<11)) //判断arr中是否有元素小于11 //true

11：数组对象的reduce方法

累加器方法，和forEach方法有点类似对数组中对象进行遍历计算并返回最终结果

//reduce
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '结果:'+
        arr.reduce((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

从输出结果来看你们可以发现第一次运行回调函数的时候x为1，y为2，而第二次x=3，y=3，第三次输出为x=6，y=4，由此可以看出第一次x等于数组的第一个元素值，第二个元素为数组的第二个元素值，而往后，x为回调函数返回的值，y为arr[次数]的值

11：数组对象的reduceRight方法

//reduceRight
    let arr = [1,2,3,4,5,6,7,8,9,10]

    console.log( '结果:'+
        arr.reduceRight((x,y)=>{
            console.log(`x=>${x}`)
            console.log(`y=>${y}`)
            return x+y
        })
    ) //55

从输出结果来看可以看出，reduceRight方法与reduce方法一样，之后过是从末尾计算追加

12：数组对象的forEach方法

方法用于调用数组的每个元素，并将元素传递给回调函数

let arr = ['aaa','ccc','ddd','eee','bbb']
    arr.forEach((currentValue,index,arr)=>{
        console.log(`index:${index},value:${currentValue}`)
        console.log(arr)
    })
    /*   此为输出结果
         index:0,value:aaa
         ['aaa','ccc','ddd','eee','bbb']...
         forEach方法对数组中的元素进行遍历，进行操作回调函数中的currentValue为遍历的当前元素值，index为当前元素索引，arr是当前元素返回的数组
         forEach 方法用于调用数组的每个元素，并将元素传递给回调函数。
         如果对数组中的每个元素都要进行操作或者判断则可以使用此方法，如果遍历需要回返则不建议使用

    */

过多的我就不说了，这个平时用的比较多大家基本上都知道用法

13：数组对象的map方法

这个和forEach方法很像，区别我写在代码备注里了

`let arr = ['aaa','ccc','ddd','eee','bbb']

console.log(arr.map((currentValue,index,arr)=>{
    
    return currentValue+index
}))
/*   此为输出结果
        [aaa1,ccc2,ddd3,eee4,bbb5]
     map方法和forEach方法很像回调方法的都是必传当前遍历元素的值与选填的当前元素索引选填的当前元素所在数组唯一不同的是forEach方法没有返回值但是map方法却会返回一个新数组这用于要对数组中加入一些新子元素非常方便（操作数组）
*/`

14:数组对象的filter方法

过滤器方法，过滤出数组对象中符合自定义规则的元素并组合成一个新数组返回

//filter
    let arr = [111,222,333,444,555,666]
    console.log(
        arr.filter((currentValue,index,arr)=>{
            return currentValue>333
        })
    ) //输出结果 [444,555,666]
    /**
     * filter方法的入参用法用forEach map一样都是currentValue必填，index，arr选填
     * filter将会返回一个过滤掉不符合自定义规则的数组的新数组
     * */

15:数组对象的sort方法

多用于数组的排序可传入一个回调函数来定义 排序 方式，一般在比较Number元素大小时可用，如果数组中元素都是Number类型而又没有传入回调函数则返回原数组，说白了不传回调函数比较大小只对String类型有效，所以又想不传入回调函数又想排序纯Number数组就要先把所有数组元素转换成String类型进行排序，废话不多说直接上代码

let arr = [333,11,666,2,8,123,0]
    let arr2 = ['zzz','eee','sss','aaa','ddd']
    console.log(arr2.sort())  // ["aaa", "ddd", "eee", "sss", "zzz"]
    console.log(arr.sort()) //[0, 11, 123, 2, 333, 666, 8]
    //由此可见不传回调函数对纯Number类型的数组是不生效的，可见sort方法的排序方式是通过编码来对数组元素进行排序的

    //纯Number类型数组从小到大排序
    console.log(arr.sort((a,f)=>{
        return a-f
    }))//[0, 2, 8, 11, 123, 333, 666]
    //纯Number类型数组从大到小排序
    console.log(arr.sort((a,f)=>{
        return -(a-f)
    }))//[666, 333, 123, 11, 8, 2, 0]

16：数组对象的concat方法：

这方法现在不怎么用了吧还是讲一讲，该方法用于拼接数组，可传入多个参数（至少传入一个）返回一个新数组，如果传入的是一个数组则会拼接入数组中的元素而不是数组

let arr = [1,2,3,4,5]
    console.log(arr.concat(6,7,8,[9,10],[11],[12,13]))//[1,2,3,4,5,6,7,8,9,10,11,12,13]

过多的我也不讲了，ES6中有更好用的方法，我会在下一篇博客中说明

17：数组对象的shift方法：

这个不太好用我就简单说明，毕竟一家人最重要的是整整齐齐

如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。

//shift
    let arr = [1,2,3,4,5]
    console.log(arr.shift())  //1
    console.log(arr)          //[2,3,4,5]
    //注意啦，这个方法会改变原数组长度的，一般场合都用不到

18：数组对象的unshift方法：

unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。（这段我直接抄的因为不知道如何表达）

废话不多说，上代码

//unshift
    let arr = [1,2,3,4,5]
    console.log(arr.unshift(6)) //6
    console.log(arr.unshift([7,8,9]))//7

    console.log(arr)  //[[7,8,9],6,1,2,3,4,5]
    //unshift方法返回的是新数组长度，而shift方法是返回第一个被删除的元素，这两个方法都会改变数组长度，而传入的参数如果是个数组将不会和concat方法一样将传入数组元素打散

好啦，我能想的起来的数组方法只有这么多了，这些都是es6之前的，es6中有好多新的好用的操作数组的api我将在下一篇博客中讲，同时也会说一些我在平时工作中操作数组的骚操作，希望大家能指正我的意见，写博客的目的不就是共同成长吗？我现在只是只小菜鸡望诸君多多提点同时望诸君代码永无bug