Как отобразить исходный массив без применения функции map()?

Question

Элла

javascript

Как отобразить исходный массив без применения функции map()?

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

```javascript
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' }
]
```

30 января 2024 г. 12:58

Ответы на вопрос 2

Похожие вопросы

Answer 1

Причина, по которой `a1`, `a3` и `a4` отображают измененный массив, заключается в том, что массивы в JavaScript хранят ссылки на объекты, а не сами объекты. Когда вы создаете `a3` и `a4`, копируются ссылки на одни и те же объекты, что и в массиве `a1`, а не сами объекты.

Когда вы затем изменяете объекты, на которые ссылается `a1`, через метод `map`, модификации применяются к объектам, на которые также ссылается и `a1`, и `a3`, и `a4`, поскольку все они содержат ссылки на одни и те же объекты. Именно поэтому результат `console.log` одинаков для всех этих массивов.

Чтобы отобразить исходный массив без применения `map()`, вы должны создать глубокую копию массива с объектами, что означает создание новых объектов с теми же свойствами, что и в исходном массиве:

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

// Создание глубокой копии массива
let a3 = a1.map(i => ({ ...i })); // каждый элемент скопируется как новый объект
let a4 = a1.map(i => Object.assign({}, i)); // альтернативный способ — с использованием Object.assign

// Теперь, когда вы меняете исходный массив с помощью map, изменения не затронут a3 и a4
const a2 = a1.map(i => {
    return { ...i, "name": "Name" + i["id"] };
});

console.log(a1); // Исходный массив без изменений
console.log(a2); // Измененный массив
console.log(a3); // Исходный массив без изменений (глубокая копия)
console.log(a4); // Исходный массив без изменений (глубокая копия)
```

Теперь у вас есть четыре разных массива: `a1` (исходный массив), `a3` и `a4` (глубокие копии исходного массива) и `a2` (копия исходного массива, но с добавленным свойством `name` к каждому объекту).

Answer 2

И что тут особенного? Объекты в JS копируются по ссылке. 
 
 
 let a3 = [...a1]; 
 Здесь производится декомпозиция массива и из этих трёх ссылок формируется новый массив. Сами ссылки при этом остаются неизменными. 
 
 let a4 = a1.slice(); 
 Опять таки, ссылки не меняются и ведут на те же самые объекты. 
 
 
 
 В результате имеем четыре массива, в которых ссылки на одни и те же объекты.