JavaScript 二维数组初始化:为什么 fill([]) 是个大坑?

JavaScript 二维数组初始化:为什么 fill([]) 是个大坑?

今天刷leetcode的时候,遇到一个神奇的bug。

当我修改数组中的一个元素,却意外影响了其他所有元素???。

问题重现:诡异的数组共享

ini 复制代码
const r = 3;
const mat = new Array(r).fill([]);
mat[0].push(1);
console.log(mat); // 输出什么?

我期望的输出可能是 [[1], [], []],但实际结果却是 [[1], [1], [1]]!所有子数组都被修改了。

为什么会这样???

引用类型的陷阱

在 JavaScript 中,数组是引用类型。当我们使用 fill([]) 时:

  1. 首先创建一个空数组 [](假设内存地址为 0x123)
  2. 然后将这个引用复制到新数组的每个位置

内存结构如下:

markdown 复制代码
mat: [0x123, 0x123, 0x123]  
      │      │      │  
      ▼      ▼      ▼  
    [ ]    [ ]    [ ]  

所有元素都指向同一个数组对象!

与原始类型的区别

对比使用原始类型的情况:

javascript 复制代码
const arr = new Array(3).fill(0);
arr[0] = 1;
console.log(arr); // [1, 0, 0] 表现正常

因为原始类型(如数字)是直接存储值,而非引用。

正确的初始化方式O(∩_∩)O~

方法1:循环初始化

javascript 复制代码
const mat = new Array(r);
for (let i = 0; i < r; i++) {
    mat[i] = [];
}

方法2:使用 map(推荐)

javascript 复制代码
const mat = new Array(r).fill().map(() => []);

或者更简洁的:

javascript 复制代码
const mat = Array.from({ length: r }, () => []);

总结

  1. 永远不要用 new Array(n).fill([]) 初始化二维数组
  2. 引用类型在 fill() 中会被共享
  3. 使用 Array.frommap 确保每个子数组独立

啊啊啊啊啊哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇

相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript