#5 ES6 - spread

Мы продолжаем серию уроков по ес6 и в этом уроке мы познакомимся с оператором spread. По русски он называется оператор расширения, но на мой вкус, это слабо обьясняет что он делает. По английски это значит распылять. Мы будем распылять массив на отдельные елементы либо возвращать остаток.

Итак как выглядит самая часто используемая запись spread? Как мы помним у стрелочных функций нет arguments и мы не можем получить массив аргументов. В этом нам поможет spread.

const getText = (...args) => {
  console.log(args);
}
getText('a', 'b', 'c')

Мы описали стрелочную функцию getText и использовали вместо аргумента ...args. Это значит возьми все аргументы, которые мы передали и засунь в переменную args. Если мы посмотрим в браузер, то увидим, что в консоли вывелось a,b,c наши три аргумента.

Если же мы укажем отдельно первый аргумент, в то args поместятся все оставшиеся аргументы.

const getText = (a, ...args) => {
  console.log(a, args);
}
getText('a', 'b', 'c')

Здесь у нас будет два отдельных аргумента a и массив b c. Это очень удобно, когда мы не знаем какое количество аргументов ожидать.

Второй вариант, когда spread удобен, это когда нам нужно померджить 2 массива. В ес5 обычно пишут

const arr1 = [1,2,3];
const arr2 = [4,5,6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);

Этим самым мы помещаем все елементы второго массива в первый массив

В es6 мы можем написать

const arr1 = [1,2,3];
const arr2 = [4,5,6];
arr1.push(...arr2)
console.log(arr1);

Мы пушим spread второго массива. То есть мы превращаем массив в последовательность елементов и пушим их. Код намного проще для понимания

Еще один вариант использования, это если у нас есть несколько аргументов для функции в виде массива. Например в ес5 у нас был вот такой код

const args = ['a', 'b', 'c'];
const getText = (a, b, c) => {
  console.log(a, b, c);
}
getText.apply(null, args);

мы использовали apply, чтобы вторым параметром передать массив, как аргументы в функцию

const args = ['a', 'b', 'c'];
const getText = (a, b, c) => {
  console.log(a, b, c);
}
getText(...args);

В ес6 мы можем применить spread в момент передачи аргументов в функцию. Тогда они передадутся как последовательность елементов, а не как массив.

Итак в этом уроке мы познакомились с оператором spread и увидели, когда его стоит использовать.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.