如何使用 JavaScript 多维数组

18 Mar 2025 | 8 分钟阅读

JavaScript 编程语言不直接支持多维数组。多维数组必须通过使用另一个一维数组来创建，该数组起到多维数组的作用。因此，在 JavaScript 中，多维数组被称为嵌套在其他数组中的数组。

主数组包含作为多维数组的整个元素；我们需要将一些数组嵌套在其他数组中。JavaScript 编程语言使用该数组作为将插入其他数组的多维数组。就像典型的一维数组一样，多维数组的定义方法也是相同的。

当我们想以表格形式存储数据时，例如具有行和列的表格，多维数组会很有帮助。将每个数组放在自己的花括号对中，以创建二维数组。

使用 JavaScript 多维数组的方式

以下方式可用于创建和操作多维数组。

第一种方式

不同的数组变量在括号中创建并使用多个值。

首先，定义一些具有以下值的一维数组。

var arr_var1 = ["val1", 24, 20000];
var arr_var2 = ["val2", 18, 30600];
var arr_var3 = ["val3", 22, 42360];
var arr_var4 = ["val4", 38, 59600];
var arr_var5 = ["val5", 24, 38700];

由于“arr_var1”已经是一个一维数组，因此它的定义与其他数组相似。

第二种方式

单个变量在另一个数组中使用数组的多个值。

var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];

示例

该示例展示了多维数组的不同用法及其功能。

示例 1： 以下示例显示了带有数组数字的 JavaScript 可迭代对象。我们可以在单个数组变量中使用多个变量来存储多条信息。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript multidimensional array and its functionality </h2>
<p> The Javascript adds each array inside its own pair of curly braces to make a multidimensional array.
</p>
<p> Please see the console tab to get the output. </p>
<script>
var arr_var1 = ["val1", 24, 20000];
var arr_var2 = ["val2", 18, 30600];
var arr_var3 = ["val3", 22, 42360];
var arr_var4 = ["val4", 38, 59600];
var arr_var5 = ["val5", 24, 38700];
var final_array = [arr_var1, arr_var2, arr_var3, arr_var4, arr_var5];
console.log(final_array);
console.log(final_array[3][1]);
</script>
</body>
</html>

输出

多维数组函数显示了数组数据。

How to use the JavaScript multidimensional array

示例 2： 以下示例显示了带有数组数字的 JavaScript 可迭代对象。我们可以在数组括号中使用多个括号来存储信息。

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript multidimensional array and its functionality </h2>
<p> The Javascript adds each array inside its pair of curly braces to make a multidimensional array.
</p>
<p> Please see the console tab to get the output. </p>
<script>
var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];
console.log(final_array);
console.log(final_array[2][1]);
</script>
</body>
</html>

输出

多维数组函数显示了数组数据。

JavaScript 多维数组中使用的方法

在 JavaScript 多维数组中可以使用插入、保存、添加、删除等操作。我们可以在 JavaScript 多维数组中使用以下方法。

Pop() 方法
Push() 方法
Sort() 方法
Reverse() 方法
Indexof() 方法
Shift() 方法
Unshift() 方法
Splice() 方法

Pop() 方法

该方法删除数组中具有最后一个索引的元素。最终，这将导致数组长度减 1。

示例： 以下示例显示了带有数组数字的 JavaScript 多维数组。我们可以使用带有已删除值的多维数组。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array and its Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method eliminates the element in the array with the last index.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];
console.log(final_array);
final_array.pop();
console.log(final_array);
final_array.pop();
console.log(final_array);
}
</script>
</body>
</html>

输出

多维数组函数显示了带有 pop() 方法的数组数据。

Push() 方法

使用此技术，我们可以将新元素添加到数组的末尾。这最终会导致数组长度增加 1。

示例： 以下示例显示了带有数组数字的 JavaScript 多维数组。我们可以使用带有插入值的多维数组。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with push Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method inserts a new element in the array with the last index.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];
console.log(final_array);
final_array.push(["val5", 28, 19600]);
console.log(final_array);
final_array[1].push(['19600']);
console.log(final_array);
}
</script>
</body>
</html>

输出

多维数组函数显示了带有 push() 方法的数组数据。

Sort() 方法

此方法可以按数值或字母顺序对数组元素进行排序，具体取决于指定的数组类型。此外，使用 Sort 方法将永久更改数组的顺序。

示例： 以下示例显示了带有数组数字的 JavaScript 多维数组。我们可以使用递增排序方法的多维数组。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with sort Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method sorts the element in the array with the incremental first index value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[4,"val1", 24, 20000], [2, "val2", 18, 30600], [1, "val3", 22, 42360], [3, "val4", 38, 59600]];
final_array.sort();
console.log(final_array);
}
</script>
</body>
</html>

<!DOCTYPE html>

输出

多维数组函数显示了带有 sort() 方法的数组数据。

Reverse() 方法

该方法用于反转数组元素。此过程将结果显示为第一个索引元素变为最后一个，最后一个索引元素变为第一个。

示例： 以下示例显示了带有数组数字的 JavaScript 多维数组。我们可以使用递增排序方法的多维数组。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with reverse Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method displays the element in the array with the reverse multiple array's value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[4,"val1", 24, 20000], [2, "val2", 18, 30600], [1, "val3", 22, 42360], [3, "val4", 38, 59600]];
final_array.reverse();
console.log(final_array);
}
</script>
</body>
</html>

输出

多维数组函数显示了带有 reverse() 方法的数组数据。

Indexof() 方法

此技术可用于查找多维数组中特定元素首次出现的索引。如果元素不存在，则函数将返回 -1。

示例： 以下示例显示了 JavaScript 多维数组，其中方法作用于元素。我们可以使用带有 index() 方法的多维数组来获取索引和值。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with unshift Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method adds the element in the multiple arrays with the array's value.
</p>
<p id = "id_data"> </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
var id = 'val3';
function index(id, arrays) {
for (var i=0; i<arrays.length; i++) {
for (var j=0; j<arrays[i].length; j++) {
if (arrays[i][j] == id) { return i; }
}
}
return -1;
}
document.getElementById('id_data').innerHTML = "Index of the Id: " +index(id, final_array);
console.log(index(id, final_array));
}
</script>
</body>
</html>

输出

多维数组函数显示了带有 Indexof() 方法的数组数据。

Shift() 方法

使用此方法时，数组的第一个值将被删除，其他元素将被移到其位置。

示例： 以下示例显示了 JavaScript 多维数组，其中移位方法作用于元素。我们可以使用带有 shift() 方法的多维数组来更改左侧位置。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with shift Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method removes the element in the multiple arrays with the array's value.</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
console.log(final_array.shift());
console.log(final_array);
}
</script>
</body>
</html>

输出

多维数组函数显示了带有 shift() 方法的数组数据。

Unshift() 方法

使用此方法将数组向右移位，会在索引 0 处添加一个新元素，所有其他元素都会移到数组的右侧。

示例： 以下示例显示了 JavaScript 多维数组，其中 unshifting 方法作用于元素。我们可以使用带有 unshift() 方法的多维数组来添加新的数组元素。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with unshift Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method adds the element in the multiple arrays with the array's value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
console.log(final_array.unshift([5, "val5", 19, 20000]));
console.log(final_array);
}
</script>
</body>
</html>

输出

多维数组函数显示了带有 unshift() 方法的数组数据。

Splice() 方法

此技术可以添加或删除数组中的任何类型的元素。

示例： 以下示例显示了 JavaScript 多维数组，其中 splice 方法作用于元素。我们可以使用带有 splice() 方法的多维数组来添加和删除元素。

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with splice Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method adds and removes the element in the multiple arrays with the array's value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
//remove one element from 1 index
final_array.splice(1,1)
console.log(final_array);
//remove three elements from 1 index
final_array.splice(1,3)
console.log(final_array);
final_array.splice(0,1,[5, "val5", 19, 20000])
console.log(final_array);
}
</script>
</body>
</html>

输出

多维数组函数显示了带有 splice() 方法的数组数据。

结论

JavaScript 多维数组用于操作多个数据。它与许多 JavaScript 方法配合使用来处理用户数据。

下一个主题JavaScript 中的字典

如何使用 JavaScript 多维数组

使用 JavaScript 多维数组的方式

示例

JavaScript 多维数组中使用的方法

Pop() 方法

Push() 方法

Sort() 方法

Reverse() 方法

Indexof() 方法

Shift() 方法

Unshift() 方法

Splice() 方法

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何使用 JavaScript 多维数组

使用 JavaScript 多维数组的方式

示例

JavaScript 多维数组中使用的**方法**

Pop() 方法

Push() 方法

Sort() 方法

Reverse() 方法

Indexof() 方法

Shift() 方法

Unshift() 方法

Splice() 方法

结论

相关帖子

JavaScript 格式化货币

JavaScript 中的可观察对象 (Observables)

如何在 JavaScript 中合并数组

Javascript If-Else 简写

JavaScript 三元运算符

JavaScript 多维数组中使用的方法