JavaScript中数组常用的方法总结

1.push方法

push方法可以实现数组的尾部增加 arr.push(元素) ，元素个数不限

        const arr = [1,3,4,7,9]
        //数组的尾部增加    
        arr.push(6,7)     // console.log(arr.push(6,7)) 值为7
        console.log(arr)  // [ 1 , 3 , 4 , 7 , 9 , 6 , 7 ]

注意点:push方法可以传多个数据，元素会依次添加到尾部，push方法的返回值为数组长度

应用场景：数组的尾部增加新的元素

2.unshift方法

unshift方法可以实现数组的头部增加 arr.unshift(元素) ，元素个数不限

        const arr = [1,3,4,7,9]
        //数组的头部增加
        arr.unshift(7,8)  //console.log(arr.unshift(7,8)) 值为7
        console.log(arr) //[ 7 , 8 , 1 , 3 , 4 , 7 , 9 ]

注意点:unshift方法可以传多个数据，数据会依次添加到头部，unshift方法的返回值为数组长度

应用场景：数组的头部增加新的元素

3.pop方法

pop方法可以实现数组的尾部删除 arr.pop()，仅仅能删除尾部一个元素。

        const arr = [1,3,4,7,9]
        //数组的尾部删除
        arr.pop()  //console.log(arr.pop()) 值为 9
        console.log(arr) // [ 1 , 3 , 4 , 7 ]

注意点:pop方法传参无效，只能删除数组的最后一个元素，pop方法的返回值为被删除的元素

应用场景：数组的尾部删除元素

4.shift方法

shift方法可以实现数组的头部删除 arr.shift()，仅仅能删除头部一个元素。

        const arr = [1,3,4,7,9]
        //数组的头部删除
        arr.shift()  // console.log(arr.shift()) 值为1
        console.log(arr) // [ 3 , 4 , 7 , 9 ]

注意点:shift方法传参无效，只能删除数组的第一个元素，shift方法的返回值为被删除的元素

应用场景：数组的头部删除元素

5.splice方法

splice可以实现数组的选择性删除 arr.splice(起始下标，删除数量，新的元素)

        const arr = [1,3,4,7,9]
        //数组的选择性删除 arr.splice(起始下标，删除数量，新的元素)
        arr.splice(1,3,0,0,0) //console.log(arr.splice(1,3,0,0,0))值为删除的元素3,4,7
        console.log(arr) // [ 1 , 0 , 0 , 0 , 9]

注意点:splice方法传参，第一个参数为被删除元素的起始下标，第二个参数为删除数量，后面的参数都为新增的元素，splice方法的返回值为被删除的元素

应用场景：数组指定位置删除增加元素

6.reverse方法

reverse方法可以实现数组的翻转，arr.reverse()

        const arr = [1,3,4,7,9]
        arr.reverse()
        console.log(arr) //[ 9 , 7 , 4 , 3 , 1 ]

注意点:reverse方法会直接修改原数组，返回值为翻转后的数组

应用场景：数组的翻转

7.join方法

join方法可以实现按分隔符将数组的每一个元素拼接成字符串，arr.join('分割符')

        const arr = [1,3,4,7,9]
        arr.join('-')
        console.log(arr) //[ 1 , 3 , 4 , 7 , 9] 
        console.log(arr.join()) // 1-3-4-7-9 (字符串类型)

注意点:join()方法不会直接修改原数组，返回值为通过分隔符拼接的字符串

应用场景：翻转字符串

8.sort方法

sort方法可以对数组进行排序 arr.sort()，当不传参时，默认是升序排序。

arr.sort(function(a,b){

return a-b

})

        const arr = [1,15,4,3,9,0]
        arr.sort()
        console.log(arr)  // [ 0 , 1 , 15 , 3 , 4 , 9 ]

        const arr = [1,15,4,3,9,0]
        arr.sort(function(a,b){
            return a-b
        })  //a-b为升序，想要降序则改为b-a
        console.log(arr)  // [ 0 , 1  , 3 , 4 , 9 , 15 ]

注意点：

 sort()会将数组中的每个值取出后调用toString()转型方法转换成字符串，然后比较得到的字符串，以确定如何排序。
所以说使用arr.sort()不传参时，数组比较实际是在比较"1",“15”,“4”,“3”,"9","0"的大小，并按升序排列，而非比较数字大小。
比较数字大小需传入排序函数。

sort()方法会直接对原数组进行修改，返回值为修改后的数组

应用场景：实现数组的排序

9.flat方法

flat方法可以对数组进行扁平化处理 arr.flat(数字)，当不传参时，默认参数为1。

        const arr = [1,[10,3,5,[6,7]]]
        console.log(arr.flat(1)) //[ 1 , 10 , 3 , 5 , [6,7]]
        console.log(arr) // [1,[10,3,5,[6,7]]]

注意点：flat()可以降低数组的维度，不会修改原数组，其返回值为降维后的新数组。

应用场景:数组降维

10.forEach方法

forEach方法可以对数组进行遍历操作,传参时回调函数第一个参数为数组的每个元素，第二个参数为该元素对应的下标。

arr.forEach(function(item,index){
     //代码
})

        //实现数组的每个元素+1
        const arr = [1,10,3,5,6,7]
        const arrNew = []
        arr.forEach(function(item,index){
            
            item = item + 1
            arrNew.push(item)
        })
        console.log(arrNew) // [ 2 , 11 , 4 , 6 , 7 , 8 ]

注意点：forEach()可以遍历数组，类似于for循环，但是无法终止循环，想终止循环，可以使用try-catch抛出异常来强制终止，forEach方法没有返回值,不会改变原数组。

应用场景：遍历数组

11.map方法

map方法可以对数组进行映射，传参时回调函数第一个参数为数组的每个元素，第二个参数为该元素对应的下标。

arr.map(function(item,index){
     return  新数组元素
})

        const arr = [1,10,3,5,6,7]
        let arrNew = arr.map(function(item,index){
            return item+1
        })
        console.log(arrNew) // [ 2 , 11 , 4 , 6 , 7 , 8 ]

注意点:map方法的返回值为新的数组，map方法不会改变原数组。

应用场景：映射数组

12.filter方法

map方法可以对数组进行筛选，传参时回调函数第一个参数为数组的每个元素，第二个参数为该元素对应的下标。

arr.filter(function(item,index){
     return  (筛选条件)
})

        const arr = [1,10,3,5,6,8]
        let arrNew = arr.filter(function(item,index){
            return index>=Math.floor(arr.length/2) //筛选数组后面一半的元素
        })
        console.log(arrNew)// [ 5 , 6 , 8 ]

注意点:filter方法的返回值为新的数组，filter方法不会改变原数组。

应用场景：对数组元素进行筛选

13.some方法

some方法可以对数组进行判断，传参时回调函数第一个参数为数组的每个元素，第二个参数为该元素对应的下标。

arr.some(function(item,index){
     return  (判断条件)
})

        const arr = [1,10,3,5,6,8]
        let res = arr.some(function(item,index){
            return item>9   //判断是否有一个元素大于9
        })
        console.log(res)// true

注意点:some方法的返回值为布尔类型，当数组里面有一个元素满足条件时，返回值为true，所有元素都不满足条件，返回值为false。some方法不会改变原数组。

应用场景：表单元素的非空判断

14.every方法

every方法可以对数组进行判断，传参时回调函数第一个参数为数组的每个元素，第二个参数为该元素对应的下标。

arr.every(function(item,index){
     return  (判断条件)
})

        const arr = [1,10,3,5,6,8]
        let res = arr.every(function(item,index){
            return item>2 //判断是否所有元素大于1
        })
        console.log(res)// false

注意点:every方法的返回值为布尔类型，当数组里面所有元素都满足条件时，返回值为true,否则返回值为false。every方法不会改变原数组。

应用场景：全选框是否勾选

15.reduce方法

reduce方法可以对数组进行求和。

arr.reduce(function(sum,item,index){
     return  执行代码
},0)

第一个参数：回调函数   (上一次值,当前值,当前下标)

        默认下标不是从0开始，而是从1开始。 

        return 值 就是下一次 sum的值

    第二个参数: 初始值

       一般需要设置初始值为0, 如果不设置遇到空数组则会报错

        const arr = [1,10,3,5,6,8]
        let res = arr.reduce(function(sum,item,index){
            return sum + item
        },0)
        console.log(res)// 33(数组累加和)

注意点:reduce方法的返回值为sum结果，reduce方法不会改变原数组。

应用场景：数组元素求和，求最大值

以上所有方法中

改变原数组的方法:push(),pop(),unshift(),shift(),splice(),reverse(),sort()
不改变原数组的方法:forEach(),some(),every(),map(),filter(),flat(),reduce(),join()

记忆口诀:增删改查排序会修改原数组，其余不会。

返回值:

push()和unshift()返回值为修改后的数组长度。(易错)

pop()，shift()，splice()返回值为被删除的元素。(易错)

sort()和reverse()返回值为修改后的数组。

flat返回值为降维后的数组。

join()返回值为拼接的字符串。

forEach()没有返回值。

map()和filter()返回值为得到的数组。

some和every返回值为布尔类型。

reduce返回值为sum。

记忆口诀:分组记忆。