JavaScript 二维数组操作示例

一、什么是二维数组？

在编程中，二维数组是一种特殊的数据结构，它本质上是"数组的数组"。与一维数组存储线性序列不同，二维数组以表格形式组织数据，包含行和列两个维度。

概念理解

可以将二维数组想象成一个Excel表格：

• 整个表格是一个二维数组
• 每一行是一个一维数组
• 每个单元格是行数组中的一个元素

// 表格类比
// 行0: [A1, A2, A3]
// 行1: [B1, B2, B3]
// 行2: [C1, C2, C3]

二、二维数组的三种定义方法

方法一：直接定义法

适合已知所有元素且数据量较少的情况。

// 直接定义一个3x3的二维数组
var matrix = [["A1", "A2", "A3"],["B1", "B2", "B3"],["C1", "C2", "C3"]
];console.log(matrix[1][2]); // 输出: "B3" - 获取第2行第3列的元素

优点：代码简洁直观，一目了然
缺点：不适合动态或大规模数据初始化

方法二：动态扩展法

适合需要逐步构建二维数组的场景。

// 创建一个空的二维数组
var dynamicArray = new Array();// 扩展第一行
dynamicArray[0] = new Array();
dynamicArray[0][0] = "第一行第一列";
dynamicArray[0][1] = "第一行第二列";// 扩展第二行
dynamicArray[1] = new Array();
dynamicArray[1][0] = "第二行第一列";
dynamicArray[1][1] = "第二行第二列";console.log(dynamicArray.length); // 输出: 2 - 数组有2行

方法三：循环创建法

最适合处理大量数据或从外部源（如JSON）获取数据的情况。

// 定义数组的行数和列数
var rows = 4;
var cols = 3;// 创建二维数组
var twoDArray = new Array(rows);for (var i = 0; i < rows; i++) {twoDArray[i] = new Array(cols);for (var j = 0; j < cols; j++) {twoDArray[i][j] = "位置[" + i + "][" + j + "]";}
}// 访问特定元素
console.log(twoDArray[2][1]); // 输出: "位置[2][1]"

三、二维数组的结构图解

以下通过UML类图展示二维数组的结构关系：

四、多维数组的扩展

JavaScript支持创建三维甚至更高维度的数组。

// 创建三维数组示例
var threeDArray = new Array(2); // 第一维：2个元素for (var x = 0; x < 2; x++) {threeDArray[x] = new Array(3); // 第二维：每个元素有3个子元素for (var y = 0; y < 3; y++) {threeDArray[x][y] = new Array(4); // 第三维：每个子元素有4个元素for (var z = 0; z < 4; z++) {threeDArray[x][y][z] = "值[" + x + "][" + y + "][" + z + "]";}}
}console.log(threeDArray[1][2][3]); // 输出: "值[1][2][3]"

五、获取数组真实长度的方法

JavaScript数组的length属性有时无法反映真实元素数量，特别是当数组包含非数字键时。

// 创建包含混合键的数组
var mixedArray = [];
mixedArray[0] = "数字键值";
mixedArray["name"] = "字符串键值"; // 非数字键不影响lengthconsole.log(mixedArray.length); // 输出: 1 - 仅计算数字索引// 获取数组真实元素数量的函数
function getActualArraySize(arr) {var count = 0;for (var key in arr) {if (arr.hasOwnProperty(key)) {count++;}}return count;
}console.log(getActualArraySize(mixedArray)); // 输出: 2 - 计算所有键

六、实际应用场景

场景一：游戏棋盘表示

// 创建8x8棋盘
var chessboard = new Array(8);for (var i = 0; i < 8; i++) {chessboard[i] = new Array(8);for (var j = 0; j < 8; j++) {// 初始化棋盘格子chessboard[i][j] = {piece: null,color: (i + j) % 2 === 0 ? "white" : "black"};}
}// 放置棋子
chessboard[0][0].piece = " rook";   // 车
chessboard[0][1].piece = "knight"; // 马
// ... 其他棋子初始化

场景二：数据处理与转换

// 从多个一维数组创建二维数组
var names = ["张三", "李四", "王五"];
var ages = [25, 30, 28];
var departments = ["技术部", "市场部", "财务部"];var staffData = [];for (var i = 0; i < names.length; i++) {staffData[i] = [names[i], ages[i], departments[i]];
}console.log(staffData);
// 输出: [["张三", 25, "技术部"], ["李四", 30, "市场部"], ["王五", 28, "财务部"]]

七、性能考虑与最佳实践

1. 内存使用：二维数组比一维数组占用更多内存
2. 访问速度：连续内存访问比随机访问更快
3. 预分配空间：提前确定数组大小可提高性能

// 性能优化示例：预分配内存
var optimizedArray = new Array(1000); // 预分配1000行for (var i = 0; i < 1000; i++) {optimizedArray[i] = new Array(100); // 每行预分配100列// 后续操作...
}

八、单词与短语表

单词/短语	音标	词性	释义	词根/词缀	同义词/反义词	例句
Array	/əˈreɪ/	名词	数组	-	List, Collection	JavaScript arrays can hold multiple values.
Dimension	/daɪˈmenʃn/	名词	维度	di- + mension	-	A 2D array has two dimensions: rows and columns.
Initialize	/ɪˈnɪʃəlaɪz/	动词	初始化	initial + -ize	Set up, Prepare	You should initialize variables before using them.
Index	/ˈɪndeks/	名词	索引	-	Subscript	Array indices start from zero in JavaScript.
Element	/ˈelɪmənt/	名词	元素	-	Item, Component	Each element in an array can be accessed by its index.
Loop	/luːp/	名词/动词	循环	-	Iterate	Use a for loop to iterate through array elements.
Matrix	/ˈmeɪtrɪks/	名词	矩阵	-	Grid, Table	A matrix is a rectangular array of numbers.
Multidimensional	/ˌmʌltidaɪˈmenʃənl/	形容词	多维的	multi- + dimensional	-	JavaScript supports multidimensional arrays.
Property	/ˈprɒpəti/	名词	属性	proper + -ty	Attribute, Characteristic	The length property returns the number of elements in an array.