Оператор спреда потрясающий. Он так много может сделать - он эффективен, удобочитаем и может спасти кучу беспорядка. Не знаю, как это можно не любить!

Это достаточно новая функция JavaScript, которая пришла с ECMA2015 (или ES6, если хотите, хотя первое технически корректно!) - или для тех, кто не знаком с этими терминами - недавним стандартным обновлением JavaScript.

Итак, что такое оператор спреда?

Три точки: ...

Три очень мощные точки, которые позволяют расширять массивы или повторяемые объекты в местах, где можно было бы ожидать элементы массива или пары ключ-значение.

Таких мест три: вызовы функций, элементы в массивах и пары ключ-значение в объектах.

Давайте вдохнем в эти слова немного жизни и посмотрим, на что она способна!

Оператор распространения в массивах

Допустим, у нас есть массив letters , который мы хотим вставить в новый массив:

Мы можем просто ...

var letters = [‘c’, ‘d’];
var newLetters = [‘a’, ‘b’, ...letters, ‘e’];
// newLetters is [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];

Когда вы видите оператор распространения в массиве, он просто расширяет один массив в другой.

Управление массивами с помощью оператора распространения

Есть несколько вещей, которые вы можете сделать с помощью синтаксиса распространения для управления массивами. Я приведу несколько примеров, чтобы показать вам, на что он способен!

Добавление значений в массивы

var smallNums = [1, 2, 3];
var bigNums = [4, 5, 6];
smallNums.push(...bigNums);
// smallNums is [1, 2, 3, 4, 5, 6];

Понятно - и красиво. Использование оператора распространения позволяет вам превратить smallNums в плоский массив (а не во вложенный массив, который был бы результатом без синтаксиса распространения).

Объединение массивов

В качестве альтернативы .concat() вы можете:

var smallNums = [1, 2, 3];
var bigNums = [4, 5, 6];
nums = [...smallNums, ...bigNums];
// nums is[1, 2, 3, 4, 5, 6];

Однако будьте осторожны, если для вас важна производительность, это может быть не лучшим выбором, поскольку на самом деле он работает немного медленнее, чем .concat (), но все же хорошо знать об этом, потому что он действительно удобочитаемый и аккуратный!

Другой способ разделить струны

Я ничего не имею против String.prototype.split (), но способ сделать это оператором распространения довольно крутой, и это должен знать изящный разработчик JS! Проверь это:

var myName = 'Ruth';
var lettersOfName = [...myName];
// lettersOfName = [‘R’, ‘u’, ‘t’, ‘h’];

Копирование массивов

Если вы хоть немного похожи на меня, вы все время неглубоко клонируете массивы. Вы так делаете?

myArray = [1, 2, 3];
copiedArray = myArray.slice();
// copiedArray is [1, 2, 3];

Да, я тоже какое-то время! Но потом я обнаружил, что на самом деле вы можете просто использовать оператор распространения, чтобы облегчить жизнь ...

copiedArray = [...myArray];
// copiedArray is [1, 2, 3];

Это идеально подходит для сложных приложений, в которых вы управляете неизменяемым состоянием, таких как Redux или Vuex.

Вызов функций

Допустим, у нас есть функция, которая принимает в качестве аргументов кучу строк и объединяет их:

var dims = [3, 2, 5];
function calculateVolume (l, h, d) { 
    return l * h * d;
}

Обычно вам нужно передавать аргументы один за другим, например:

calculateVolume(dims[0], dims[1], dims[2]);
// 30

Используя оператор распространения, вы можете аккуратно привести в порядок этот вызов:

calculateVolume(...dims);
// 30

Будущее: расширенный синтаксис и объектные литералы

Синтаксис распространения для объектов - это предложение для ECMAscript на третьем этапе (на момент написания).

Копирование объектов

Как и в случае с неглубоко клонируемыми массивами, я также регулярно клонирую объекты неглубоко. До недавнего времени метод перехода был Object.assign():

var myObj1 = {color: 'Purple', likesMarmite: true};
var clonedObj = Object.assign({}, myObj1);
// {color: 'Purple', likesMarmite: true}

Мне всегда достаточно хорошо Object.assign() нравилось, но оператор распространения справляется со своей работой гораздо аккуратнее:

var clonedObj = { ...obj1 };
// {color: 'Purple', likesMarmite: true}

Объединение предметов

Объединение объектов также становится проще с оператором распространения, операция, традиционно выполняемая с помощью Object.assign().

var myObj1 = {color: 'Purple', likesMarmite: true};
var myObj2 = {color: 'Green', siblings: 3};
var combinedObj = Object.assign({}, myObj1, myObj2);
// {color: 'Green', likesMarmite: true, siblings: 3}

Сравните с синтаксисом распространения:

var combinedObj = { ...obj1, ...obj2 };
// {color: 'Green', likesMarmite: true, siblings: 3}

Все это очень похоже на клонирование и слияние с массивами, но замечательно, что мы можем делать это и с объектами!

Не запутайтесь!

Остерегайтесь: если вы видите ... в коде, это не обязательно оператор распространения. Это также могут быть остальные параметры.

Остальные параметры создают функции, которые могут принимать любое количество аргументов. Вы сможете легко их распознать, потому что они всегда находятся внутри (и в конце) параметров функции. Вот пример, чтобы вы могли их распознать:

function add (a, ...b) {
    console.log(a);
    console.log(b);
}
add(1, 2, 3, 4);
// 1
// [2, 3, 4]

Я сделаю еще одну запись в блоге о параметрах отдыха - смотрите это пространство!

Ваша цель стать профессиональным разработчиком? Станьте разработчиком программного обеспечения за 12 недель на Coding Bootcamp for the North! Узнайте больше на www.northcoders.com/full-time.

Получайте все мои свежие материалы в Твиттере на @RuthYMNg!

Продолжайте кодировать! 🚀