#5 ES6 - spread

poster
В этом уроке мы познакомимся с оператором 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 и увидели, когда его стоит использовать.

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Tofik Abdullayev
10 месяцев назад
как же вовремя я набрел на эти курсы! спасибо вам большое!
monsterlessons
10 месяцев назад
На здоровье)
Vigo
1год назад назад
Отличные уроки. Все четко ясно и лаконично. Спасибо БОЛЬШОЕ за ваш труд! Можно вопрос-уточнение: где вы приводите пример с getText.apply(null, args) и говорите, что "Например в ес5 у нас был вот такой код...." и приводите запись со стрелочной функцией. Они же вроде появились в es6. Или я что-то путаю?
monsterlessons
1год назад назад
Спасибо. Вы абсолютно правы стрелочные функции появились в ес6. Я имел ввиду apply и его ес6 аналог spread.
Виталий «Laetar666» Александров
1год назад назад
Везде эти елементы, еле-еле менты :D Хочу от вас уроки по русскому языку))
monsterlessons
1год назад назад
У каждого человека свои недостатки)) Зато я в коде ошибок практически не делаю)
igor-0127
1год назад назад
Виталий, - если тебе мешает, иди на филолога, а не на прогера) Надо суть смотреть/слушать! Я вот вообще незаметил, зато разобрался) monsterlessons - отличные уроки, так держать!
monsterlessons
1год назад назад
Спасибо большое. Стараюсь.