JavaScript的fill()方法可高效创建二维矩阵,但需避免引用陷阱;正确做法是用Array.from()或map()生成独立子数组,再用fill()填充值。

JavaScript 的 fill() 方法常被误认为只适合一维数组初始化,其实它在创建二维矩阵(如 3×3 空棋盘、图像像素网格)时非常高效——但需注意引用陷阱。
fill() 初始化矩阵的正确写法
直接对数组调用 fill([]) 会创建多个指向同一子数组的引用,修改任一子数组会影响全部:
const matrix = Array(3).fill([]); matrix[0].push(1); console.log(matrix); // [[1], [1], [1]] —— 不是预期结果
正确做法是先用 Array.from() 或 map() 生成独立子数组,再用 fill() 填充每个子数组的值:
- 创建 3×4 全 0 矩阵:
Array.from({length: 3}, () => Array(4).fill(0)) - 创建 2×5 全 'x' 字符矩阵:
Array(2).fill(null).map(() => Array(5).fill('x')) - 若已存在二维数组,可用
matrix[i].fill(value)单独重置某一行
fill() 配合索引参数实现动态填充
fill(value, start, end) 的起始/结束索引支持按需填充部分元素,适合构造不规则矩阵或带边框的结构:
- 生成 5×5 矩阵,仅填充中间 3×3 区域为 1:
const row = Array(5).fill(0); row.fill(1, 1, 4);
再用该行重复 5 次(注意:此时每行独立,可安全复用) - 初始化上三角矩阵(主对角线及以上为 1,其余为 0):
Array.from({length: 4}, (_, i) => Array(4).fill(0).fill(1, i))
与传统 for 循环对比的适用场景
fill() 不是万能替代方案,适合以下情况:
- 所有元素值相同(如全 0、全 null、全空字符串)
- 需要快速重置某一行/列的值(比循环赋值更简洁)
- 配合
Array.from()构造固定尺寸矩阵,代码更声明式
不适合的情况:
– 每个位置需不同计算逻辑(如坐标函数、随机数)→ 用 map() 或循环;
– 子数组长度不一致(如锯齿数组)→ 仍需逐行构造。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











