js的数组Array常用方法总结

为了更好的记忆和理解，特此梳理整理，方便日后查阅。

数组常用方法：push pop unshift shift splice reduce concat slice reverse join indexOf lastIndexOf sort every some filter map forEach

a. 改变原数组的方法：push pop unshift shift splice reverse sort

b. 不改变原数组的方法：reduce concat slice join indexOf lastIndexOf every some filter map forEach

1. push: 在数组的尾部添加一项或者多项，返回添加数据后数组的长度

        let array = ['1', '2', '3']
        let res = array.push('4')
        console.log(array); // ['1', '2', '3', '4']
        let res1 = array.push('5', '6', '7')
        console.log(array); //  ['1', '2', '3', '4', '5', '6', '7']
        console.log(res1); // 7

2. pop: 删除数组的末尾项，返回被删除的项；如果数组是空数组，返回undefined

        let array = ['1', '2', '3']
        let res = array.pop()
        console.log(array); //  ['1', '2']
        console.log(res); // '3'
        let array1 = []
        let res1 = array1.pop()
        console.log(array1); // []
        console.log(res1); // undefined

3. unshift: 在数组的头部添加一项或者多项，返回添加数据后数组的长度

        let array = ['1', '2', '3']
        let res = array.unshift('4')
        console.log(array); //  ['4', '1', '2', '3']
        let res1 = array.unshift('5', '6', '7')
        console.log(array); //  ['5', '6', '7', '4', '1', '2', '3']
        console.log(res1); // 7

4. shift: 删除数组的首项，返回被删除的项；如果数组是空数组，返回undefined

        let array = ['1', '2', '3']
        let res = array.shift()
        console.log(array); //  ['2', '3']
        console.log(res); // '1'
        let array1 = []
        let res1 = array1.shift()
        console.log(array1); // []
        console.log(res1); // undefined

5. splice: 增删改，返回被删除的项组成的数组 splice(开始下标，删除元素的数量，新增元素1，新增元素2，新增元素N)

        let array = ['1', '2', '3', '4']
        let res = array.splice(1)
        console.log(array); //  ['1']
        console.log(res); //  ['2', '3', '4']
        let array1 = ['1', '2', '3', '4']
        let res1 = array1.splice(1, 2)
        console.log(array1); //  ['1', '4']
        console.log(res1); // ['2', '3']
        let array2 = ['1', '2', '3', '4']
        let res2 = array2.splice(1, 1, '3', '4')
        console.log(array2); // ['1', '3', '4', '3', '4']
        console.log(res2); // ['2']
        let array3 = ['1', '2', '3', '4']
        let res3 = array3.splice(1, 3, '3', '4')
        console.log(array3); // ['1', '3', '4']
        console.log(res3); // ['2', '3', '4']

6. reduce(callbackFn(accumulator, currentValueaccumulator, , currentIndex), initalValue)

数组的每个元素上执行callBackFn函数，函数返回值作为下次调用callbackFn的入参accumulator

eg: reduce逐个遍历数组元素，每一步都将当前元素的值与前一步的结果相加

        let array = [1, 2, 3, 4]
        let sum = array.reduce((curSum, curVal) => {
            return curSum + curVal
        }, 0)
        console.log('sum==', sum); // 10

7. concat: 拼接2个或多个数组，返回新数组，不改变原有数组

        let array = [1, 2, 3, 4]
        let array1 = [5, 6, 7, 8]
        let array2 = [9, 0]
        let newArray = array.concat(array1, array2)
        console.log('newArray==', newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
        console.log('array==', array); // [1, 2, 3, 4]
        console.log('array1==', array1); // [5, 6, 7, 8]
        console.log('array2==', array2); // [9, 0]

8. slice: 返回截取出来的新数组 slice(start, end)     范围：左闭右开

        let array = [1, 2, 3, 4, 5, 6, 7, 8]
        let newArray = array.slice(2, 5)
        console.log('newArray', newArray); // [3, 4, 5]
        console.log('array', array); // [1, 2, 3, 4, 5, 6, 7, 8]

9. reverse：数组翻转，返回翻转后的数组，改变原数组

        let array = [1, 2, 3, 4]
        let newArray = array.reverse()
        console.log('newArray', newArray); // [4, 3, 2, 1]
        console.log('array', array); // [4, 3, 2, 1]

10. join: 将所有的数组元素用连接符拼接起来，返回字符串 join(连接符)

        let array = [1, 2, 3, 4]
        let newArray = array.join()
        console.log('newArray', newArray); // 1,2,3,4
        let newArray1 = array.join("&")
        console.log('newArray1', newArray1); // 1&2&3&4
        let newArray2 = array.join("")
        console.log('newArray2', newArray2); // 1234
        let newArray3 = array.join(" ")
        console.log('newArray3', newArray3); // 1 2 3 4

11. indexOf: 从前往后 查找当前元素在数组中的位置 如果有返回下标 无返回-1

        let array = [1, 2, 3, 4]
        let index = array.indexOf(2)
        console.log('index', index); // 1
        let index1 = array.indexOf(9)
        console.log('index1', index1); // -1

12. lastIndexOf: 从后往前 查找当前元素在数组中的位置 如果有返回下标 无返回-1

13. sort: 数组排序 改变原数组

        let array = [1, 12, 3, 44, 15]
        let newArray = array.sort() // 默认字符串的排序规则
        console.log('newArray', newArray); // [1, 12, 15, 3, 44]
        console.log('array', array); // [1, 12, 15, 3, 44]
        let array1 = [1, 12, 3, 44, 15]
        let newArray1 = array1.sort((a, b) => a - b) // 从小到大
        console.log('newArray1', newArray1); // [1, 3, 12, 15, 44]
        let array2 = [1, 12, 3, 44, 15]
        let newArray2 = array2.sort((a, b) => b - a) // 从大到小
        console.log('newArray2', newArray2); // [44, 15, 12, 3, 1]

14. every: 数组每项都为真 最终为真 返回的是布尔值

        let array = [1, 12, 3, 44, 15]
        let res = array.every((item, index) => item > 0)
        console.log('res===', res); // true
        console.log('array==', array); // [1, 12, 3, 44, 15]

15. some: 数组只要某一项为真 最终为真 返回的是布尔值

        let array = [1, 12, 3, 44, 15]
        let res = array.some((item, index) => item > 40)
        console.log('res===', res); // true
        console.log('array==', array); // [1, 12, 3, 44, 15]

16. filter: 对数组进行过滤 返回符合条件的新数组

        let array = [1, 12, 3, 44, 15]
        let res = array.filter((item, index) => item > 10)
        console.log('res===', res); // [12, 44, 15]
        console.log('array==', array); // [1, 12, 3, 44, 15]

17. map: 对数组的每个成员做一些操作 返回操作后的新数组

        let array = [1, 12, 3, 44, 15]
        let res = array.map((item, index) => item + 1)
        console.log('res===', res); // [2, 13, 4, 45, 16]
        console.log('array==', array); // [1, 12, 3, 44, 15]

18. forEach:  对数组的每个成员做一些操作 没有返回值 需要自己定义新变量承接结果

        let array = [1, 12, 3, 44, 15]
        let newArray = []
        let res = array.forEach((item, index) => {
            newArray.push(item + 1)
        })
        console.log('res===', res); // undefined
        console.log('array==', array); // [1, 12, 3, 44, 15]
        console.log('newArray==', newArray); // [2, 13, 4, 45, 16]