JavaScript ES6 — Синтаксис спреда

Синтаксис распространения — одна из самых захватывающих функций в JavaScript ES6. В этой статье мы собираемся изучить несколько часто используемых сценариев синтаксиса распространения.

Расширить вставленный массив

Вот список членов команды разработчиков:

var members = ['Amy', 'Denise', 'Kate'];

Теперь к нам присоединились новые участники:

var newMembers = ['Bella', 'Dave'];

Чтобы добавить новых участников в команду, мы просто складываем два массива вместе:

var members = ['Amy', 'Denise', 'Kate'];
var newMembers = ['Bella', 'Dave'];
var team = [members, newMembers];

Давайте проверим вывод в панели консоли:

Вместо вставки новых элементов в исходный массив старые элементы и новые элементы были разделены на два массива. Босс, вероятно, не будет рад видеть, что команда так разделена; поэтому нам нужно что-то сделать, чтобы объединить всех участников в команду. Для достижения этой цели синтаксис распространения может оказать нам большую помощь:

var members = ['Amy', 'Denise', 'Kate'];
var newMembers = ['Bella', 'Dave'];
var team = [...members, ...newMembers];

Теперь все члены одной большой семьи!

Копировать массив

Далее мы представляем еще одно полезное использование синтаксиса распространения — копирование массива.

Здесь у нас есть промежуточные результаты Эми по трем предметам:

var midterm = [{math: 80, history: 60, chemistry: 90 }];

Теперь учитель попытался записать итоговые результаты экзамена Эми, скопировав ее промежуточные результаты, а затем изменив оценки:

var final = midterm;
final.math = 50;
final.history = 70;
final.chemistry = 20;

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

Причина этого в том, что массив final был присвоен той же ссылке, что и массив midterm, вместо создания другой копии массива. Чтобы избежать переопределения исходных оценок, мы можем использовать синтаксис распространения следующим образом:

var final = [...midterm];
final.math = 50;
final.history = 70;
final.chemistry = 20;

Теперь у нас правильно записаны как промежуточные, так и окончательные результаты Эми!

Использование математических методов

JavaScript предоставляет нам несколько методов для выполнения математических вычислений. Например, вот у нас есть массив и мы пытаемся найти в нем наибольшее значение. Раньше для этого можно было использовать apply:

var numbers = [2, 5, 6, 8, 11, 15];
function getMax(arr){
   return Math.max.apply(null, arr);
}
console.log(getMax(numbers));

После выпуска ES6 теперь мы можем реализовать это более элегантным способом, используя синтаксис распространения:

var numbers = [2, 5, 6, 8, 11, 15];
var max = Math.max(...numbers);
console.log(max);

Синтаксис распространения сделал нашу жизнь проще, не так ли!