JavaScript中如何实现二维数组元素的上下移动（已完成左右移动）

核心逻辑 #

左右移动是操作同一行内的数组元素，而上下移动需要交换不同行的同列元素——比如0在第row行第col列，向上移动就是和第row-1行第col列的元素互换位置，向下则是和row+1行第col列互换。

完整代码实现 #

1. 查找0元素的位置

先写一个工具函数定位二维数组中0的坐标：

function findZeroPosition(arr) {
  for (let row = 0; row < arr.length; row++) {
    const col = arr[row].indexOf(0);
    if (col !== -1) {
      return { row, col };
    }
  }
  return null; // 数组中没有0时返回null
}

2. 上下移动实现

// 向上移动0元素
function moveUp(arr) {
  const zeroPos = findZeroPosition(arr);
  // 已经在第一行，无法上移，返回原数组的副本（避免修改原数据）
  if (!zeroPos || zeroPos.row === 0) {
    return arr.map(row => [...row]);
  }

  // 深拷贝原数组，避免直接修改原数据
  const newArr = arr.map(row => [...row]);
  // 交换当前行和上一行的同列元素
  [newArr[zeroPos.row][zeroPos.col], newArr[zeroPos.row - 1][zeroPos.col]] = 
  [newArr[zeroPos.row - 1][zeroPos.col], newArr[zeroPos.row][zeroPos.col]];
  
  return newArr;
}

// 向下移动0元素
function moveDown(arr) {
  const zeroPos = findZeroPosition(arr);
  // 已经在最后一行，无法下移，返回原数组的副本
  if (!zeroPos || zeroPos.row === arr.length - 1) {
    return arr.map(row => [...row]);
  }

  const newArr = arr.map(row => [...row]);
  // 交换当前行和下一行的同列元素
  [newArr[zeroPos.row][zeroPos.col], newArr[zeroPos.row + 1][zeroPos.col]] = 
  [newArr[zeroPos.row + 1][zeroPos.col], newArr[zeroPos.row][zeroPos.col]];
  
  return newArr;
}

3. 基于你已有函数的左右移动优化

可以把你写的changePosition整合到二维数组的左右移动逻辑中：

// 你已实现的一维数组元素位置调整函数
function changePosition(arr, from, to) {
  arr.splice(to, 0, arr.splice(from, 1)[0]);
  return arr;
}

// 向左移动0元素
function moveLeft(arr) {
  const zeroPos = findZeroPosition(arr);
  // 已经在最左列，无法左移
  if (!zeroPos || zeroPos.col === 0) {
    return arr.map(row => [...row]);
  }

  const newArr = arr.map(row => [...row]);
  // 对当前行调用你的changePosition函数
  changePosition(newArr[zeroPos.row], zeroPos.col, zeroPos.col - 1);
  return newArr;
}

// 向右移动0元素
function moveRight(arr) {
  const zeroPos = findZeroPosition(arr);
  const targetRowLength = arr[zeroPos.row].length;
  // 已经在最右列，无法右移
  if (!zeroPos || zeroPos.col === targetRowLength - 1) {
    return arr.map(row => [...row]);
  }

  const newArr = arr.map(row => [...row]);
  changePosition(newArr[zeroPos.row], zeroPos.col, zeroPos.col + 1);
  return newArr;
}

测试示例 #

用你提供的数组测试向上移动：

let arr = [
  [1, 1, 1, 1],
  [2, 2, 2, 2],
  [3, 3, 3, 0],
];

const movedUpArr = moveUp(arr);
console.log(movedUpArr);
// 输出结果：
// [
//   [1, 1, 1, 1],
//   [2, 2, 2, 0],
//   [3, 3, 3, 2],
// ]

注意点 #

• 所有函数都返回原数组的深拷贝，避免直接修改输入的原数组，防止意外的副作用
• 做了边界判断：0在第一行时无法上移，在最后一行时无法下移，在最左/最右列时无法左右移动

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