JavaScript中的数组

100 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情

在js中数组也是一个对象, 是一个特殊的对象, 用来存储一组数据

数组中的内容我们称之为元素, 每个元素都对应自己的整型下标

数组的下标从0开始

创建数组

创建数组有两种方式

1: let/var 数组名 = new Array();

2: let/var 数组名= [];

添加元素

添加元素 数组名[索引] = 值;

我们可以向数组中添加任意类型的元素, 例如: 基本数据类型, 对象, 函数等

数组的长度

数组的长度就是数组中元素的个数

我们可以通过数据的长度来获取数组的最后一个元素

也可以通过数据的长度来实现向数组末尾添加元素

如果我们修改数组的长度大于原来的长度, 则数组剩余的内存会空出来

如果数组的长度小于原来的长度, 则会删除原数组中多余的元素

        // 创建数组
        let arr = new Array()
        
        // 向数组中添加元素
        arr[0] = 1;
        arr[1] = true;
        arr[2] = 3.14;
        arr[3] = null;
        arr[4] = undefined;
        arr[5] = {name: 'shaosiming', age: 18};
        arr[6] = function() {
            console.log('hello world');
        }

        // 访问数组中的元素
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr[3]);
        console.log(arr[4]);
        console.log(arr[5]);
        console.log(arr[6]);

        // 创建数组的第二种方式: 字面量
        let arr2 = [1, 2, 3, 4, 5]

        arr2[9] = 10;

        console.log(arr2); // (10) [1, 2, 3, 4, 5, 空属性 × 4, 10]

        // 数组的长度
        console.log(arr2.length);

        // 修改数组的长度
        arr2.length = 20;
        console.log(arr2); // (20) [1, 2, 3, 4, 5, 空属性 × 4, 10, 空属性 × 10]

遍历数组

对于foreach的回调函数来说, element就是数组中的元素, idx就是元素对应的索引, obj就是当前遍历的数组对象

        // 使用for循环遍历数组中的元素
        for (let i = 0; i < arr.length; i++) {
            const element = arr[i];
            console.log(element);
        }

        // 使用foreach遍历数组中的元素
        arr.forEach((element, idx, obj) => {
            console.log('foreach: ' + obj + ', ' + idx + ':' + element);
        });

数组中的方法

pop

删除数组的最后一个元素, 返回被删除的这个元素

push

向数组中的末尾添加元素, 可以添加一个或多个, 并返回最新的数组长度

unshift

向数组中的头部添加元素, 可以添加一个或多个, 并返回最新的数组长度

shift

删除数组最开始的一个元素, , 并返回被删除的这个元素

slice

从原来的数组中截取一段当作一个新数组返回, 不会影响原数组

第一个参数为开始索引, 包括这个位置的元素

第二个参数为结束索引, 不包括这个位置的元素

如果不传第二个参数, 则从开始索引到数组的最后一个索引

如果第二个参数是负数, 则从数组的最后往前计算索引

splice

第一个参数为删除开始位置的索引, 第二个参数为删除的个数, 从第三个参数开始为新添加的元素

        let arr3 = [1, 2, 3, 4, 5];

        let res = null;

        // pop方法
        res = arr3.pop();
        console.log(arr3);
        console.log('pop: ' + res);

        // push方法
        res = arr3.push(11, 22, 33);
        console.log(arr3);
        console.log('push: ' + res);

        // unshift方法
        res = arr3.unshift(11, 22, 33);
        console.log(arr3);
        console.log('unshift: ' + res);

        // shift方法
        res =arr3.shift();
        console.log(arr3);
        console.log('shift: ' + res);

        // slice方法
        res = arr3.slice(1, 4);
        console.log(arr3);
        console.log('slice: ' + res);

        // slice方法, 不传第二个参数
        res = arr3.slice(1);
        console.log(arr3);
        console.log('slice: ' + res);

        // slice方法, 第二个参数为负数
        res = arr3.slice(1, -2);
        console.log(arr3);
        console.log('slice: ' + res);

        // splice方法, 只删除元素
        res = arr3.splice(2, 3);
        console.log(arr3);
        console.log('splice: ' + res);

        // splice方法, 删除元素和添加元素
        res = arr3.splice(2, 3, 111, 222, 333);
        console.log(arr3);
        console.log('splice: ' + res);

reverse

将一个数组的元素反转过来, 影响原来的数组

contact

连接两个或多个数组, 返回一个新的数组, 不会影响原来的数组

join

将一个数组对象, 转换为一个字符串

接收一个字符串参数, 用来分割数组中的元素

如果不传入参数, 则默认使用逗号分割

sort

可以传入一个回调函数, 用来控制数组中的元素以什么顺序排列

回调函数中有两个参数, 如果是a-b则是升序排列, b-a则是降序排列

如果不传入回调函数, 则按unicode编码比较并排序

注意: 这里尽量传入自己的比较规则, 比如数组中的元素为数组, 它不会按照从大到小或从小到大的顺序排列

        let arr4 = [1, 2, 3, 4, 5];
        let arr5 = [16, 7, 8];

        // reverse
        res = arr4.reverse()
        console.log(arr4);
        console.log('reverse: ' + res);

        // join
        res = arr4.join()
        console.log(arr4);
        console.log('join: ' + res);

        // join传递分割符
        res = arr4.join('#')
        console.log(arr4);
        console.log('join: ' + res);

        // contact
        res = arr4.concat(arr5);
        console.log(arr4);
        console.log('contact: ' + res);

        // sort
        res = res.sort()
        console.log(res);
        console.log('sort: ' + res);

        // sort传递回调函数
        res = res.sort(function(a, b) { return a - b; })
        console.log(res);
        console.log('sort: ' + res);