前端数组常用的方法

前端数组常用的方法 一、会改变原数组的方法

（以下方法都会改变原数组的元素）

1、头尾增删

arr.push( 元素 )：在arr数组的尾部增加一个元素，并返回新数组的长度

    var arr = [a, b, c]
    var str = arr.push('d')
    console.log(str)  // 4  返回新数组的长度
    console.log(arr)  //[a, b, c, d]

arr.pop()：把arr数组尾部的一个元素删除，并返回删除的这个元素

    var arr = ['a', 'b', 'c']
    var str = arr.pop()
    console.log(str)   // c
    console.log(arr)  //[a, b]

arr.unshift( 元素 )：在arr数组的头部增加一个元素，并返回新数组的长度

    var arr = ['a', 'b', 'c']
    var str = arr.unshift('d')
    console.log(str)   // 4  并返回新数组的长度
    console.log(arr)  //['d', 'a', 'b', 'c']

arrr.shift()：把arr数组头部的一个元素删除，并返回删除的这个元素

    var arr = ['a', 'b', 'c']
    var str = arr.shift()
    console.log(str)   // a
    console.log(arr)  //['b', 'c']

2、排序sort函数

arr.sort()
这样写只会根据元素的第一位的ASCII码升序排序

    var arr = [12, 0, 111, 23, 4]
    arr.sort()
    console.log(arr) //[0, 111, 12, 23, 4]

arr.sort(function(a,b){reutrn a-b})
元素升序排序，调换形参a,b变为降序

    var arr = [12, 0, 111, 23, 4]
    arr.sort(function (a, b) {
      return a - b
    })
    console.log(arr) //[0, 4, 12, 23, 111]

3、splice函数，在指定位置进行增加删除元素

arr.splice(a,b,c……)，可传递多个参数
参数a：数组的起始位置
参数b：删除数组的个数
参数c：可以是多个，在a的位置增减的元素
返回值是删除的元素

	
    var arr = ['a', 'b', 'c', 'd', 'e']
    //传递两个参数
    var newArr = arr.splice(1, 2)
    console.log(newArr)  //['b', 'c']  返回值是删除的元素
    console.log(arr)  //['a', 'd', 'e']

    
    var arr = ['a', 'b', 'c', 'd', 'e']
    //传递多个参数，从第三个开始是增加的元素
    var newArr = arr.splice(1, 0, 'oooo', 'pppp')
    console.log(newArr)  //[] 没删除，返回值是空
    console.log(arr)  //['a', 'oooo', 'pppp', 'b', 'c', 'd', 'e']

4、reverse逆序函数

    var arr = ['a', 'b', 'c', 'd', 'e']
    var newArr = arr.reverse()
    console.log(newArr)  // ['e', 'd', 'c', 'b', 'a']
    console.log(arr)  // ['e', 'd', 'c', 'b', 'a']

二、不会改变原数组的方法

（以下方法都不会改变原数组的元素）

1、forEach函数，遍历循环数组

        var arr = ['a', 'b', 'c', 'd']
        arr.forEach(function (item, index) {
            console.log(item, index)
        })
        // 日志打印值
        // a 0
        // b 1
        // c 2
        // d 3

2、fliter函数，找出符合条件的元素，放到一个数组中，会遍历这个数组

        var arr = ['aa', 'bbbb', 'c', 'dd']
        // 找出字符串是两个的元素
        var newArr = arr.filter(function (item, index) {
            if (item.length == 2) {
                return true
            }
        })
        console.log(newArr) // ['aa', 'dd']

3、map函数，映射，有几个元素，新数组中就会映射出几个元素

        var arr = ['aa', 'bbbb', 'c', 'dd']
        // 映射出对应元素的长度
        var newArr = arr.map(function (item, index) {
            return item.length
        })
        console.log(newArr) // [2, 4, 1, 2]

4、slice函数，裁剪出指定索引区间（左开右闭）的元素，返回裁剪出元素组成的新数组

        var arr = ['aa', 'bbbb', 'c', 'dd']
        var newArr = arr.slice(2, 3)
        console.log(newArr) // ['c']

5、findIndex函数，返回符合条件的一个元素的索引，找到就停

        var arr = ['aa', 'bbbb', 'c', 'dd']
        var index = arr.findIndex(function (item, index) {
            if (item == 'c') {
                return true
            }
        })
        console.log(index) // 2

6、find函数，返回符合条件的一个元素，找到即停

        var arr = ['aa', 'bbbb', 'c', 'dd']
        var newStr = arr.find(function (item, index) {
            if (item == 'c') {
                return true
            }
        })
        console.log(newStr) // c

7、some函数，查找有没有符合条件的元素,有返回true，否则返回false，找到即停

        var arr = ['aa', 'bbbb', 'c', 'dd']
        var flag = arr.some(function (item, index) {
            if (item == 'iii') {
                return true
            }
        })
        console.log(flag) // false

8、every函数，遍历整个数组，条件全部都满足，返回true，只要有不满足的就返回false

        var arr = ['aa', 'bbbb', 'cc', 'dd']
        var flag = arr.every(function (item, index) {
            if (item.length >= 2) {
                return true
            }
        })
        console.log(flag) //true

9、join函数，将数组元素用一个符号连接，并返回连接后的 字符串

        var arr = ['aa', 'bbbb', 'cc', 'dd']
        var flag = arr.join('-') //里面不指定符号，默认是逗号
        console.log(flag) //aa-bbbb-cc-dd

10、reduce函数，可实现数组的累加

        var arr = [1, 2, 3, 4]
        //  sum 用于累加的容器
        var flag = arr.reduce(function (sum, item, index) {
        sum += item
            return  sum  // 将sum 返回下一次循环继续累加
        }，0)  // 0 是累加容器的初始值
        console.log(flag) //10