美文网首页
JavaScript数组

JavaScript数组

作者: 阿九是只大胖喵 | 来源:发表于2017-02-24 08:34 被阅读0次

    创建一个数组两种常用的方式:字面量方式,和实例创建方式。

    var ary = [1, 2, 3, 4]; // 字面量方式创建数组
    var ary = new Array(); // 实例方式创建数组
    // 看数组的详细信息,包含数组中常用的几个方法(__proto__中找,里面提供了数组中常用的所有方法)
    console.dir(ary);
    

    数组是由多个项组成的,每一项之间用","隔开,并且每一项存储的数据类型,可以是任何的数据类型。

        var ary = ['derrick', 'rose', 30, true, null, undefined, {}, function(){}, []];
        console.log(ary);
    

    数组也是对象数据类型的,对象数据类型是由"属性名: 属性值"组成,数组中代表当前第几项的那个数字(0, 1, 2...)是它的,属性名,把它也可以称之为数组的索引。
    ary[索引],就是获取 "第 索引+1 "项对应的内容。
    如果写的索引超过了总长度,则返回 undefined。

        // ary.length/ ary["length"]: 获取数组的长度
        console.log(ary[1]);
    

    数组的遍历

        var ary = ['derrick', 'rose', 'sg'];
        for (var i = 0; i < ary.length; i++) {
            // i = 0 -> 第一项 ary[0]
            // i = 1 -> 第二项 ary[1]
            // ...
            // ary[i] 在每一次循环的时候获取数组中的当前项
            console.log(ary[i]);
        }
    

    数组中常用的方法
    学习方法:

    1. 方法是做什么用的,实现的是什么功能
    2. 传递的参数是什么
    3. 返回值是什么
    4. 原来的数组是否发生了改变

    对于数组:

    var ary = [10, 12, 13, 11, 19, 17];
    

    来对这个数组进行数组中常用方法等操作。

    第一组:关于数组的增加、删除、修改

    1. push() -> 向数组末尾添加新的内容,返回的内容是添加后新数组最终的长度,原有的数组改变了。
        var res = ary.push(16, 10);
        console.log(ary); // 10, 12, 13, 11, 19, 17, 16, 10
        console.log(res); // 返回值是数组的长度
    
    1. unshift() -> 向数组开头增加新的内容,返回的内容是添加后新数组最终的长度,原有的数组改变了。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.unshift(1, 2);
        console.log(ary); // 1, 2, 10, 12, 13, 11, 19, 17
        console.log(res); // 8
    
    1. splice(n, 0, x) -> 向数组的中间某个位置添加新内容,从索引n开始,删除0个内容,把新增加的内容x放在索引n的前面,返回的是空数组,原有数组改变。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.splice(2, 0, 100);
        console.log(ary); // 10, 12, 100, 13, 11, 19, 17
        console.log(res); // 空
    

    splice(n, m) -> 删除数组中指定的某些项,从索引n开始(包含n),删除m个元素,把删除的内容当做一个新的数组返回,原有数组改变。

        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.splice(2, 2);
        console.log(ary); // 10, 12, 19, 17
        console.log(res); // [13, 11]
    

    splice(n, m, x) -> 把原有数组中的某些项进行替换,先删除,然后用x替换,从索引n开始删除m个元素,然后用x替换原来的,返回是删除的元素。

        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.splice(2, 2, 'a');
        console.log(ary); // 10, 12, 'a', 19, 17
        console.log(res); // [13, 11]
    

    规律:splice(0, 0, x) -> 相当于我们的unshift(),splice(ary.length, 0, x); -> 相当于push()

    1. pop() -> 删除数组最后一个,返回的是删除的那一项,原有数组改变。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.pop();
        console.log(ary); // 10, 12, 13, 11, 19
        console.log(res); // 17
    
    1. shift() -> 删除数组第一个,返回的是删除的那一项,原有数组改变。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.shift();
        console.log(ary); // 12, 13, 11, 19, 17
        console.log(res); // 10
    

    第二组:数组的查询和复制

    1. slice(n, m) -> 从索引n开始(包含n),找到索引m初(不包含m),然后把找到的内容作为一个新的数组返回,原有数组不变。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.slice(2, 5);
        console.log(ary); // 10, 12, 13, 11, 19, 17
        console.log(res); // 13, 11, 19
        // slice(n) -> 从索引n开始(包含n),查找到数组的末尾
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.slice(2);
        console.log(ary); // 10, 12, 13, 11, 19, 17
        console.log(res); // 13, 11, 19, 17
        // slice(0)或者slice() -> 将原有的数组原封不动的复制一份,属于数组的克隆
    
    1. concat() -> 也可是实现数组的克隆,原来的数组不改变(相当于slice(0))。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.concat();
        console.log(ary); // 10, 12, 13, 11, 19, 17
        console.log(res); // 10, 12, 13, 11, 19, 17
    

    concat() 的本意是实现数组的拼接, ary.concat(ary2) -> 将数组ary和ary2拼接成一个数组。

        var ary2 = ['a', 'b', 'c'];
        ary.concat(ary2);
        console.log(ary); // 10, 12, 13, 11, 19, 17, 'a', 'b', 'c'
    

    第三组:将数组转化为字符串

    1. toString() -> 把数组中的每一项拿出来,用","隔开,原有数组不发生改变。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.toString();
        console.log(res); // 10, 12, 13, 11, 19, 17
    
    1. join(分隔符) -> 把数组中的每一项拿出来,用指定分隔符隔开。
        var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.join('+');
        console.log(res); // 10+12+13+11+19+17
        // 实现数组中数字的求和
        var ary = [10, 12, 13, 11, 19, 17];
        var str = ary.join('+');
        console.log(eval(str)); // eval() -> 将指定的字符串变成真正的表达式执行
    

    第四组:数组的排列和排序,以及查找

    1. reverse() -> 数组倒过来排列,原有的数组改变。
       var ary = [10, 12, 13, 11, 19, 17];
        var res = ary.reverse();
        console.log(res); // 17, 19, 11, 13, 12, 10
        console.log(ary); // 17, 19, 11, 13, 12, 10
    
    1. sort() -> 数组排序,可以实现由大到小,也可以实现有小到大,原有的数组发生改变。
        var ary = [10, 12, 23, 6, 19, 17];
        ary.sort();
        console.log(ary); // 10,12,17,19,23,6
    

    处理10以上的数字,我们需要哦这么做,需要传递一个参数,这个参数是一个函数。

        var ary = [10, 12, 23, 6, 19, 17];
        ary.sort();
        console.log(ary); // 10,12,17,19,23,6
    
        // 处理10以上的数字,我们需要哦这么做,需要传递一个参数,这个参数是一个函数
        var ary = [10, 12, 23, 6, 19, 17];
        ary.sort(function (a, b) {
            // 有6项,循环5次
            // a 代表的是每一次循环的时候,当前的这个项
            // b 代表的是后面的那个项
            // return a - b; -> 让当前项减去后一项,如果大于0,代表前面的比后面大,
            // 这样的话,就交换位置
            // 这种机制叫做冒泡排序:sort()实现排序就是遵循的冒泡排序的思想实现的
            return a - b; // 由小到大排序
        });
        console.log(ary); // 6, 10, 12, 17, 19, 23
    
        var ary = [10, 12, 23, 6, 19, 17];
        ary.sort(function (a, b) {
            return b - a; // 由大到小
        });
        console.log(ary); // 23,19,17,12,10,6
    

    第五组:一些常用但是不兼容的
    indexOf(), forEach(), map()


    实例:数组去重

    <script>
        // 数组去重
        var ary = [1, 2, 1, 2, 3, 4, 2, 1, 5, 3, 2, 1];
        for (var i = 0; i < ary.length - 1; i++) {
            var cur = ary[i];
            // i = 0 -> 第一次循环 开始比较的索引是1,一直到末尾
            // i = 1 -> 第二次循环 开始比较的索引是2,一直到末尾
            // ...
            // 当开始比较的索引 是i + 1
            // 数组塌陷问题:通过splice删除,原有的数组改变了,删除的那个索引以后所有的索引都往前提了一位
            for (j = 1; j < ary.length; j++) {
                if (cur === ary[j]) {
                    ary.splice(j, 1);
                    j--;
                }
            }
        }
        console.log(ary);
    
        // 方法二
        // 把数组中的每一项当做一个新对象的属性名和属性值存起来,在存储的时候判断当前的属性名是否已经存在,
        // 存在了就代表数组该项重复了,我们就删除,否则就代表不重复,直接存储
        var ary = [1, 2, 1, 2, 3, 4, 2, 1, 5, 3, 2, 1];
        var obj = {};
        for (var i = 0; i < ary.length; i++) {
            var cur = ary[i];
            if (obj[cur] == cur) {
                ary.splice(i, 1);
                i--;
                continue;
            }
            obj[cur] = cur;
        }
        obj = null
    
    </script>
    

    相关文章

      网友评论

          本文标题:JavaScript数组

          本文链接:https://www.haomeiwen.com/subject/janbwttx.html