js 多维数组

1 一个问题引发的思考

今天早上复习回溯算法，定义标记数组时觉得以前定义多维数组的方法太繁琐了，想了一种简单的方式，结果发现这种方式有问题，于是就整理了一下

js 本身没有多维数组，可以通过下面这种方式定义多维数组

// 定义一个三行四列的数组
// 首先定义一个包含三个元素的数组
let array = new Array(3);
// 遍历数组，将每个元素重新定义成数组
for(let i = 0; i < 3;i++ ){
    array[i] = new Array(4);
}
// 既然上面那种方法可以，那这样肯定也没问题
array = array.map((ele)=>new Array(4));

一般情况下，上面两种方式是一样的，因为 map 就是遍历数组的方法。但是，结果真的是一样的吗，我们看一下

第一种并没有什么问题，和我们想象的一样，那么第二种呢

结果好像并不像我们想象的那样，为什么使用 map 没有生效呢。

其实这里有一个小坑，let array = new Array(3) 的时候只是让数组的长度为 3，但此时数组里面是没有元素的，可以从上面图看出。而 map 的对象是数组中的元素，所以相当于 map 了一个空的数组，自然达不到我们想要的效果，那么怎么才能做到我们想要的效果呢，可以用下面这种方法来实现

let array = new Array(3).fill('');
array = array.map((ele)=>new Array(4));

看，这就实现了多维数组，fill() 是 ES6 新增的方法，用来填充数组。

所以这里是先定义一个长度为 3 的数组，然后用空字符串填充这个数组。另外，这里传 undefined 也是可以的，这里只是为了让数组拥有可以被遍历的元素。

看到这里可能会有人想了，既然可以用 fill() 填充数组，那么是否可用用新的数组来填充数组呢，这样实现多维数组不是更方便了吗

let array = new Array(3).fill(new Array(4));

哇，竟然真的实现了，不禁夸奖自己一下，太聪明了。

本来到这就应该结束了，但是做题的时候却出现了问题。可能细心的人已经发现了，有的人可能和我一样还没发现，我们往下看

let array = new Array(3).fill(new Array(4));
array[0][0] = 1;

什么情况，明明只改了一个元素怎么改了一列。

我们来看看我们的定义

let array = new Array(3).fill(new Array(4));

这段代码的意思是定义一个长度为 3 的数组，然后用一个长度为 4 的数组填充这三个元素。

问题就很明显了，这三个元素指向的是同一个数组对象！！！我们实际上只 new 了一个数组对象，只不过分别把它添加到了三个元素的位置，相当于进行了下面的操作

let ele = new Array(4);
let array = new Array(3);
array[0] = ele;
array[1] = ele;
array[2] = ele;

那么我们怎么在 js 里定义多维数组呢，其实知道了错误的原因就很容易想到了，可以遍历整个数组对象，为每一个元素创建一个新的数组对象，有两种方法

// 第一种
let array = new Array(3);
for(let i = 0; i < 3;i++){
    array[i] = new Array(4);
}
// 第二种
let array = new Array(3).fill('').map((ele)=>new Array(4));

2 总结

问题不是很大的问题，但是还是挺有思考的意义的，之前也用过 map 实现多维数组发现结果不对，然后改用 for 循环了。还以为 map 不能实现这种才做，今天才发现用 new Array 定义的数组只有长度，没有元素。也算一个简单的思考吧