JavaScript数组方法[重复]

8ulbf1ek  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(117)

此问题已在此处有答案

Array.prototype.fill() with object passes reference and not new instance(7个回答)
16小时前关闭
我想修改一个二维数组,得到一个二维数组,但内容不同。为了不写很久,我把代码给你看

const rotateTetromino = () => {
        const rotatedTetromino = [];
        for (let i = 0; i < tetromino.length; i++) {
            rotatedTetromino.push([]);
        }
        let k = 0;
        for (let i = tetromino.length - 1; i >= 0; i--) {
            for (let j = 0; j < tetromino[i].length; j++) {
                rotatedTetromino[j][k] = tetromino[i][j];
            }
            k++;
        }
        return rotatedTetromino;
};

在此版本中

let tetromino = [
        [0, 1, 0],
        [0, 1, 0],
        [1, 1, 0],
    ];
 I get  [1, 0, 0],
        [1, 1, 1],
        [0, 0, 0],

这对我来说是正确的,因为有了这个函数,我可以旋转俄罗斯方块游戏的tetromino。但是当我尝试用同样的函数whit fill方法旋转tetdtetromino时,我得到了错误的数组。函数为

const rotateTetromino = () => {
        const rotatedTetromino = new Array(tetromino.length).fill([]);
        let k = 0;
        for (let i = tetromino.length - 1; i >= 0; i--) {
            for (let j = 0; j < tetromino[i].length; j++) {
                rotatedTetromino[j][k] = tetromino[i][j];
            }
            k++;
        }
        return rotatedTetromino;
};

对于相同的初始循环,循环会以不同的形式工作。为什么?

let tetromino = [
        [0, 1, 0],
        [0, 1, 0],
        [1, 1, 0],
    ];
I get   [[0, 1, 0],
         [0, 1, 0],
         [0, 1, 0],]
pkwftd7m

pkwftd7m1#

rotateTetromino函数的第二个实现的问题是,当您使用fill()方法时,它会用提供的对象的相同引用填充数组。在本例中,所有内部数组共享同一个引用,这会导致在尝试更新rotatedTetromino数组中的元素时出现意外行为。
要解决此问题,可以使用Array.from()方法创建新的二维数组,每个内部数组都有单独的引用:

const rotateTetromino = () => {
  const rotatedTetromino = Array.from({ length: tetromino.length }, () => []);
  let k = 0;
  for (let i = tetromino.length - 1; i >= 0; i--) {
    for (let j = 0; j < tetromino[i].length; j++) {
      rotatedTetromino[j][k] = tetromino[i][j];
    }
    k++;
  }
  return rotatedTetromino;
};

通过将Array.from()与Map函数一起使用,可以确保rotatedTetromino中的每个内部数组都有一个单独的引用,从而允许正确修改二维数组的内容,而不会导致任何意外的副作用。

相关问题