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

数组是最简单的内存数据结构。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将返回undefinedfindIndexOf将返回-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方法接收一个有以下四个参数的函数:previousValuecurrentValueindexarray,后两个参数是可选的。这个函数会返回一个将被叠加到累加器的值,方法停止执行后会返回这个累加器。如果要对一个数组中所有元素求和,这个就比较有用。

    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

    这个做项目经常用了,使用for循环直接遍历,v-for指令中的常客。

  • @@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方法返回包含数组索引的@@iteratorvalues方法返回的@@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-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信