Далее на странице...
Копирование массивов в JavaScript - Существует несколько способов.
1-ый способ копирования массивов: написать функцию, используя циклы (см. пример здесь, так как массивы - это частный случай объектов).
2-ой способ копирования массивов - метод slice.
3-ий момент: если присвоить массив какой-либо переменной, то это НЕ будет являться копированием. В переменную будет передана ссылка на исходный массив, но не сам массив: подробнее об этом читайте здесь.
Оператор spread - Копирование массивов
Оператор разворота spread работает, начиная со стандарта JavaScript ES6 и используется для копирования массивов.
Синтаксис оператора spread - три точки.
Оператор spread - Примеры
Пример 1.1
const letters = ['a', 'b', 'c'],
lettersNew = [...letters];
lettersNew[0] = 'X';
console.log(lettersNew);
console.log(letters);
Результат
[ 'X', 'b', 'c' ]
[ 'a', 'b', 'c' ]
Оператор spread - три точки.
1. Копирование массива letters в lettersNew.
2. Изменение значения одного из элементов массива lettersNew.
3. Исходный массив letters - остается прежним.
Пример 1.2
const letters = ['a', 'b', 'c'],
lettersEnd = ['x', 'y', 'z'],
lettersAllPlus = [...letters, ...lettersEnd, 'Q', 'W', 'E'];
Результат
[
'a', 'b', 'c',
'x', 'y', 'z',
'Q', 'W', 'E'
]
В результате в один массив были скопированы два других массива + есть возможность добавления дополнительных элементов.
Оператор spread - На практике
Оператор spread на практике часто используется для передачи массива в функцию.
Как это выглядит? Рассмотрим пример.
Допустим, мы получаем данные в виде массива. Например, ФИО, адрес и возраст. И есть функция с тремя параметрами, которая обрабатывает эти данные определенным образом. Рассмотрим эту ситуацию в простом исполнении. Здесь важно уловить суть.
Пример 2.1
function log(a, b, c){
console.log(a);
console.log(b);
console.log(c);
}
const number = ['Ivanov V.M.', 'Koroleva 7 121', 1980];
log(...number);
Результат
Ivanov V.M.
Koroleva 7 121
1980
Оператор spread раскладывает массив на отдельные элементы.
Оператор spread - Копирование объекта
В стандарте JavaScript ES8 оператор spread работает и для объектов.
Пример 3.1
const obj = {
k: 1,
s: 2
};
const newObj = {...obj};
console.log(newObj);
newObj.k = 111;
console.log(newObj);
console.log(obj);
Результат
{ k: 1, s: 2 }
{ k: 111, s: 2 }
{ k: 1, s: 2 } // Исходный объект
Оператор spread - в результате копирования мы имеем два независимых объекта.
Оператор spread делает поверхностную - НЕ глубокую копию объекта/массива.
То есть при копировании объекта или массива вложенные конструкции имеют ссылочный тип данных.
