Javascript数组的方法

数组常用方法

1、join()方法
把数组拼接起来，以字符串的方式进行返回，如果不给参数，默认以逗号进行间隔。

var arr = ['kai', 'ke', 'ba']
        arr.join()
        console.log(arr.join()); //kai,ke,ba
        console.log(arr.join("")); //kaikeba

2、concat()方法
concat - 合并多个数组,并返回一个新数组，不会改变原有数组。

var arr1 = [1,2,3]
        var arr2 = [4,5,6]
        var arr3 = ['ba']
        console.log(arr1.concat(arr2));//[1,2,3,4,5,6]

3、indexOf()方法

    var arr = ['a', 'b', 'c', 'a']
        console.log(arr.indexOf('a'));//0
        console.log(arr.indexOf('vv'));//-1
        console.log(arr.indexOf('a', 1));//3

        /*
           indexOf(searchValue,formIndex)
               - 查找目标字符串中，是否包含searchValue，如果包含，返回第一次出现的索引，否则返回-1
               - searchValue 要查找的值
               - formIndex 查找的起始位置 如果不填，默认为0
                           如果大于或者等于length,返回-1
                           如果是一个负数，根据倒数来确认
                           length + formIndex
        */

4、lastIndexOf()方法

var arr = ['a', 'b', 'c', 'a']
        console.log(arr.lastIndexOf('a'));
        console.log(arr.lastIndexOf('a', arr.length - 2));
        console.log(arr.lastIndexOf('a', 50));

        /*
              lastIndexOf(searchValue,formIndex)
                  - 用于返回查找的指定值对应的最后一个索引，从后往前查找
                  - searchValue
                      需要查找的字符串
                  - formIndex 
                      起始搜索的位置（从后往前）如果不给，默认为arr.length
                      如果超过arr.length,则为arr.length
                      如果小于零 返回0
                      如果找不到指定的值 返回-1
           */

5、reverse()方法

        var arr = ['a', 'b', 'c']
        console.log(arr);
        arr.reverse()
        console.log(arr);

        /*
            reverse - 会把数组中的所有内容颠倒过来，并且返回一个新的数组，会改变原有的数组
        */

6、slice()方法
var arr = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’]
console.log(arr.slice());
console.log(arr.slice(2)); //[‘c’, ‘d’, ‘e’]
console.log(arr.slice(50)); //[]
console.log(arr.slice(-2)); //[‘d’, ‘e’]
console.log(arr.slice(-50)); //[‘a’, ‘b’, ‘c’, ‘d’, ‘e’]
console.log(arr.slice(2, 3)); //[‘c’]

    /* 
        str.slice(begin,end)
           用于截取数组中的内容，返回一个新数组
            - begin 
                - 截取的起始位置，
                - 不给默认为0,可以接收负数，
                - 如果是负数（如果负数，达到了-length,那么再小的值，起始值都会被设为0），
                  则会倒数n位，进行截取
            - end 
                - 截取的结束位置，默认为length（如果超过了length默认为length）
                - 负数的值也是可以的,(如果超过-length，那么为0)

            begin 是包含在begin字符串内的，但是end是不包括的.
                - 如果end对应的索引处在begin的前面，这时候会返回一个空的字符串
                - begin如果超出了length,则会返回空字符串
                - 如果begin和end是处在同一个索引上的，这时候也会返回空字符
                - 如果小于begin,会得到一个空字符
                - 如果超过length，默认也只到数组的结尾

            - 返回的是所有的字符串
    */

基础添加和删除

1、在结尾

1. pop()方法

 var arr = [1, 2, 3, 4, 5, 6, 7]
        console.log(arr);
        var len = arr.pop()
        console.log(arr);//[1, 2, 3, 4, 5, 6]
        console.log(len);

        /*
             pop 
                - 用于删除数组中最后一位元素,返回被删除的元素
                - 如果用在空数组上返回值是undefined
        */

2. push()方法

        var arr = [1, 2, 3, 4]
        console.log(arr);
        arr.push(5)
        console.log(arr);
        var len = arr.push(6, 7, 8)
        console.log(arr);
        console.log(len);

        /*
             push 
                - 往数组的末尾添加一个或多个元素,返回当前被修改后的数组的长度，会改变原数组
        */

2、在开头

1. shift()方法

var arr = [1, 2, 3, 4, 5, 6]
        console.log(arr);
        arr.shift()
        console.log(arr); //[ 2, 3, 4, 5, 6]
        var len = arr.shift()
        console.log(arr); //[3, 4, 5, 6]
        console.log(len); //2

        /*
             shift
                - 删除数组的第一个元素，
                - 如果是一个空数组调用后返回undefined,如果不是返回删除的元素值
        */

3. unshift()方法

  var arr = [1, 2, 3]
        console.log(arr);
        arr.unshift(4)
        console.log(arr);
        var len = arr.unshift(4, 5, 6)
        console.log(arr);
        console.log(len);

        /*
             unshift
                - 将一个或多个元素添加到数组的开头
                - 返回值是新数组的长度
        */

数组进阶方法

1、splice()方法

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

        //删除
        // arr.splice(1, 2)
        // console.log(arr);// [1, 4, 5, 6]

        //替换
        arr.splice(1, 2, 'a', 'b')
        console.log(arr); // [1, 'a', 'b', 4, 5, 6]


        arr.splice(50)
        console.log(arr); //[1, 'a', 'b', 4, 5, 6]

        arr.splice(1, 0)
        console.log(arr); //[1, 'a', 'b', 4, 5, 6]
        arr.splice(1, NaN)
        console.log(arr); //[1, 'a', 'b', 4, 5, 6]

        arr.splice(-2)
        console.log(arr); //[1, 'a', 'b', 4]
        arr.splice(-50)
        console.log(arr); //[]

        //添加 ，如果不删除元素，但是又存在第三个或者3+的参数，就会有添加的功能
        var str = [1, 2, 3, 4, 5, 6]
        console.log(str);
        str.splice(1, 0, 'a', 'b', 'c')
        console.log(str); //[1, 'a', 'b', 'c', 2, 3, 4, 5, 6]
        console.log(str.splice(1, 2));


        /* 
            splice(start,num,item1,item2,...)
               - start 删除的起始位置
                       如果start大于length,就是不删除，
                       如果是一个负数(值超过长度，则起始位置被设为length)，从右到左查找对应的起始位置
                       length + start
               - num 可选，默认删除到数组的末尾，表示删除的个数
                       如果小于0或者NaN,不删除如何一个元素
               - item1,item2,... 从删除位置，添加第二个参数后的内容

               返回值是多有删除的元素组成的数组，如果没有三处任何元素将会得到一个空数组
        */

数组排序

1、sort()随机排序

        var arr = [1, 3, 5, 9, 2, 4]
        console.log(arr);
        arr.sort()
        console.log(arr.sort());

        var num = [6, 50, 12, 40]
        num.sort()
        console.log(num);
        num.sort(function(a, b) {
            console.log(a, b);
            return a - b //[6, 12, 40, 50]
                // return b - a //[50, 40, 12, 6]
        })
        console.log(num);

        /*
            sort()
              - 如果不提供任何的参数，根据默认规则进行排序（根据unicode来进行排序）
              - 如果提供参数，我们可以指定排序的规则
                  - a
                  - b
                  a和b代表两个在比较的值

                  如果a-b的结果
                      大于0：b排到a前面
                      小于0：a排到b前面
                      等于0：a和b位置不变

        */
        var arr2 = ['A', 'a', 'b', 'B']
        arr2.sort()
        console.log(arr2); //['A', 'B', 'a', 'b']

        var arr3 = ['A', 'B', 'a', 'b']
        arr3.sort(function(a, b) {
            var a = a.toLowerCase()
            var b = b.toLowerCase()
            if (a > b) {
                return 1
            } else if (a < b) {
                return -1
            }
        })
        console.log(arr3); //['A', 'a', 'B', 'b']

新增数组方法

1、filter()方法

var arr = [10, 20, 4, 50, 60, 75]
        var num = []

        for (var i = 0; i < arr.length; i++) {
            if (arr[i] >= 50) {
                num.push(arr[i])
            }
        }
        console.log(num);

        arr.filter(function(ele, index, arr) {
            console.log(ele, index, arr);
        })

        arr.filter(function(ele, index, arr) {
            console.log(this);
            // console.log(ele, index, arr);
            // return true
            return ele >= 50
        }, document)


        /*
             filter()
                 - 筛选出符合函数中条件的元素，并作为一个新数组返回
         */

2、every()方法

        /*
            every(callback)
                测试数组中所有元素都通过了指定的函数测试，结果返回布尔值
                - callback 用于测试的函数
                      - callback 执行函数
                      - ele 数组循环中的元素
                      - index 元素对应下标
                      - array 当前正在操作的数据
                - thisAry 决定callback中的this指向

                对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true
         */

3、forEach()方法

        var arr = ['a', 'c', 'vv', 'l']

        // arr.forEach(r => {
        //     console.log(r);
        // })
        //循环或者遍历
        arr.forEach(function(ele, index, arr) {
            console.log(ele, index, arr);
        })


        arr.forEach(function(ele, index, arr) {
            console.log(this);
        }, arr)

        var a = arr.forEach(function(ele, index, arr) {
            console.log(this);
        }, document)
        console.log(a); //undefined

        /*
           arr.forEach(callback,thisArg) 
                 - 读数组中的每一个元素，执行一提供的函数
                 - callback 函数
                   - ele 循环过程中的每一位元素
                   - index 当前循环的元素对应的下标值
                   - arr 调用forEach的当前数组
                 - thisArg 控制当前callback中的this指向

                 返回值为undefined
        */

4、map()方法

var arr = [10, 20, 4, 50, 60, 75]
        var num = []
        for (var i = 0; i < arr.length; i++) {
            num.push(arr[i] * 2)
        }

        arr.map(function(ele, index, arr) {
            console.log(this);
            console.log(ele, index, arr);
        }, document)

        var newArr = arr.map(function(ele, index, arr) {
            // console.log(this);
            // console.log(ele, index, arr);
            return ele
        })
        console.log('newArr', newArr);

        /*
              map
                 - 由数组中的每一位元素的执行函数后的结果，作为新数组的值
         */

5、reduce()方法

var arr = [10, 20, 4, 50, 60, 75, 3]
        var num = 0
        for (var i = 0; i < arr.length; i++) {
            num += arr[i]
        }
        console.log(num);

        var num2 = arr.reduce(function(result, ele, index) {
            console.log(result, ele, index);
            return result + ele
        })
        console.log(num2);

        var num3 = arr.reduce(function(result, ele, index) {
            console.log(result, ele, index);
            return result + ele
        }, 0)

        /*
           arr.reduce(callback[,initValue])
                对数组中的每一个元素执行callback函数，将结果根据callback函数中的条件，返回单个值
                - callback 执行的函数
                    - result 结果
                    - ele 当前正在循环的元素
                    - index 当前正在循环的元素对应的索引值

                - initValue 可选对result进行初始化

                10 20 1
                undefined 4 2
                undefined 50 3
                undefined 60 4
                undefined 75 5
                undefined 3 6

                undefined 出现的原因是因为我们没有把结果return给result接收

                 10 20 1
                30 4 2
                34 50 3
                84 60 4
                144 75 5
                219 3 6

         */

6、some()方法

/*
            some(callback)
                测试数组中是否至少有一个元素通过了指定函数的测试，结果返回布尔值
                - callback 用于测试的函数
                      - callback 执行函数
                      - ele 数组循环中的元素
                      - index 元素对应下标
                      - array 当前正在操作的数据
                - thisAry 决定callback中的this指向

                every:一假即假:
                some:一真即真 
                是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。


                some一直在找符合条件的值，一旦找到，则不会继续迭代下去。
                every从迭代开始，一旦有一个不符合条件，则不会继续迭代下去。
         */