JavaScript 二维数组初始化

引言

在 JavaScript 中处理二维数组是常见需求，尤其是在算法题、矩阵运算或数据表格处理中。然而，许多开发者（尤其是初学者）容易在初始化二维数组时陷入“引用陷阱”。本文将从实际错误案例出发，逐步剖析问题根源，并提供多种正确、优雅的初始化方式。

---

一、一个典型的错误案例

错误代码示例

let d_arr = [];
for (let i = 0; i < 4; i++) {for (let j = 0; j < 4; j++) {d_arr[i][j] = 1; // ❌ 报错：Cannot set property '0' of undefined}
}

错误原因

在第一次循环中，d_arr[0] 是 undefined，无法直接通过 [j] 赋值。必须先在每一行初始化一个子数组。

---

二、另一种常见但错误的“解决方案”

代码示例

let temp_arr = [0, 0, 0, 0];
let d_arr = [];
for (let i = 0; i < 4; i++) {d_arr[i] = temp_arr; // ❌ 错误：每一行都引用了同一个数组
}
d_arr[0][1] = 1;
console.log(d_arr);
// 输出：[[0,1,0,0], [0,1,0,0], [0,1,0,0], [0,1,0,0]]

问题分析

由于数组是引用类型，d_arr 的每一行都指向同一个 temp_arr。修改任意一行都会影响所有行。

---

三、二维数组初始化方法

方法一：使用 new Array() 逐行初始化

let d_arr = new Array(4); // 创建长度为4的数组
for (let i = 0; i < 4; i++) {d_arr[i] = new Array(4); // 每一行创建一个长度为4的子数组for (let j = 0; j < 4; j++) {d_arr[i][j] = 0; // 初始化为0}
}

方法二：使用 fill 和 map（推荐）

const n = 4;
const matrix = new Array(n).fill(0).map(() => new Array(n).fill(0));

方法三：使用 Array.from

const n = 4;
const matrix = Array.from({ length: n }, () => Array.from({ length: n }, () => 0));

---

四、代码示例

假设我们要初始化一个 3x3 的矩阵，表示欧洲三个城市的温度数据（单位：℃）：

// 初始化一个3x3的二维数组，存储伦敦、巴黎、柏林三城市的三天温度
const temperatures = Array.from({ length: 3 }, () => new Array(3).fill(0));// 赋值示例
temperatures[0] = [12, 14, 13]; // 伦敦
temperatures[1] = [15, 16, 14]; // 巴黎
temperatures[2] = [10, 11, 9];  // 柏林console.log(temperatures);
// 输出：
// [
//   [12, 14, 13],
//   [15, 16, 14],
//   [10, 11, 9]
// ]

---

五、UML 关系图：二维数组的内存结构

---

六、单词与短语表

单词/短语	音标	词性	词根/词缀	释义	搭配	例子
array	/əˈreɪ/	名词	-	数组	two-dimensional array	let arr = new Array(4);
initialize	/ɪˈnɪʃəlaɪz/	动词	initial + -ize	初始化	initialize an array	Initialize the matrix with zeros.
reference	/ˈrefrəns/	名词/动词	refer + -ence	引用	reference type	Arrays are reference types.
matrix	/ˈmeɪtrɪks/	名词	matrix	矩阵	identity matrix	We need a 4x4 matrix.
dimension	/daɪˈmenʃn/	名词	di- + mensio	维度	two-dimensional	A 2D array has two dimensions.
element	/ˈelɪmənt/	名词	-	元素	array element	Access each element with [i][j].
nested	/ˈnestɪd/	形容词	nest + -ed	嵌套的	nested loop	Use a nested loop to iterate.
shallow copy	/ˈʃæloʊ ˈkɒpi/	名词短语	shallow + copy	浅拷贝	make a shallow copy	Avoid shallow copies of arrays.
deep copy	/diːp ˈkɒpi/	名词短语	deep + copy	深拷贝	perform a deep copy	We need a deep copy of the array.

---

结语

正确初始化二维数组是 JavaScript 开发中的基础技能，也是避免隐蔽错误的关键。希望本文能帮助你彻底理解并掌握这一知识点。如果你有更多问题或更好的实践方法，欢迎在评论区交流讨论。