前言
最近刷Leetcode时，创建一个DP Table 总是需要写一个二维或者三维的数组。才发现实现一个二维数组在JS里也太麻烦了。下面会总结一下实现的几种方法。
Array.from()
const m = 3;
const n = 5;
let arr = Array.from(Array(m), () => new Array(n));
console.log(arr);
// Output:[ [ <5 empty items> ], [ <5 empty items> ], [ <5 empty items> ],]
Array.prototype.map()
const m = 3;
const n = 5;
let arr = Array(m).fill().map(() => Array(n));
console.log(arr);
// Output: [ [ <5 empty items> ], [ <5 empty items> ], [ <5 empty items>]]
For Loop
const m = 3;
const n = 5;
let arr = new Array(m);
for (let i = 0; i < arr.length; i++) {
arr[i] = new Array(n);
}
console.log(arr);
// Output: [ [ <5 empty items> ], [ <5 empty items> ], [ <5 empty items>]]
坑点
刚开始查资料的时候，有一种直接用了方法 Array.fill()，代码如下。
let arr = new Array(m).fill(new Array(n));
需注意的是，map.fill() 这个方法是浅拷贝，传入.fill()的是这个对象的引用。下面来自MDN的代码可以很清晰的说明问题。
// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型，会导致都执行都一个引用类型
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
后记
个人不是很明白为什么在JS中创建一个二维数组会这么麻烦，当需要建立一个多维数组的时候，以上方法都会变得的非常冗杂且不易读。 在其他语言中创建一个多维数组都非常简单
int 2d_arr[m][n]; // c++
int[][] multiples = new int[m][n]; // Java
找了很多资料都发现JS好像不支持相关语法。下面是ECMAScript官网链接，大家一起去提个proposal。说不定明年ES最新语法就支持了呢。
262.ecma-international.org/11.0/
参考
-
Developer.mozilla.org. 2021. Array.prototype.fill() - JavaScript | MDN. [online] Available at: developer.mozilla.org/zh-CN/docs/… [Accessed 24 August 2021].
-
JavaScript, H., 2021. How to Create a Two Dimensional Array in JavaScript. [online] W3docs.com. Available at: www.w3docs.com/snippets/ja… [Accessed 24 August 2021].
