Три точки могут иметь огромное значение в предложении. В JavaScript это не исключение. В JavaScript оператор распространения обозначается тремя точками. Этот синтаксис очень мощный, потому что он позволяет вам выполнять множество различных задач очень простым и легким способом.
Давайте рассмотрим несколько примеров использования этого синтаксиса в JavaScript.
Передача массивов в качестве аргументов
Оператор распространения позволяет вам захватить массив и разложить его таким образом, чтобы теперь вы могли извлекать из него каждое из значений и передавать их в качестве аргументов функции.
Начнем с предположения, что у вас есть следующий код. Функция, которая принимает три аргумента и регистрирует их, разделенные запятыми, и массив из трех элементов.
const fun = (a, b, c) => console.log(`${a}, ${b}, ${c}`);
const arr = [0, 1, 2];
Вы можете сделать это простым, но не идеальным способом. Это значит взять каждый элемент из массива по его индексам и передать их в качестве аргументов.
const fun = (a, b, c) => console.log(`${a}, ${b}, ${c}`);
const arr = [0, 1, 2];
fun(arr[0], arr[1], arr[2]);
Использование синтаксиса распространения дает более элегантный (и безопасный) способ сделать это. Как видите, при использовании оператора распространения теперь он передает все три элемента в качестве аргументов функции fun и больше не нужно беспокоиться об индексах.
const fun = (a, b, c) => console.log(`${a}, ${b}, ${c}`);
const arr = [0, 1, 2];
fun(...arr);
Копирование объектов
Еще один полезный вариант использования оператора распространения - это то, что вы можете использовать его для копирования объектов. Допустим, вы хотите сделать копию obj1 и скопировать ее в obj2. Наконец, вы хотите изменить значение свойства a на obj2 на 3.
Ваша первая мысль может заключаться в следующем…
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = obj1;
obj2.a = 3;
console.log(obj1);
console.log(obj2);
В этом случае, даже если вы думаете, что меняете значение obj2 'sa на 3, при создании экземпляра obj2 вы назначаете ссылку на obj1 и не копировать.
Вы могли также подумывать о копировании свойств вручную. Хотя этот пример будет работать, он не масштабируется. Это связано с тем, что если вы в конечном итоге добавите дополнительные свойства к obj1, это может привести к ошибкам в будущем из-за ручного копирования объекта.
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
obj2.a = 3;
console.log(obj1);
console.log(obj2);
Есть и другие способы, которыми мы могли бы безопасно расставить точки над ним, но пока мы сосредоточимся на том, как это сделать с помощью оператора спреда. В этом примере вы можете создать экземпляр obj2, равный obj1, но вы должны заключить его в фигурные скобки и использовать перед ним оператор распространения.
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1 };
obj2.a = 3;
console.log(obj1);
console.log(obj2);
В этом последнем фрагменте кода, как вы можете видеть, сейчас мы используем оператор распространения для создания obj2. Будет создан новый объект, идентичный obj1.
Объединение массивов
Теперь предположим, что вы хотите взять два массива и объединить их в один. Есть несколько способов сделать это.
Сделать это с помощью оператора спреда снова… очень просто. Сначала вы начнете с создания нового массива, в который вы вставите оба массива и префикс их с помощью оператора распространения.
const a = [1, 2, 3]; const b = [4, 5, 6]; const c = [...a, ...b]; console.log(c);
Как вы видели, оператор распространения эффективен во многих областях, где он упрощает написание кода на JavaScript и в некоторых случаях снижает вероятность ошибок. Наслаждаться!
