JavaScript修改二维数组的某个元素时，其上下元素也受到影响

发布：2021年8月15日18:54:56

前言

在研究背包问题时，一开始往往会用二维数组的形式来描述，这样会便于理解。但是，我在操作过程中发现了JavaScript二维数组的一些令人难解之处，那就是当我操作二维数组的某个元素时，其上下元素也受到了影响，比如我在操作arr[i][j]时，arr[x][j]和arr[y][j]也一起受到了影响。这就让我非常的迷惑，于是我开始了一番小小的探索。

看这就行

如果要创建指定长宽的二维数组，用下面的这种方法：

let dp2 = Array.from({ length: 3 }).map(() => Array.from({ length: 5 }).fill(1)
);

这是创建了一个3行 × 5列的二维数组。且每个数组元素都是1。

过程

创建一个指定长宽的二维数组的两种方法

为了方便说明，统一把目标二维数组设置为3行 × 5列的大小，如下图：

方法一：利用new Array和fill、map函数（自己探索出来的，有毛病，别用）

let dp = new Array(3).fill(new Array(5)).map((current) => current.fill(0)
);

创建结果如下图所示：

方法二：利用Array.from和fill、map函数（直接套用518. 零钱兑换 II中的代码，这个好用）

let dp2 = Array.from({ length: 3 }).map(() => Array.from({ length: 5 }).fill(1)
);

创建结果如下图所示：

修改二维数组中的某个元素

我先是通过方法一创建了数组dp，接着我尝试修改了其中某个元素的值：dp[0][4] = 3，结果发现处于同一列的dp[1][4]和dp[2][4]也一起被改了。

我一开始怀疑是不是JavaScript语言本身的问题，虽然觉得不是很有可能，但还是自己手动写了个二维数组用来验证：

通过上图我们可以看到，其实JavaScript没毛病，确实支持我们修改二维数组中的某一个元素。那为什么我用方法一创建的那个数组会出现那种情况呢？

于是我就对用方法二创建的数组dp2进行了同样的操作，结果发现dp2能按预期中的效果被我们修改。

总结

为什么用方法一创建的二维数组不能按我们预期中的效果被修改，而用方法二创建的数组就可以呢？

我猜想是因为用方法一创建的二维数组中的第二维其实是同一个数组对象，这就导致了，你对其中一行的某个元素操作时，其实也会牵连到其他行中下标与之相同的元素。其中具体的深入研究就先不进行了。

更新：2021年9月12日13:04:31

今天看到博客园里有人也遇到过这个问题，不过他也没有提出具体的原理。

参考：JS - 数组方法的坑 - zjffun - 博客园

【更新结束】

更新：2021年10月23日12:23:00

今天看【Array.prototype.fill()】的MDN文档的时候看到了下面的描述：

而我在方法一种创建的二维数组就是在 fill() 方法中传入了一个数组对象，所以，这些对象引用都是同一个。

所以，如果想要用 new Array 的方式来创建二维数组，那么就可以通过下面这种方式：

// 注意，因为map函数会跳过空值，所以，需要在调用map之前对这些空值进行赋值
let dp = new Array(3).fill(0).map(() => new Array(5).fill(1)
);

创建一个3×5的二维数组并填充为1

【更新结束】

有关参考

更新：2021年8月15日19:53:07

参考：Array.prototype.map() - JavaScript | MDN
参考：JavaScript Array map() 方法 | 菜鸟教程

参考：Array.prototype.fill() - JavaScript | MDN
更新：2021年9月4日17:15:32
参考：Array.from() - JavaScript | MDN
参考：Array() 构造器 - JavaScript | MDN
更新：2021年9月12日13:04:31
参考：JS - 数组方法的坑 - zjffun - 博客园

【JavaScript基础-二维数组】JavaScript修改二维数组的某个元素时，其上下元素也受到影响相关推荐

【JavaScript基础】你真正了解如今的Js数组吗，看这篇就（Go）够了
[JavaScript基础]你真正了解如今的Js数组吗,看这篇就(Go)够了
黑马程序员——JavaScript基础1（初识 JavaScript）
文章目录一.初识 JavaScript 1.1 JavaScript 是什么 1.2 JavaScript 的作用 1.3 HTML/CSS/JS 的关系 1.4 浏览器执行 JS 简介 1.5 J ...
JavaScript基础学习之强制类转换(二)
强制类型转化 -将一个数据类型强制转化为其他数据类型 -类型转化主要指的就是,将其他的数据类型,转化为 String.Number.Boolean 将其他类型转化为String ...
JavaScript基础——第二章，JavaScript操作BOM对象
一,BOM模型(Borwser Object Model) BOM提供了独立内容的,可以与浏览器窗口进行互动的对象结构 BOM可实现功能: 弹出新的浏览器窗口移动,关闭浏览器窗口以及调整窗口的大小 ...
JS学习笔记二——JavaScript 基础知识
JavaScript 基础知识一.JavaScript 变量二.JavaScript 的输出三.JavaScript 运算符四.结语一.JavaScript 变量变量是指在程序运行过程中, ...
二维码制作完成后，还能修改二维码的内容吗？
二维码制作完成后,还能修改二维码的内容吗? 前几天有收到好多用户在咨询同样的问题: "打印出来的二维码,还能修改二维码内容吗?" "海报上的二维码,怎么修改二维码后面的网 ...
JS学习笔记（JavaScript基础学习必备）
讲解JavaScript 基础语法.关键特性.JSON.WebAPI 等知识点.涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作. 文章目录一.JavaScript 基础 1.什么是 ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...
JavaScript 基础知识
JavaScript 基础知识文章目录 JavaScript 基础知识 @[toc] 一.JS的基本语法与结构 1.1 JavaScript 用法 1.2 JavaScript 输出 1.3 Jav ...
JavaScript 基础学习笔记
JavaScript 基础一.初始 JavaScript 1.JS 注释 2.JS 输入输出语句二.变量 1.变量概述 1)什么是变量 2)变量在内存中的存储 2.变量的使用 3.变量的初始化 4 ...

【JavaScript基础-二维数组】JavaScript修改二维数组的某个元素时，其上下元素也受到影响