Vue.js/JavaScript中合并多维数组并覆盖对应索引值的方法

嘿，这个需求用map方法就能轻松搞定，完全不用冗长的forEach循环！先说说为什么array1.concat(array2)不行——它只是把两个数组拼接在一起，根本做不到对应位置的元素覆盖。下面给你两个简洁的实现方案：

方案1：基础兼容版（支持所有现代浏览器） #

var array1 = [ ["","","","","","",""], ["","","","","","",""], ["","","","","","",""] ];
var array2 = [ ["a","",""], ["","b",""] ];

const output = array1.map((subArr, idx) => {
  // 取出array2中对应索引的子数组，不存在则用空数组兜底
  const subArr2 = array2[idx] || [];
  // 遍历子数组元素：优先用array2对应位置的非空值，否则保留原array1的元素
  return subArr.map((val, jdx) => subArr2[jdx] || val);
});

console.log(output);
// 输出结果完全符合你的期望：
// [ ["a","","","","","",""], ["","b","","","","",""], ["","","","","","",""] ]

方案2：极简版（ES2020+ 环境适用） #

如果你的运行环境支持ES2020及以上（比如现代浏览器、Node.js 14+），可以用可选链?.进一步简化代码，看起来更清爽：

const output = array1.map((sub, i) => sub.map((val, j) => array2[i]?.[j] || val));

逻辑说明 #

1. 外层map遍历array1的每个子数组，同时拿到当前子数组的索引i
2. 内层map遍历子数组的每个元素，拿到当前元素的索引j
3. 对每个位置(i,j)：如果array2[i][j]存在且非空，就用它覆盖array1[i][j]；否则保留array1的原元素
4. 自动处理array2长度比array1短、子数组长度不一致的情况

内容的提问来源于stack exchange，提问作者Sanv Ariana