Как посмотреть массив до применения map?

Question

[AlexandrMa]

Почему ни одним из методов (a3, a4) и a1 не получается увидеть первоначальный массив?
Везде ссылающийся массив. Я в смятении)) Впервые воткнулся в такой пример.

const a1 = [{ "id": "1" }, { "id": "2" }, { "id": "3" }];
let a3 = [...a1];
let a4 = a1.slice();
const a2 = a1.map(i => {
    i["name"] = "Name" + i["id"];
    return i;
});
console.log(a1, a2, a3, a4);

Ответ везде

[
  { id: '1', name: 'Name1' },
  { id: '2', name: 'Name2' },
  { id: '3', name: 'Name3' }
]

Answer 1

[Rsa97]

И что тут особенного? Объекты в JS копируются по ссылке.

const a1 = [{ "id": "1" }, { "id": "2" }, { "id": "3" }];

Здесь создаётся массив, в котором три ссылки на объекты.

let a3 = [...a1];
Здесь производится декомпозиция массива и из этих трёх ссылок формируется новый массив. Сами ссылки при этом остаются неизменными.

let a4 = a1.slice();
Опять таки, ссылки не меняются и ведут на те же самые объекты.

const a2 = a1.map(i => {
    i["name"] = "Name" + i["id"];
    return i;
});

Здесь в объекты по ссылкам добавляется новое поле и как результат каллбэка возвращается ссылка на объект. Соответственно в a2 те же самые ссылки.

В результате имеем четыре массива, в которых ссылки на одни и те же объекты.

Чтобы не менять исходные объекты, надо из них строить новые:

const a2 = a1.map((o) => ({ ...o, name: `Name${o['id']}` }));

Comments

[AlexandrMa]

Спасибо, всё понял!