Спред-синтаксис `...`

Упрощает создание объектов и массивов на основе других объектов и массивов.

Время чтения: 5 мин

Кратко

Скопировано

Спред-синтаксис (spread) ... позволяет передавать итерируемые коллекции (например, массивы или строки) как список аргументов функции или добавлять содержащиеся в них элементы в новый массив.

Спред применятся и для объектов, чтобы копировать пары ключ-значение из одного объекта в другой.

Пример

Скопировано

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

        
          
          function multiplyThreeNumbers(a, b, c) {  return a * b * c}const nums = [1, 2, 3]console.log(multiplyThreeNumbers(...nums))// 6
          function multiplyThreeNumbers(a, b, c) {
  return a * b * c
}

const nums = [1, 2, 3]

console.log(multiplyThreeNumbers(...nums))
// 6

В массиве скопировать элементы из другого массива в новый:

        
          
          const donor = ['это', 'старые', 'значения']const newArray = [...donor, 1, true, 'мама']console.log(newArray)// ['это', 'старые', 'значения', 1, true, 'мама']
          const donor = ['это', 'старые', 'значения']
const newArray = [...donor, 1, true, 'мама']

console.log(newArray)
// ['это', 'старые', 'значения', 1, true, 'мама']

У объекта скопировать свойства из другого объекта в новый:

        
          
          const persona = { name: 'Иван', lastName: 'Объектов'}const userData = { ...persona, username: 'killer3000' }console.log(userData)// {//    name: 'Иван',//    lastName: 'Объектов',//    username: 'killer3000'// }
          const persona = { name: 'Иван', lastName: 'Объектов'}
const userData = { ...persona, username: 'killer3000' }

console.log(userData)
// {
//    name: 'Иван',
//    lastName: 'Объектов',
//    username: 'killer3000'
// }

Как понять

Скопировано

Спред-синтаксис легче всего изучать на примерах. Есть три контекста, в которых он применяется.

При вызове функции

Скопировано

Часто встречается ситуация, когда мы хотим использовать данные из итерируемой коллекции в качестве аргументов функции. Чаще всего такая коллекция — массив. Если функция не умеет принимать массив аргументом, то придётся доставать элементы вручную:

        
          
          function multiplyThreeNumbers(a, b, c) {  return a * b * c}const nums = [1, 2, 3]console.log(multiplyThreeNumbers(nums[0], nums[1], nums[2]))// 6
          function multiplyThreeNumbers(a, b, c) {
  return a * b * c
}

const nums = [1, 2, 3]

console.log(multiplyThreeNumbers(nums[0], nums[1], nums[2]))
// 6

Если элементов становится больше, доставать значения вручную становится неудобно. Чтобы решить эту проблему, в старых версиях языка использовали метод apply(). Этот метод принимает первым аргументом значение this, а вторым — список аргументов для вызова функции:

        
          
          function multiplyThreeNumbers(a, b, c) {  return a * b * c}const nums = [1, 2, 3]console.log(multiplyThreeNumbers.apply(null, nums))// 6
          function multiplyThreeNumbers(a, b, c) {
  return a * b * c
}

const nums = [1, 2, 3]

console.log(multiplyThreeNumbers.apply(null, nums))
// 6

Такой синтаксис сложно читается, его нельзя использовать при создании объектов с помощью конструктора new. Его упростили до спред-синтаксиса. В этом случае элементы как бы выкладываются из списка в нужном порядке:

        
          
          function multiplyThreeNumbers(a, b, c) {  return a * b * c}const nums = [1, 2, 3]console.log(multiplyThreeNumbers(...nums))// 6
          function multiplyThreeNumbers(a, b, c) {
  return a * b * c
}

const nums = [1, 2, 3]

console.log(multiplyThreeNumbers(...nums))
// 6

Если в массиве будет больше элементов, чем параметров функции, то будут использованы только те элементы, которые идут первыми по порядку:

        
          
          function multiplyThreeNumbers(a, b, c) {  return a * b * c}const nums = [1, 2, 3, 5, 6]console.log(multiplyThreeNumbers(...nums))// 6
          function multiplyThreeNumbers(a, b, c) {
  return a * b * c
}

const nums = [1, 2, 3, 5, 6]

console.log(multiplyThreeNumbers(...nums))
// 6

При создании массивов с помощью литерала `[]`

Скопировано

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

        
          
          const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']const watchedVideos = ['Rick&Morty', 'lofi hip hop radio'].concat(watchedMovies)console.log(watchedVideos)// ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix']
          const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']
const watchedVideos = ['Rick&Morty', 'lofi hip hop radio'].concat(watchedMovies)

console.log(watchedVideos)
// ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix']

Спред решает эту проблему лучше:

        
          
          const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']const watchedVideos = ['Rick&Morty', 'lofi hip hop radio', ...watchedMovies]console.log(watchedVideos)// ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix']
          const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']
const watchedVideos = ['Rick&Morty', 'lofi hip hop radio', ...watchedMovies]

console.log(watchedVideos)
// ['Rick&Morty', 'lofi hip hop radio', 'Rocky', 'Terminator 2', 'The Matrix']

Таким образом можно создать копию существующего массива:

        
          
          const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']const myWatchedMovies = [...watchedMovies]
          const watchedMovies = ['Rocky', 'Terminator 2', 'The Matrix']
const myWatchedMovies = [...watchedMovies]

Или склеить несколько массивов в один:

        
          
          const movies = ['Rocky', 'Terminator 2', 'The Matrix']const series = ['Prison Break', 'Rick&Morty', 'Lost']const watched = [...movies, ...series]// [//  'Rocky',//  'Terminator 2',//  'The Matrix',//  'Prison Break',//  'Rick&Morty',//  'Lost'// ]
          const movies = ['Rocky', 'Terminator 2', 'The Matrix']
const series = ['Prison Break', 'Rick&Morty', 'Lost']

const watched = [...movies, ...series]
// [
//  'Rocky',
//  'Terminator 2',
//  'The Matrix',
//  'Prison Break',
//  'Rick&Morty',
//  'Lost'
// ]

Пример поведения с уровнем вложенности больше одного:

        
          
          const users = [{ name: 'Иван', lastName: 'Объектов' }]const copyUsers = [...users]copyUsers[0].name = 'Николай'console.log(users[0])// { name: 'Николай', lastName: 'Объектов' }
          const users = [{ name: 'Иван', lastName: 'Объектов' }]
const copyUsers = [...users]

copyUsers[0].name = 'Николай'
console.log(users[0])
// { name: 'Николай', lastName: 'Объектов' }

При создании объекта с помощью литерала `{}`

Скопировано

По аналогии с массивами, спред-синтаксис решает проблему копирования свойств в новый объект. В версии языка без спреда для копирования использовался метод Object.assign(), который принимал два объекта — куда копировать свойства и откуда:

        
          
          const person = { name: 'Иван', lastName: 'Объектов' }const userData = Object.assign({ username: 'killer3000' }, person)console.log(userData)// {//    name: 'Иван',//    lastName: 'Объектов',//    username: 'killer3000'// }
          const person = { name: 'Иван', lastName: 'Объектов' }
const userData = Object.assign({ username: 'killer3000' }, person)

console.log(userData)
// {
//    name: 'Иван',
//    lastName: 'Объектов',
//    username: 'killer3000'
// }

Спред упрощает код и делает его читабельнее:

        
          
          const person = { name: 'Иван', lastName: 'Объектов' }const userData = { username: 'killer3000', ...person }console.log(userData)// {//    name: 'Иван',//    lastName: 'Объектов',//    username: 'killer3000'// }
          const person = { name: 'Иван', lastName: 'Объектов' }
const userData = { username: 'killer3000', ...person }

console.log(userData)
// {
//    name: 'Иван',
//    lastName: 'Объектов',
//    username: 'killer3000'
// }

Если свойства в новом и старом объекте совпадают, то будет использоваться значение свойства, которое шло последним:

        
          
          const person = { name: 'Иван', lastName: 'Объектов' }const userData = { name: 'Николай', ...person }console.log(userData)// { name: 'Иван', lastName: 'Объектов' }
          const person = { name: 'Иван', lastName: 'Объектов' }
const userData = { name: 'Николай', ...person }

console.log(userData)
// { name: 'Иван', lastName: 'Объектов' }

Если поставить спред в начало, то будет использоваться новое имя:

        
          
          const person = { name: 'Иван', lastName: 'Объектов' }const userData = { ...person, name: 'Николай' }console.log(userData)// { name: 'Николай', lastName: 'Объектов' }
          const person = { name: 'Иван', lastName: 'Объектов' }
const userData = { ...person, name: 'Николай' }

console.log(userData)
// { name: 'Николай', lastName: 'Объектов' }

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Спред на объектах используют в библиотеке React. Программист может передать в функцию объект с произвольными свойствами, но мы хотим запретить устанавливать некоторые из них. В этом случае создаётся новый объект, в который сначала копируются присланные значения, а потом значения «запрещённых» свойств. В этом случае даже если запрещённое свойство было передано, оно будет перезаписано:

        
          
          function Headline(props) {  const filteredProps = {...props, ariaHidden: false}  return createElement('h1', filteredProps, 'Текст заголовка')}
          function Headline(props) {
  const filteredProps = {...props, ariaHidden: false}
  return createElement('h1', filteredProps, 'Текст заголовка')
}

На собеседовании

Скопировано

Задать вопрос в рубрику

🤚 Я знаю ответ

Даниал Доскужинов отвечает

Скопировано

Rest- и spread-операторы являются частью синтаксиса JavaScript. Они выполняют разные функции, хотя могут быть похожи в некоторых случаях. Давайте рассмотрим их отличия.

Оператор `rest` (`...`)

Скопировано

Rest-оператор используется для сбора оставшихся аргументов функции в массив.

        
          
          function sum(...args) {  return args.reduce((total, num) => total + num, 0)}console.log(sum(1, 2, 3, 4))// 10
          function sum(...args) {
  return args.reduce((total, num) => total + num, 0)
}
console.log(sum(1, 2, 3, 4))
// 10

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

Оператор `spread` (`...`)

Скопировано

Spread-оператор используется для распространения элементов массива или свойств объекта.

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

Оператор spread также используется для создания поверхностных копий массивов или объектов.

        
          
          const originalArray = [1, 2, 3]const copiedArray = [...originalArray]console.log(copiedArray)// [1, 2, 3]
          const originalArray = [1, 2, 3]
const copiedArray = [...originalArray]
console.log(copiedArray)
// [1, 2, 3]

Таким образом, основное отличие между rest- и spread-операторами заключается в их применении. Rest используется для сбора аргументов в функции, тогда как spread — для распространения элементов массивов или объектов.

Ирина Аринушкина отвечает

Скопировано

Операторы spread и rest выглядят одинаково, как три точки — ..., но выполняют противоположные действия.

Что делает оператор `rest`?

Скопировано

Собирает оставшиеся аргументы функции в массив. Этот синтаксис используется при объявлении функции.

        
          
          function doSomething(first, second, ...array) {  console.log(first, second, array)}doSomething(1, 2, 3, 4, 5)// 1 2 [3, 4, 5]
          function doSomething(first, second, ...array) {
  console.log(first, second, array)
}
doSomething(1, 2, 3, 4, 5)
// 1 2 [3, 4, 5]

Собирает оставшиеся элементы массива в новый массив. Используется при деструктуризации массива.

        
          
          const [first, second, ...array] = [1, 2, 3, 4, 5]console.log(first, second, array)// 1 2 [3, 4, 5]
          const [first, second, ...array] = [1, 2, 3, 4, 5]
console.log(first, second, array)
// 1 2 [3, 4, 5]

Собирает оставшиеся свойства объекта в новый объект. Используется при деструктуризации объекта.

        
          
          const { c, ...object } = { a: 1, b: 2, c: 3 }console.log(c, object)// 3 {a: 1, b: 2}
          const { c, ...object } = { a: 1, b: 2, c: 3 }
console.log(c, object)
// 3 {a: 1, b: 2}

⛔ Оператор rest собирает все оставшиеся элементы, свойства или аргументы функции, если написать что-то после них, это вызовет ошибку:

        
          
          const [first, second, ...array, five] = [1, 2, 3, 4, 5]// five после ...array// Ошибка!
          const [first, second, ...array, five] = [1, 2, 3, 4, 5]
// five после ...array
// Ошибка!

Что делает оператор `spread`?

Скопировано

Раскладывает массив на отдельные аргументы при вызове функции.

        
          
          function doSomething(first, second, third) {  console.log(first, second, third)}const array = [1, 2, 3]doSomething(...array)// 1 2 3
          function doSomething(first, second, third) {
  console.log(first, second, third)
}
const array = [1, 2, 3]
doSomething(...array)
// 1 2 3

Раскладывает массив на отдельные элементы. Этот синтаксис используется при создании массива с помощью литерала [].

        
          
          const array = [3, 4]const newArray = [1, 2, ...array, 5]console.log(newArray)// [1, 2, 3, 4, 5]
          const array = [3, 4]
const newArray = [1, 2, ...array, 5]
console.log(newArray)
// [1, 2, 3, 4, 5]

Раскладывает объект на отдельные свойства. Этот синтаксис используется при создании объекта с помощью литерала {}.

        
          
          const object = { b: 2, c: 3 }const newObject = { a: 1, ...object }console.log(newObject)// { a: 1, b: 2, c: 3}
          const object = { b: 2, c: 3 }
const newObject = { a: 1, ...object }
console.log(newObject)
// { a: 1, b: 2, c: 3}

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

Так тоже можно:

        
          
          const firstArray = [3, 4]const secondArray = [15, 16]const newArray = [1, 2, ...firstArray, 5, ...secondArray]console.log(newArray)// [1, 2, 3, 4, 5, 15, 16]
          const firstArray = [3, 4]
const secondArray = [15, 16]
const newArray = [1, 2, ...firstArray, 5, ...secondArray]
console.log(newArray)
// [1, 2, 3, 4, 5, 15, 16]

Кратко

Пример

Как понять

При вызове функции

При создании массивов с помощью литерала []

При создании объекта с помощью литерала {}

На практике

Николай Лопин советует

На собеседовании

Даниал Доскужинов отвечает

Оператор rest (...)

Оператор spread (...)

Ирина Аринушкина отвечает

Что делает оператор rest?

Что делает оператор spread?

Читайте также

Итератор

Array.from()

Объект

При создании массивов с помощью литерала `[]`

При создании объекта с помощью литерала `{}`

Оператор `rest` (`...`)

Оператор `spread` (`...`)

Что делает оператор `rest`?

Что делает оператор `spread`?

`Array.from()`