JavaScript中对数组的各种操作方法

前端开发那些事
字数统计: 2.1k   |   阅读时长≈ 8 分钟

数组是最简单的内存数据结构。JavaScript里也有数组类型，它可以储存一系列值。在JavaScript中，可以在数组中保存不同类型的值，尽管不建议这么做，但大多数语言都没有这个能力。

这里记载一下JavaScript中数组的一些常见用法，以及在ES6+中新增的方法。

数组的增删改查

增：声明、创建和初始化数组，使用new关键字。

1
2
3
let arr = new Array();
let arr2 = new Array(233);
let arr3 = new Array('a', 'b', 'c');

其实也可以直接使用一个中括号来声明。

1
let arr = [];

增也可以理解为从数组中增加元素。分为在末尾插入，在开头插入，从中间任意位置插入。

1
2
3
arr.push(); // 从末尾插入
arr.unshift(); // 从开头插入
arr.splice(3, 0, 1, 2, 3); // 从索引3开始，插入值1, 2, 3（第二个参数是要删除的长度，这里不删除所以写0）

删：从数组中删除元素。

删除分为从末尾删除，从开头删除，从中间任意位置删除。

1
2
3
arr.pop(); // 从末尾删除
arr.shift(); // 从开头删除
arr.splice(2, 3); // 从索引2开始，连续删除包括此索引在内的后3个元素

改：修改数组中元素的值。

可以直接通过下标访问数组的元素，并对其赋值，这里和其他传统语言是一样的。

1
arr[2] = 5;

查：搜索数组中的元素。

搜索有两个方法，indexOf方法返回与参数匹配的第一个元素的索引，lastIndexOf方法返回与参数匹配的最后一个元素的索引。

比如一个数组是[2,3,3,3]，使用第一个方法查找3返回1，使用第二个方法查找3返回3。

在ES6中，有了两个新的方法。

1
2
3
4
5
6
7
arr.find(func); // 接收一个回调函数，搜索第一个满足回调函数条件的值
arr.findIndex(func); // 接收一个回调函数，搜索第一个满足回调函数条件的索引

// 回调函数示例
const func = (ele, idx, arr) => {
  return (ele % 13 === 0);
}

如果没有符合条件的值，find将返回undefined，findIndexOf将返回-1。

ES7中新增了includes方法，判断数组中是否存在某个元素，有返回true，没有返回false，很好理解。

多维数组

JavaScript只支持一维数组，并没有矩阵，但是可以利用数组内能放任何类型数据的特性，让每个数据元素都是一个数组，就能做到二维数组的效果了。

输出二维数组时除了使用传统的二重循环，也可以使用console.table()获得更好的观感。

JavaScript数组特色方法

在JavaScript里，数组是经过改进的对象，这意味着创建的每个数组都有一些可用的方法。

  • 数组合并

    适用于多个数组合并成一个数组，使用concat方法。此方法向一个数组中传递数组，对象或者元素，此方法将按照给定的顺序连接所有元素。

    1
    arr.concat(brr, crr, drr, err);

  • 迭代器函数

    迭代数组中的元素可以使用循环语句，也可以使用内置的迭代器。

    every方法接受一个函数，从头开始尝试迭代数组中的每个元素，直到有一个返回false。

    some方法与every方法相反，会迭代数组的每个元素，直到有一个返回true。

    forEach方法无论返回什么，都会把整个数组迭代完，可以理解为for循环的另一种表现形式。

    map方法和filter方法是两个能够返回新数组的迭代方法，依然是传入一个函数，map方法返回一个只含有true或false的数组，长度与原数组一致，代表每个元素经过函数操作后的返回值，而filter函数返回的数组是原来数组的子集，代表通过函数操作后返回true的值。

    reduce方法接收一个有以下四个参数的函数：previousValue，currentValue，index，array，后两个参数是可选的。这个函数会返回一个将被叠加到累加器的值，方法停止执行后会返回这个累加器。如果要对一个数组中所有元素求和，这个就比较有用。

    1
    2
    3
    4
    5
    6
    arr.every(func);
    arr.some(func);
    arr.forEach(func);
    let brr = arr.map(func);
    let crr = arr.filter(func);
    arr.reduce((previoius, current) => previous + current);

  • for…of

    这个做项目经常用了，直接用数组中的元素作为迭代中的i。

  • @@iterator对象

    通过Symbol.iterator访问，大概是这样：

    1
    2
    let iterator = arr[Symbol.iterator]();
    console.log(iterator.next().value;

    不断地调用下面的next方法，就可以依次得到数组的值。数组迭代结束之后next方法就返回undefined。

  • 获取迭代器

    数组的entries方法返回包含键值对的@@iterator，使用next方法得到元素之后可以调用key属性获取位置（下标），value属性获取值。

    1
    2
    3
    4
    let test = arr.entries();
    for (const n of test) {
      console.log(n)
    }

    键值对在构造数据结构的时候是很有用的。

    数组的keys方法返回包含数组索引的@@iterator，values方法返回的@@iterator包含数组的值。它们返回的属性名都是value，同时还附带一个done属性。

    1
    2
    3
    const testk = arr.keys();
    const testv = arr.values();
    console.log(testk.next(), testv.next());

    一旦没有可迭代的值，value会变成undefined，done会变成true。

以上所有方法为ES6+实现，如果浏览器不支持，需要上Babel。

  • from方法

    Array.from方法根据已有的数组创建一个新数组，还可以传入一个用来过滤值的函数。

    1
    2
    let arr2 = Array.from(arr);
    let arr3 = Array.from(arr, filterFunc);

  • Array…of方法

    根据传入的参数创建一个新数组，配合展开运算符...也可以起到复制数组的作用。

    1
    2
    let arr = Array.of(1, 2, 3, 4);
    let arrCopy = Array.of(...arr);

  • fill方法

    使用静态值填充数组，第一个参数必选，为填充内容，第二个第三个参数内容可选，为填充的开始位置和结束位置，如果不填某个参数则默认直接到头。

    1
    2
    3
    let arr = Array(6).fill(1);
    let arr2 = Array(6).fill(1,2);
    let arr3 = Array(6).fill(1,3,5j);

  • copyWithin方法

    copyWithin方法复制数组中的一系列元素到同一数组指定的起始位置。

    比如要把[1, 2, 3, 4, 5, 6]变成[4, 5, 6, 4, 5, 6]，就可以这样写：

    1
    2
    let arr = [1, 2, 3, 4, 5, 6];
    let arr2 = arr.copyWithin(0, 3); // 第一个参数代表开始粘贴位置，第二个参数代表开始复制位置，第三个参数代表结束复制位置，第三个参数可选。

  • 排序方法

    可以使用reverse方法对数组进行逆序。使用sort方法对数组进行从小到大的字符串字典序排序，这一定要注意，1后面会变成10而不是2，这看起来不太对劲，所以可以在sort方法内部传入一个比较函数，如果能保证里面都是数字的话，这样写是OK的。

    1
    arr.sort((a, b) => a - b);

    排序方法可以对多关键字数组进行自定义排序，构建一个自定义比较函数就OK。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const arr = [{
      name: 'a',
      age: 10
    },
    {
      name: 'b',
      age: 20,
    },
    {
      name: 'c',
      age: 15
    }];

    const comp = (a, b) => {
      if (a.age < b.age)
        return -1;
      if (a.age > b.age)
        return 1;
      return 0;
    }

    console.log(arr.sort(comp));

    对字符串排序时，尽管按照字典序，但比较字符时也会按照ASCII值，如果不想受到大小写的影响，需要传入一个忽略大小写的函数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const arr = ['Ana', 'ana', 'john', 'John'];
    const func = (a, b) => {
      if (a.toLowerCase() < b.toLowerCase())
        return -1;
      if (a.toLowerCase() > b.toLowerCase())
        return 1;
      return 0;
    }

    console.log(arr.sort(comp));

  • 输出数组为字符串

    把数组中所有元素输出为一个字符串，使用自带的toString方法即可，学习过Java的同学应该对这个方法并不陌生。

    如果想要用分割符把元素隔开，可以使用join方法，后面参数带个字符作为连接符即可。

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2018-2023 Shawn Zhou
  • 由 Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信