如何移除JavaScript二维数组指定元素并实现下落补位效果

给定如下二维数组：

const arr = [
 [1, 2, 8],
 [8, 5, 6],
 [7, 8, 9]
];

需要移除所有数字8，让剩余元素从下往上“下落”，最终得到上方补null的数组：

[
 [null, null, null],
 [1, 2, 6],
 [7, 5, 9]
]

实现思路 #

核心是按列处理数组：

• 提取每一列的所有元素
• 过滤掉目标值（这里是8）
• 计算需要补充的null数量，将null放在列的头部，过滤后的元素放在尾部（模拟元素“下落”到底部的效果）
• 最后将处理后的列转置回行结构

代码实现 #

const arr = [
 [1, 2, 8],
 [8, 5, 6],
 [7, 8, 9]
];

// 1. 遍历每一列，处理列内元素
const processedColumns = arr[0].map((_, colIdx) => {
  // 提取当前列的所有元素
  const column = arr.map(row => row[colIdx]);
  // 过滤掉数字8
  const filteredItems = column.filter(item => item !== 8);
  // 计算需要补充的null数量
  const nullCount = column.length - filteredItems.length;
  // 拼接null和过滤后的元素，实现元素从下往上填充
  return [...Array(nullCount).fill(null), ...filteredItems];
});

// 2. 将处理后的列转置为行
const result = processedColumns[0].map((_, rowIdx) => {
  return processedColumns.map(col => col[rowIdx]);
});

console.log(result);

代码说明 #

• 第一步处理列：通过遍历列索引，提取每一列的元素，过滤掉8后，用null填充列的头部，保证剩余元素集中在列的底部
• 第二步转置：将列结构转换为行结构，得到最终的二维数组

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