js 多维数组

本文通过实例探讨了JavaScript中创建多维数组时易犯的错误,并对比了不同方法的效果,提出了正确的实现方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 就是遍历数组的方法。但是,结果真的是一样的吗,我们看一下
图1
第一种并没有什么问题,和我们想象的一样,那么第二种呢
图2
结果好像并不像我们想象的那样,为什么使用 map 没有生效呢。

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

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

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

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

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

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

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

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

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

图5

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

我们来看看我们的定义

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 定义的数组只有长度,没有元素。也算一个简单的思考吧

### JavaScript 中多维数组的创建与操作 #### 创建多维数组 在 JavaScript 中,虽然没有原生支持的多维数组概念,但可以通过嵌套数组的方式来模拟多维数组的行为。下面展示如何定义并初始化一个多维数组: ```javascript // 定义一个10×10大小的二维数组,并填充初始值 const table = []; for (let i = 0; i < 10; ++i) { table[i] = []; // 初始化每一行的新数组 } ``` 为了进一步说明这一点,在构建像九九乘法表这样的具体例子时,可以按照如下方式进行编码[^2]: ```javascript // 构建9x9乘法表 const multiplicationTable = new Array(9); for (let row = 0; row < 9; ++row) { multiplicationTable[row] = new Array(9).fill(null); // 使用 fill 方法设置默认值 } for (let rowIndex = 0; rowIndex < 9; ++rowIndex) { for (let colIndex = 0; colIndex < 9; ++colIndex) { multiplicationTable[rowIndex][colIndex] = (rowIndex + 1) * (colIndex + 1); } } console.log(multiplicationTable); ``` 这段代码展示了如何通过双重循环来遍历矩阵中的每一个位置,并为其赋上相应的计算结果。 #### 访问和修改多维数组元素 一旦创建好了多维数组之后,就可以利用索引来访问其中任意一层内的元素。对于上述的例子来说,如果想要获取第三行第四列处存储的结果,则可以直接这样做 `multiplicationTable[2][3]`[^1]。 #### 遍历多维数组 当涉及到遍历整个多维数组并对各个元素执行某些特定逻辑的时候,通常会采用递归函数或者是多重循环结构来进行处理。这里给出一种简单的迭代方式用于打印出之前建立好的乘法表格的内容: ```javascript function printMultiplicationTable(table) { for (let row of table) { let line = ''; for (let value of row) { line += `${value}\t`; // 制表符分隔各数值以便于阅读 } console.log(line.trim()); } } printMultiplicationTable(multiplicationTable); ``` 以上就是关于 JavaScript 中创建以及操作多维数组的一些基础知识介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值