Алгоритм вращения изображения, представленного массивом, не работает должным образом

Question

Я пытаюсь повернуть изображение (а), установив значения на карте координат «а» для повернутого изображения в соответствии с координатами, перечисленными ниже. Почему это не работает?

a = [[1, 2, 3],
     [4, 5, 6],
     [7, 8, 9]]

// Desired result: 
//  rotateImage(a) =
//     [[7, 4, 1],
//      [8, 5, 2],
//      [9, 6, 3]]

// aCoords =  [[00,01,02],
//             [10, 11, 12],
//             [20,21,22]]

// rotatedImageCoordsRelatingToa = [[20, 10, 00],
//                                     [21, 11, 01],
//                                     [22,12,02]]

function rotateImage(a) {
const image = [...a]
const length = a.length
const rotatedImage = [...a]
for(let i=0;i<length;i++){
    for(let j=0;j<length;j++){
        let toRotateCoord = length-(1+j)
        console.log("Original coordinates:" + i,j + " should map to rotated coordinates:"+ toRotateCoord, i)
        rotatedImage[i][j] = image[toRotateCoord][i]
    }
}
return rotatedImage;
}

rotateImage(a);

Когда я запускаю это, я получаю

//[[7,4,7], 
// [8,5,4], 
// [9,4,7]]
// Not
//     [[7, 4, 1],
//      [8, 5, 2],
//      [9, 6, 3]]

Я знаю, что, вероятно, есть лучший алгоритм для этого, но мне любопытно, почему этот подход не работает , Кажется, что-то с доступом к массивам.

Answer 1

Как упоминал Крис Луен go, похоже, что использование оператора распространения для присвоения rotatedImage по-прежнему указывает на то же место в памяти. Я добавил для l oop, чтобы создать новый массив, и теперь он работает:

a = [[1, 2, 3],
     [4, 5, 6],
     [7, 8, 9]]

rotateImage(a);

function rotateImage(a) {
const image = [...a]
const length = a.length
const rotatedImage = []

for(var i = 0; i < length; i++){
        rotatedImage.push([]);
    };

for(let i=0;i<length;i++){
    for(let j=0;j<length;j++){
        let toRotateCoord = length-(1+j)
        rotatedImage[i][j] = image[toRotateCoord][i]
    }
}
return rotatedImage;
}

Answer 2

Проблема в том, что, хотя rotatedImage = [...a] создает новый массив, он не создает новые подмассивы. Таким образом, rotatedImage делит свои строки с image. Все, что вы назначите для rotatedImage[i][j], будет мутировать строки в image, влияя на результат некоторых следующих назначений.

Чтобы избежать этого, инициализируйте rotatedImage как:

const rotatedImage = Array.from({length}, _ => []);

... и ваш код будет работать.

Кстати: вам не нужна переменная image. Поскольку вы не собираетесь изменять его, вы можете просто использовать a.

function rotateImage(a) {
    const length = a.length;
    const rotatedImage = Array.from({length}, _ => []);
    for (let i = 0; i < length; i++) {
        for (let j = 0; j < length; j++) {
            rotatedImage[i][j] = a[length - (1 + j)][i];
        }
    }
    return rotatedImage;
}

let a = [[1, 2, 3],
         [4, 5, 6],
         [7, 8, 9]];
let b = rotateImage(a);
for (let row of b) console.log(row+"")