Операторы Spread&REST
Оператор разворота Spread добавляет данные из одного объекта в другой объект. Например данное свойство поможет создавать копии объектов, которые можно будет модифицировать независимо от оригинального объекта. Чтобы понять, почему нельзя просто скопировать один объект, дать копии новое имя и на этом все, нужно разобраться, каким образом объекты передаются в переменные.
Пример передачи примитивных данных в переменную по значению:
В программировании переменная - это коробка для хранения данных. Все поступающие данные на хранение делятся на примитивные и объекты. Посмотрим, что у нас лежит в переменных (a, b) после некоторых математических манипуляций. Присвоим переменной b значение переменной a (5) и прибавим 5. Увиденный результат в консоли вполне ожидаемый.
let a = 5;
b = a;
b = b + 5;
console.log(a); // число 5 хранится в переменной a
console.log(b); // 10 хранится в переменной b
Пример передачи объектов в переменную по ссылке:
Создадим объект с данными: ключ: значение, сделаем копию этого объекта. Теперь у нас есть два объекта с одинаковыми значениями. Рассуждая логически, мы рассчитываем на то, что модифицируя данные в копии, оригинал останется нетронутым. Для эксперимента заменим значение ключа a на новое и выведем содержимое обоих объектов в консоль. К нашему удивлению значения в оригинале так же изменились, хотя мы оригинал вообще не трогали. Отсюда можно сделать вывод: в копию объекта попадают не значения, а ссылка на оригинальный объект. Поэтому думая, что мы изменяем копию, на самом деле меняется оригинал.
let object {
a: 5,
b: 1
};
// В переменную copy передаются не сами значения, а ссылка на объект object.
let copy = object;
copy.a = 10;
console.log(copy); // {a: 10, b:1}
console.log(object); // {a: 10, b:1}
Когда мы работаем с примитивными типами данных (строки, числа, логические значения), то они передаются в переменную по значению. Когда же вы работаете с какими-то объектами (массивы, функции), тогда они передаются в переменную по ссылке. Получается так, что делая изменения в копии объекта copy, мы модифицируем не копию, а оригинал.
Невольно возникает вопрос, как же тогда сделать, чтобы изменения в копии объекта не затрагивали оригинал? Для этого отлично подходит оператор разворота Spread.
Spread оператор
Оператор Spread разворачивает структуру и превращает ее в набор каких-то данных. Посмотрим на примере, как это работает. Создадим первые два массива с элементами, а в третий массив занесем только названия переменных с тремя точками и пару элементов. Эти три точки и есть Spread оператор, который разворачивает внутри массива отдельные значения. Синтаксис в виде троеточия позволит нам вытащить элементы из одного массива и развернуть их в новом массиве.
Первый пример показывает, как просто можно объединить несколько массивов в один. В массив all попали данные из двух массивов.
const media = ['instagram', 'telegram', 'twitter'],
users = ['user_inst', 'user_tel', 'user_twit'],
all = [...media, ...users, 'vk', 'facebook'];
console.log(all);
// результат выводится в консоли
[
'instagram',
'telegram',
'twitter',
'user_inst',
'user_tel',
'user_twit',
'vk',
'facebook'
]
Во второй примере Spread оператор развернул копию массива num.
const num = ["1", "5", "7"];
const copy_num = [...num];
console.log(copy_num);
// [ '1', '5', '7' ]
В третьем примере Spread оператор создал копию объекта.
let coords = { x: 34, y: 42 };
let clone_coords = { ...coords };
console.log(clone_coords);
// в копии то же самое { x: 34, y: 42 }
Rest оператор
У Spread оператора есть антагонист, который работает схожим образом, только наоборот и называется он оператором сворачивания Rest. У нас есть функция res, которая в виде аргументов принимает три значения: Вызовем данную функцию и посмотрим, что у нас в консоли. Если перед последним аргументом вставить ..., то к остальным аргументам можно получить доступ через массив rest.
function res(arg1, arg2, ...rest) {
console.log(arg1); // Первый аргумент
console.log(arg2); // Второй аргумент
console.log(rest[0]); // Третий
console.log(rest[1]); // Четвертый
}
Итоги
Несмотря на то, что Rest и Spread операторы похожи друг на друга, но фактически они выполняют две абсолютно разные функции.
-
Создано 05.08.2020 10:08:50
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.