如何在 JavaScript 中操作二维数组

简介: 二维数组在 JavaScript 开发中是比较常见的数据结构,在本文将介绍如何使用 JavaScript 创建二维数组并对其进行操作,在JavaScript中常见的数组操作方法大概 10 个左右,可以参阅《JavaScript 数组操作必须熟练运用的10个方法》。

二维数组在 JavaScript 开发中是比较常见的数据结构,在本文将介绍如何使用 JavaScript 创建二维数组并对其进行操作,在JavaScript中常见的数组操作方法大概 10 个左右,可以参阅《JavaScript 数组操作必须熟练运用的10个方法》。

多维数组

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

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

const months = [
    ["一月", 1],
    ["二月", 2],
    ["三月", 3],
];

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

image.png

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

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.from 和 Array 构造函数。

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]);

image.png

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

months.splice(1, 0, ["一月后", 1]);

image.png

移除元素

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

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

months.pop();

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

months.forEach((month) => {
    month.pop(2);
});
console.table(months);

image.png

迭代多维数组

要迭代多维数组,需要使用嵌套的 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 中多维数组几乎可以作为一维数组工作,二维数组是具有共同名称的元素的集合,它们以行和列的形式组织为矩阵,二维数组是数组的数组。


相关文章
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
273 7
|
JavaScript 前端开发
JavaScript从二维数组抽取若干元素组成新二维数组
JavaScript从二维数组抽取若干元素组成新二维数组
|
分布式计算 JavaScript 前端开发
JavaScript:轻松创建二维数组的多种方法
本文探讨了如何使用 JavaScript 生成二维数组的多种方法,揭示了这些方法在编程中的灵活应用。文章首先通过介绍如何创建一维数组,为理解二维数组的生成奠定基础。接着,分析了几种常见的生成二维数组的方法,包括使用嵌套循环、Array.from()、Array.fill() 以及 展开运算符 和 map() 等技巧。每种方法都有其优缺点,开发者可以根据场景选择最合适的方案。
850 0
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
369 5
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
278 1
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
365 1
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
959 1
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
323 1
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
330 2
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法