重点-内置对象--数组对象

之前创建数组的两种方式

• 字面量方式
• new Array()

    <script>
        //之前创建数组的两种方式
        var array = [1, 2, 3];
        console.log(array[0]);
        //var arr1 = new Array(2); 创建了一个空数组,这个2表示数组的长度为2，里面有2个空的数组元素
        var arr1 = new Array(2, 3); //现在数组里有2和3两个元素了，等价于[2,3]
        console.log(arr1);
    </script>

image.png

1.instanceof 运算符 它可以用来检测是否为数组，返回值是true、false
2.Array.isArray();返回值跟上面面一样，也是true、false（IE9以上才支持）

    <script>
        //检测是否维数组的两种方式
        //1. instanceof
        //var arr = [];
        //console.log(arr instanceof Array); //检测arr是否维数组，返回值为true
        function reverse(arr) {
            if (arr instanceof Array) {
                var newArr = [];
                for (var i = arr.length; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            } else {
                return '参数要求必须是数组格式';
            }
        }
        console.log(reverse(1, 2, 3));
        console.log(reverse([1, 2, 3]));

        //2.Array.isArray();返回值跟上面面一样，也是true、false
        var arr = [1, 2, 3];
        console.log(Array.isArray(arr));
    </script>

方法	说明	返回值
push(参数1...)	末尾添加一个或多个元素，注意修改原数组	返回新的长度
pop()	删除数组最后一个元素，把数组长度 - 1， 无参数，修改原数组	返回他删除的元素的值
unshift(参数1...)	向数组的开头添加一个或多个元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度 - 1，无参数、修改原数组	并返回第一个元素的值

    <script>
        //添加删除数组元素的方法
        //1.push();在数组的末尾，添加一个或多个元素
        var arr = [1, 2, 3];
        console.log(arr.push(4, '张三'));
        console.log(arr);
    </script>

push之后，返回值是追加新元素之后的新数组长度

image.png

        //unshift(); 在数组开头添加新元素
        var arr1 = [1, 2, 3];
        console.log(arr1.unshift(4, '张三'));
        console.log(arr1);

unshif也有返回值，返回新数组的长度

image.png

一次只能删除一个
pop();没有参数

        //pop(); 删除数组的最后一个元素，无参数
        var arr2 = [1, 2, 3, 4, '张三'];
        console.log(arr2.pop());
        console.log(arr2);

image.png

每次也是删除一个
shift也是没有参数的
返回值也是被删除的元素

        var arr3 = [1, 2, 3, 4, '张三'];
        console.log(arr3.shift());
        console.log(arr3);

image.png

有一个包含工资的数组[1500,1200,2000,2100,1800];要求把数组中工资超过2000的删除，剩余的放到新数组里

        var arr = [1500, 1200, 2000, 2100, 1800];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < 2000) {
                //newArr[newArr.length] = arr[i];这是之前的写法
                newArr.push(arr[i]); //现在有了push之后更简单，效果完全一样
            }
        }
        console.log(newArr);

image.png

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

sort();排序存在问题：会先比较个位数，把个位数值最小的放前面，然后再比较更高位。所以，用sort排序有自己的固定写法：加一个函数,这是一个固定写法

    <script>
        //数组排序
        //1.翻转数组
        var arr = ['red', 'blue', 'yellow'];
        arr.reverse();
        console.log(arr);
        //2.数组排序(冒泡排序)
        //sort();排序存在问题：会先比较个位数，把个位数值最小的放前面，然后再比较更高位。所以，用sort排序有自己的固定写法：加一个函数,这是一个固定写法
        var arr1 = [3, 4, 78, 1, 17];
        //arr1.sort();
        arr1.sort(function(a, b) { //按升序的顺序排列，要降序就b-a就可以了
            return a - b;
        });
        console.log(arr1);
    </script>

image.png

方法名	说明	返回值
indexOf();	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，返回-1
lastindexOf();	在数组中的最后一个索引	如果存在返回索引号，如果不存在，则返回-1

indexOf();返回索引，如果数组中存在重复的元素，则只会返回第一个满足条件元素的索引，后面重复的元素索引不返回
如果数组中不存在满足条件的元素，返回值是-1

lastIndexOf();与indexOf();唯一一点不同的是，这个是从数组的后面往前查找，返回的也就是最后一个满足条件的元素索引

    <script>
        //indexOf();返回数组的索引
        var arr = ['red', 'green', 'blue', 'pink'];
        console.log(arr.indexOf('blue'));
        console.log(arr.indexOf('bluesky'));

        //lastIndexOf();与indexOf();唯一一点不同的是，这个是从数组的后面往前查找，返回的也就是最后一个满足条件的元素索引
        var arr1 = ['red', 'green', 'blue', 'pink', 'blue'];
        console.log(arr1.lastIndexOf('blue'));
        console.log(arr1.lastIndexOf('bluesky'));
    </script>

image.png

原理分析：遍历旧数组，然后用旧数组元素去查询新数组，如果在新数组中有重复的就不添加
可以用indexOf();判断新数组中有没有这个元素

    <script>
        //案例：数组去重(重点案例) 
        //要求去除数组中重复的元素

        //封装一个去重函数 unique 独一无二的
        function unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
        console.log(demo);
    </script>

image.png

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分割每一项	返回一个字符串
join('分隔符')	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

    <script>
        //数组转换为字符串
        //toString()
        var arr = [01, 2, 3];
        console.log(arr.toString());
        console.log(typeof arr.toString());
        //join(分隔符)
        var arr1 = ['green', 'blue', 'pink'];
        console.log(arr1.join()); //默认是逗号(不给参数)，这里给-分隔符就是-
        console.log(arr1.join('-'));
    </script>

image.png

方法名	说明	返回值
concat()	连接两个或多个数组 不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始，要删除个数)	返回被删除此项目的新数组，注意，这个会影响原数组