写点什么

如何在 JavaScript 中操作二维数组

作者:devpoint
  • 2021 年 11 月 15 日
  • 本文字数:1494 字

    阅读完需:约 5 分钟

如何在 JavaScript 中操作二维数组

二维数组在 JavaScript 开发中是比较常见的数据结构,在本文将介绍如何使用 JavaScript 创建二维数组并对其进行操作。

多维数组

JavaScript 本身不提供多维数组,但是,可以通过定义元素数组来创建多维数组,其中每个元素也是另一个数组,出于这个原因,可以说 JavaScript 多维数组是数组的数组,即嵌套数组。定义多维数组的最简单方法是使用数组字面量表示法。


要声明一个空的多维数组,可以使用与声明一维数组相同的语法,如下定义一个二维数组:


const months = [    ["一月", 1],    ["二月", 2],    ["三月", 3],];
复制代码


在数组 months 中,第一个维度表示中文月份,第二个维度显示对应的数字。要在控制台中显示这个二维数组,可以使用 console.table() 方法清晰的展示其二维数组:



要访问多维数组的元素,首先使用方括号访问返回内部数组的外部数组元素;然后使用另一个方括号访问内部数组的元素。如下:


console.log(months[0][1]);  // 1
复制代码

数组声明

根据上面的介绍,二维数组为 嵌套数组 ,理解了其原理就大概知道声明方式。

嵌套数据

在 JavaScript 中,二维数组只是一种嵌套数组,如下:


const arrayNumbers = [    [1, 2],    [3, 4],    [5, 6],];console.log(arrayNumbers[0][0]);console.log(arrayNumbers[0][1]);console.log(arrayNumbers[1][0]);console.log(arrayNumbers[1][1]);console.log(arrayNumbers); // [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
复制代码

创建空的二维数组

要创建一个空的二维数组,可以使用 Array.fromArray 构造函数。


const arrayNumbers = Array.from(Array(2), () => new Array(4));console.log(arrayNumbers);
复制代码


Array.from 方法允许从另一个数组创建一个数组,第一个参数是要从新数组派生的数组,第二个参数是一个函数,它将第一个数组中的值映射到想要的值。上面的代码将得到一个 2x4 的二维数组,此外,可以仅使用 Array 函数来创建一个二维数组。


const arrayNumbers = Array(2)    .fill()    .map(() => Array(4));console.log(arrayNumbers);
复制代码


通过调用 fill 方法来填充,这样,就可以在 map 回调中调用和返回数组来创建二维数组。

数组操作

二维数组为 嵌套数组 ,操作的方式结合一维数组的方法。

添加元素

可以使用诸如 push()splice() 之类的 Array 方法来操作多维数组的元素。例如,要在多维数组的末尾添加一个新元素,使用 push() 方法,如下所示:


months.push(["四月", 4]);
复制代码



要在数组中间插入一个元素,使用 splice() 方法,下面在数组的第二个位置插入一个元素:


months.splice(1, 0, ["一月后", 1]);
复制代码


移除元素

要从数组中删除元素,可以使用 pop()splice() 方法。


例如,以下语句删除数组的最后一个元素:


months.pop();
复制代码


同样,可以使用 pop() 方法从多维数组的内部数组中删除元素,如下:


months.forEach((month) => {    month.pop(2);});
console.table(months);
复制代码


迭代多维数组

要迭代多维数组,需要使用嵌套的 for 循环,如下例所示:


for (let i = 0; i < months.length; i++) {    var innerArrayLength = months[i].length;    for (let j = 0; j < innerArrayLength; j++) {        console.log("[" + i + "," + j + "] = " + months[i][j]);    }}
复制代码


第一个循环遍历外部数组的元素,嵌套循环遍历内部数组的元素,上面的代码输出如下:


[0,0] = 一月[0,1] = 1[1,0] = 二月[1,1] = 2[2,0] = 三月[2,1] = 3
复制代码

总结

可以通过嵌套数组字面量来创建 JavaScript 二维数组,也可以使用 Array 函数创建二维数组。在 JavaScript 中多维数组几乎可以作为一维数组工作,二维数组是具有共同名称的元素的集合,它们以行和列的形式组织为矩阵,二维数组是数组的数组。

发布于: 2021 年 11 月 15 日阅读数: 7
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
如何在 JavaScript 中操作二维数组