Как работает spread-оператор в JavaScript

Development, Java | Amber | Комментировать запись

В этом мануале речь пойдет о spread-операторе в JavaScript. Также мы рассмотрим некоторых практических применений этой мощной функции.

spread-оператор – это функция JavaScript, которая появилась в спецификации ES6. Данный оператор дает доступ к внутренней части итеративного объекта. Понятие «итеративный объект» (также итерируемый, перебираемый объект) в информатике на самом деле является просто термином для описания категории типов данных. К таким типам относятся, в частности, массивы, объектные литералы и строки.

Читайте также: Типы данных в JavaScript

Что делает эти типы «итерируемыми»? Эти типы данных JavaScript можно последовательным образом перебрать. Например, вы можете использовать цикл for или for…in, чтобы перебрать все элементы в массиве или объектном литерале.

По сути spread-оператор быстро дает вам доступ к «материалу», из которого состоят такие итерируемые объекты. Давайте рассмотрим такой пример, который показывает, что это означает:

const foo = [
  'hello',
  'bonjour',
  'konnichiwa'
];
const bar = [...foo]; // the three dots "..." are the spread operator syntax!

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa'];

Переменная bar получила точную копию foo!

const foo = [
  <^>'hello',
  'bonjour',
  'konnichiwa'<^>
]
const bar = [...foo]

Таким образом, spread-оператор по сути извлек внутреннюю часть массива foo и распространил значения по новому массиву в bar.

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

Дублирование итерируемых объектов

Как мы видели ранее, spread-оператор – один из лучших способов дублировать итерируемый объект. Есть более сложные способы сделать это, но spread-оператор делает это проще и быстрее всего.

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ...foo; // uh-oh :<

Что пошло не так? Чтобы это сработало, вы должны поместить объект в bar в квадратные скобки:

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo]; // woohoo! :>

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa']

Дублирование объектных литералов при помощи spread-оператора не сильно отличается от массивов. Только не забудьте добавить скобки:

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {...foo};

console.log(bar);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa' }

Слияние итерируемых объектов

spread-оператор также может собирать одно значение из нескольких других.

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = ['gutentag', 'hello-ey'];
const baz = [...foo, ...bar];

console.log(baz);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

Здесь baz – это объединенное значение, полученное путем слияния foo и bar. Также оператор позволяет поместить расширенный массив в другой массив:

const foo = ['hello', 'bonjour', 'konnichiwa'];
const bar = [...foo, 'gutentag', 'hello-ey'];

console.log(bar);
// ['hello', 'bonjour', 'konnichiwa', 'gutentag', 'hello-ey']

Сейчас опытные разработчики JavaScript могут подумать, что это выглядит странно. Но помните, что spread-оператор содержит только «материал». Куда вы его положите, решать вам!

Что касается объектных литералов, то это очень похоже на слияние массивов:

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  german: 'gutentag',
  canadian: 'hello-ey'
};
const baz = {...foo, ...bar};

console.log(baz);
// { english: 'hello', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey' }

Раньше это было задачей Object.assign(), но синтаксис spread-оператора гораздо короче и проще.

А что происходит при слиянии объектов, в которых есть одинаковые ключи?

const foo = {
  english: 'hello',
  french: 'bonjour',
  japanese: 'konnichiwa'
};
const bar = {
  english: 'howdy',
  german: 'gutentag'
};
const baz = {
  ...foo,
  ...bar,
  canadian: 'hello-ey',
  korean: 'annyeong'
};

console.log(baz);
// { english: 'howdy', french: 'bonjour', japanese: 'konnichiwa', german: 'gutentag', canadian: 'hello-ey', korean: 'annyeong' }

Как видите, повторяющиеся ключи перезаписываются.

Примечание: Помните, что троеточие должно идти перед переменной, а не после: «…myVariable», а не «myVariable…».

Ввод аргументов в функции

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

const cube = [12, 30, 14];

function calcVolume(width, height, depth) {
  return width * height * depth;
};

calcVolume(12, 30, 14);         // basic
calcVolume.apply(null, cube);   // using "apply"
calcVolume(...cube);          // using "spread operator"

Как видите, spread-оператор невероятно легко передает функции ряд аргументов.

Spread-оператор и строки

Также spread-оператор можно использовать со строками, поскольку они также считаются итерируемыми объектами (у него есть функции slice и length).

const foo = "jumanji";
const bar = [...foo];

console.log(bar);
// [ "j", "u", "m", "a", "n", "j", "i" ]

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

Заключение

spread-оператор – очень востребованная функция. Ранее он был доступен в старых языках, таких как C++ и Python, а теперь он есть и в JavaScript. Этот оператор упрощает выполнение общих задач программирования. Надеемся, здесь вы узнали, как его можно использовать на практике.

Подробную документацию по spread-оператору вы найдете здесь.