javascript——数组、对数组的增删改查

数组

slice()

<script>
        var arr = ['孙悟空', '猪八戒', '沙悟净', '唐三藏', '白骨精', '蜘蛛精'];
        // slice(x,y)：用来从数组中提取指定元素。此方法不会改变原数组，
        // 而是将提取到的元素封装到一个新的数组中
        // [x,y):第一个参数是截取的开始位置的索引（包含），第二个参数是截取的结束位置的索引（不包含）
        var newArr = arr.slice(0, 3); //['孙悟空', '猪八戒', '沙悟净']
        // 第二个参数可以不写，此时会截取从开始索引(包含)往后的所有元素。
        newArr = arr.slice(4); //['白骨精', '蜘蛛精']
        // 索引可以是一个负值。如果传递一个负值，则从后往前的计算
        // 截取从索引0开始，第二个参数有负号就是从后往前算，负几就去掉几个
        newArr = arr.slice(0, -2); //['孙悟空', '猪八戒', '沙悟净', '唐三藏']
        console.log(newArr);
    </script>

splice()

<script>
        var arr = ['孙悟空', '猪八戒', '沙悟净', '唐三藏', '白骨精', '蜘蛛精'];
        /* 
        splice()：用于删除数组中的指定元素，会改变原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
        参数：第一个参数表示开始位置的索引；第二个参数表示删除的数量（是包含开始位置的元素）；第三个到第n个参数是要添加的元素，会插入到开始位置的索引前边（替换掉被删除的元素）
        
        */
        //    删除从索引4开始的一个元素
        var newArr = arr.splice(4, 1); //白骨精,数组就变成['孙悟空', '猪八戒', '沙悟净', '唐三藏', '蜘蛛精']
        // 删除从索引4开始的一个元素,再添加一个元素
        newArr = arr.splice(4, 1, '女儿国国王'); //['孙悟空', '猪八戒', '沙悟净', '唐三藏', '女儿国国王']
        // 从索引0开始，删除0个元素，添加一个元素
        newArr = arr.splice(0, 0, '如来佛祖');
        console.log(newArr);
        console.log(arr); //["如来佛祖", "孙悟空", "猪八戒", "沙悟净", "唐三藏", "女儿国国王"]
    </script>

数组去重：

script>
        var arr = [6, 2, 5, 8, 4, 3, 1, 5, 8, 4, 4, 8, 7, 7, 9];
        for (let index = 0; index < arr.length; index++) {
            for (let i = index + 1; i < arr.length; i++) {
                if (arr[index] == arr[i]) {
                    arr.splice(i, 1)
                        // 当删除了一个元素，后面的元素会自动补位，而当前索引位置已经比较过；
                        // 所以下一次比较是从下一个元素开始比较，这样就会漏掉了自动补位的那个数，
                        // 如果是两个以上的相邻的一个数，去重就没有完全去掉
                        // i--：为了保证每次内层循环的的开始位置都是从外层循环的位置开始
                    i--;
                }

            }
        }
        console.log(arr);
    </script>

concat()

<script>
        //    
        var arr1 = ['孙悟空', '猪八戒', '沙悟净', '唐三藏'];
        var arr2 = ['狐狸精', '白骨精', '蜘蛛精', '牛魔'];
        var arr3 = ['二郎神', '玉兔精', '太上老君', '玉皇大帝'];
        // concat()：可以连接两个或多个数组，不仅可以放数组，也可以放单个元素。并将新的数组返回，不会改变原数组
        var newArr = arr1.concat(arr2, arr3, '如来佛祖', '观世音菩萨');
        console.log(newArr);

        console.log(arr1);
    </script>

join()

<script>
        //    
        var arr1 = ['孙悟空', '猪八戒', '沙悟净', '唐三藏'];
        var arr2 = ['狐狸精', '白骨精', '蜘蛛精', '牛魔'];
        var arr3 = ['二郎神', '玉兔精', '太上老君', '玉皇大帝'];
        // join()：该方法可以将数组转换为一个字符串，不会改变原数组,将转换成的字符串作为返回值返回
        // 默认使用，作为连接符，可以指定一个字符串作为参数，作为字符串的连接符
        var newArr = arr1.join();
        console.log(newArr);
    </script>

reverse()

<script>
        //    
        var arr1 = ['孙悟空', '猪八戒', '沙悟净', '唐三藏'];
        var arr2 = ['狐狸精', '白骨精', '蜘蛛精', '牛魔'];
        var arr3 = ['二郎神', '玉兔精', '太上老君', '玉皇大帝'];
        // reverse()：翻转数组的排序,会改变原数组
        var newArr = arr1.reverse();
        console.log(newArr); //["唐三藏", "沙悟净", "猪八戒", "孙悟空"]
        console.log(arr1);
    </script>

sort()

<script>
        var arr = [2, 5, 8, 4, 9, 12, 6, 10, 7];
        // sort()：对数组进行排序（默认按照unicode编码进行排序），会改变原数组
        // 可对字母，数字进行排列，但是对数字进行排序时，可能会得到错误的结果
        // var newArr = arr.sort();
        // console.log(newArr); //[1, 11, 12, 19, 2, 3, 4, 5, 6, 7, 8, 9]
        // 可以在方法中添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，
        // 浏览器将会分别使用数组中的元素作为实参去调用回调函数，
        // 浏览器会根据回调函数的返回值来决定元素的顺序，
        arr.sort(function(a, b) {
            console.log(a); //索引i+1的位置
            console.log(b); //索引i的位置
            // 在hbuilder的内置浏览器中反过来的，a是i，b是i+1；如果返回一个大于0的值，则元素会交换位置，如果返回一个小于0的值，则元素的位置不变
            // 升序：后面的数减去前面的数，大于0不换位置，小于0就换位置
            return a - b;
            // 降序：前面的值减去后面的值，大于0不换位置，小于0就换位置
            // return b - a;
        });

        console.log(arr);
    </script>