Престижность Брэндону Морелли. Он прекрасно объяснил здесь , но ссылки могут умереть, поэтому я просто вставляю содержание ниже:
Синтаксис распространения состоит из трех точек: ...
он позволяет итерацию расширяться в местах, где ожидается 0+ аргументов. Определения жесткие без контекста. Давайте рассмотрим несколько различных вариантов использования, чтобы понять, что это значит.
Пример # 1 - Вставка массивов
Посмотрите на код ниже. В этом коде мы не используем синтаксис распространения:
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];
console.log(arr);
Выше мы создали массив с именем mid. Затем мы создаем второй массив, который содержит наш midмассив. Наконец, мы выходим из результата. Что вы ожидаете arrнапечатать? Нажмите Run выше, чтобы увидеть, что происходит. Вот вывод:
[1, 2, [3, 4], 5, 6]
Это результат, который вы ожидали? Вставив midмассив в arrмассив, мы получили массив в массиве. Хорошо, если это было целью. Но что, если вам нужен только один массив со значениями от 1 до 6? Для этого мы можем использовать синтаксис распространения! Помните, что синтаксис распространения позволяет расширять элементы нашего массива. Давайте посмотрим на код ниже. Все то же самое - за исключением того, что теперь мы используем синтаксис распространения для вставки midмассива в arrмассив:
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr);
И когда вы нажмете кнопку запуска, вот результат:
[1, 2, 3, 4, 5, 6]
Потрясающие! Помните определение синтаксиса распространения, которое вы только что прочитали? Вот где это входит в игру. Как вы можете видеть, когда мы создаем arrмассив и используем оператор распространения в midмассиве, а не просто вставляем, midмассив расширяется. Это расширение означает, что каждый элемент midмассива вставляется в arrмассив. Вместо вложенных массивов результатом является один массив чисел в диапазоне от 1 до 6.
Пример №2. Математика В
JavaScript есть встроенный математический объект, который позволяет нам выполнять некоторые забавные математические вычисления. В этом примере мы рассмотрим Math.max(). Если вы незнакомы, Math.max()возвращает наибольшее из нуля или более чисел. Вот несколько примеров:
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100
Как видите, если вы хотите найти максимальное значение нескольких чисел, Math.max()требуется несколько параметров. К сожалению, вы не можете просто использовать один массив в качестве входных данных. До синтаксиса распространения самый простой способ использовать Math.max()массив.apply()
var arr = [2, 4, 8, 6, 0];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr));
Это работает, это просто очень раздражает. Теперь посмотрим, как мы делаем то же самое с синтаксисом распространения:
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
Вместо того, чтобы создавать функцию и использовать метод apply для возврата результата Math.max(), нам нужны только две строки кода! Синтаксис распространения расширяет наши элементы массива и вводит каждый элемент в нашем массиве индивидуально в Math.max()метод!
Пример # 3 - Копирование массива
В JavaScript вы не можете просто скопировать массив, установив новую переменную, равную уже существующему массиву. Рассмотрим следующий пример кода:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
Когда вы нажмете кнопку run, вы получите следующий вывод:
['a', 'b', 'c']
Теперь, на первый взгляд, похоже, что это сработало - похоже, что мы скопировали значения arr в arr2. Но это не то, что случилось. Видите ли, при работе с объектами в JavaScript (массивы являются типом объекта) мы назначаем по ссылке, а не по значению. Это означает, что arr2 был назначен той же ссылке, что и arr. Другими словами, все, что мы делаем с arr2, также влияет на исходный массив arr (и наоборот). Посмотрите ниже:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
arr2.push('d');
console.log(arr);
Выше мы вставили новый элемент d в arr2. Тем не менее, когда мы выйдем из значения arr, вы увидите, что значение d также было добавлено в этот массив:
['a', 'b', 'c', 'd']
Не нужно бояться, хотя! Мы можем использовать оператор распространения! Рассмотрим код ниже. Это почти так же, как и выше. Однако вместо этого мы использовали оператор распространения в паре квадратных скобок:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
Нажмите Run, и вы увидите ожидаемый результат:
['a', 'b', 'c']
Выше значения массива в arr расширены, чтобы стать отдельными элементами, которые затем были назначены для arr2. Теперь мы можем изменить массив arr2 настолько, насколько нам хотелось бы, без последствий для исходного массива arr:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
arr2.push('d');
console.log(arr);
Опять же, причина, по которой это работает, заключается в том, что значение arr расширяется, чтобы заполнить скобки нашего определения массива arr2. Таким образом, мы устанавливаем arr2 равным отдельным значениям arr вместо ссылки на arr, как мы это делали в первом примере.
Бонусный пример - строка в массив
В качестве забавного финального примера вы можете использовать синтаксис распространения для преобразования строки в массив. Просто используйте синтаксис распространения в паре квадратных скобок:
var str = "hello";
var chars = [...str];
console.log(chars);