Операторы Rest и Spread

Многие встроенные функции⚙️ JavaScript поддерживают произвольное количество аргументов.

Например:

Math.max(arg1, arg2, ..., argN) – вычисляет максимальное число из переданных аргументов.

Math.min(arg1, arg2, ..., argN) - возвращает минимальное значение из переданных аргументов.

В этой статье мы узнаем, как сделать то же самое с нашими собственными функциями⚙️ и как передавать таким функциям⚙️ параметры в виде массива.

Видео

Остаточные параметры (...rest)

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

Например :

Интерактивный редактор

function learnJavaScript() { let summa = (a, b, c) => { return a + b + c } // Сумма 3-х чисел return summa(1, 2, 3, 4, 5, 6, 7) }

function learnJavaScript() {
  let summa = (a, b, c) => {
    return a + b + c
  } // Сумма 3-х чисел

  return summa(1, 2, 3, 4, 5, 6, 7)
}

Результат

Loading...

Лишние аргументы не вызовут ошибку, но конечно посчитаются только первые три.

Концепция ES6

Начиная со стандарта ES6 появилась концепция, как ...rest - остаточные параметры.

let goFun = (...rest) => {
  // Алгоритм
}

Свободные параметры могут быть обозначены через три точки .... Буквально это значит: "собери оставшиеся параметры и положи их в массив".

Например, соберём все аргументы в массив args :

Интерактивный редактор

function learnJavaScript() { let sumAll = (...args) => { // args — имя массива передаваемых аргументов let sum = 0 for (let arg of args) if (typeof arg === 'number') sum += arg // sum - соберется сумма всех числовых аргументов return sum } return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native') }

function learnJavaScript() {
  let sumAll = (...args) => {
    // args — имя массива передаваемых аргументов
    let sum = 0
    for (let arg of args) if (typeof arg === 'number') sum += arg // sum - соберется сумма всех числовых аргументов
    return sum
  }
  return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native')
}

Результат

Loading...

Ответ уже 28 и без ошибок! Подробуйте изменить аргументы или размерность массива.

Несколько параметров

Мы можем положить первые несколько параметров в переменные , а остальные – собрать в массив. Это означает то, что вы просто можете вставить ...rest, но только вместо последнего параметра функции.

let goFun = (first, second, ...rest) => {
  // Алгоритм
}

В примере ниже первые два2️⃣ аргумента функции станут именем и фамилией, а третий и последующие превратятся в массив titles[i] :

Интерактивный редактор

function learnJavaScript() { let free = '' let showName = (firstName, lastName, ...titles) => { free = firstName + ' ' + lastName // Имя + Фамилия return titles[0] + ' ' + titles[1] } // Оставшиеся параметры пойдут в массив titles = ["React", "Native"] // titles[0] // React // titles[1] // Native let result = showName('Юлий', 'Цезарь', 'React', 'Native') return free + ' или ' + result }

function learnJavaScript() {
  let free = ''
  let showName = (firstName, lastName, ...titles) => {
    free = firstName + ' ' + lastName // Имя + Фамилия
    return titles[0] + ' ' + titles[1]
  }
  // Оставшиеся параметры пойдут в массив titles = ["React", "Native"]
  // titles[0]  // React
  // titles[1]  // Native

  let result = showName('Юлий', 'Цезарь', 'React', 'Native')

  return free + ' или ' + result
}

Результат

Loading...

Возможные ошибки

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

function f(arg1, ...rest, arg2) {   // arg2 после ...rest ?
  // Ошибка!
}

Запомни

...rest должен всегда быть последним.

Оператор расширения ...spread

Мы узнали, как получить массив из списка параметров, но иногда нужно сделать противоположное - запихнуть массив в вызываемую функцию⚙️.

Например, есть встроенная функция⚙️ Math.max. Она возвращает наибольшее число из списка:

Интерактивный редактор

function learnJavaScript() { return Math.max(3, 5, 1, 17, 14, 8, 2, 11) }

function learnJavaScript() {
  return Math.max(3, 5, 1, 17, 14, 8, 2, 11)
}

Результат

Loading...

Не так все просто

Допустим, у нас есть массив чисел [3, 5, 1]. Как вызвать для него Math.max?

Просто так их не вставишь — Math.max ожидает получить список чисел, а не один массив.

Интерактивный редактор

function learnJavaScript() { let arr = [3, 5, 1, 17, 14, 8, 2, 11] return Math.max(arr) // NaN - значение будет не определено }

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]
  return Math.max(arr) // NaN - значение будет не определено
}

Результат

Loading...

Конечно, мы можем вводить числа вручную: Math.max(arr[0], arr[1], arr[2]).

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

Вхождение параметров

Тут нам поможет оператор расширения ...spread. Он похож на остаточные параметры – тоже использует ..., но делает совершенно противоположное.

Когда функционал⚙️ ...spread используется при вызове функции⚙️, он преобразует массив-объект arr в список аргументов.

Для Math.max :

Интерактивный редактор

function learnJavaScript() { let arr = [3, 5, 1, 17, 14, 8, 2, 11] return Math.max(...arr) // оператор ...arr преобразует массив `arr` в список аргументов }

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]

  return Math.max(...arr) // оператор ...arr преобразует массив `arr` в список аргументов
}

Результат

Loading...

Этим же способом мы можем передать несколько итерируемых объектов :

Интерактивный редактор

function learnJavaScript() { let arr1 = [1, 2, 34, 41] let arr2 = [8, 3, 18, 17] let arr3 = [2, 4, 16, 38] return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3) }

function learnJavaScript() {
  let arr1 = [1, 2, 34, 41]
  let arr2 = [8, 3, 18, 17]
  let arr3 = [2, 4, 16, 38]

  return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3)
}

Результат

Loading...

Круто! Очень гибкий подход к программированию. Можно также комбинировать оператор расширения с обычными значениями.

Слияния массивов

Оператор расширения ...spread можно использовать и для слияния массивов :

Интерактивный редактор

function learnJavaScript() { let arr1 = [3, 5, 7] let arr2 = [4, 2, 8] let merged = [100, ...arr1, 500, ...arr2] let str = 'Массив: ' + merged return <b>{str}</b> }

function learnJavaScript() {
  let arr1 = [3, 5, 7]
  let arr2 = [4, 2, 8]

  let merged = [100, ...arr1, 500, ...arr2]
  let str = 'Массив: ' + merged

  return <b>{str}</b>
}

Результат

Loading...

Преобразование в строку

Функционал⚙️ оператора расширения ...spread работает с любым перебираемым объектом.

Например, оператор расширения подойдёт для превращения строки в массив символов :

let str = 'Привет, Alex!'
let result = [...str]

Посмотрим, что происходит. Под капотом оператор расширения использует итераторы, чтобы перебирать элементы. Так же, как это делает for..of.

Цикл for..of перебирает строку как последовательность символов, поэтому из ...str получается "П", "р", "и", "в", "е", "т"... Получившиеся символы собираются в массив при помощи стандартного объявления массива [...str].

Для этой задачи мы можем использовать и Array.from. Он тоже преобразует перебираемый объект (такой как строка) в массив :

let str = 'Привет'
Array.from(str) // "П", "р", "и", "в", "е", "т"
// Array.from преобразует перебираемый объект в массив

Результат аналогичен [...str]. Но между Array.from(obj) и [...obj] есть разница:

• Array.from работает как с псевдомассивами, так и с итерируемыми объектами.
• Оператор расширения ...spread работает только с итерируемыми объектами.

Поэтому Array.from — более универсальный метод.

Итого

Когда мы видим "..." в коде , это могут быть как остаточные параметры ...rest, так и оператор расширения ...spread.

Как отличить их друг от друга:

• Если ... располагается в конце списка аргументов функции, то это "остаточные параметры". Он собирает остальные неуказанные аргументы и делает из них массив.
• Если ... встретился в вызове функции или где-либо ещё, то это "оператор расширения". Он извлекает элементы из массива для инициализации работы функции.

Полезно запомнить:

• Остаточные параметры используются, чтобы создавать новые функции с неопределённым числом аргументов.
• С помощью оператора расширения можно вставить массив в функцию, которая по умолчанию работает с обычным списком аргументов.
• Вместе эти конструкции помогают легко преобразовывать наборы значений в массивы и обратно.

Проблемы?

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы

Если ... располагается в конце списка аргументов функции, то мы имеет дело с:

1. Остаточным параметром
2. Оператором расширения
3. Случайными показателями

Для создания функции с неопределённым числом аргументов используют:

1. Остаточные параметры ...rest
2. Оператор расширения ...spread
3. Внешние функции вызова

Объединить два массива в один можно используя:

1. Оператор расширения ...rest
2. Оператор расширения ...spread

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

Ссылки

1. MDN web doc. Статья "spread syntax"
2. Статья "Остаточные параметры и оператор расширения"
3. Статья "Оператор spread и rest"

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨