В этом мануале речь пойдет о 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-оператору вы найдете здесь.