Вот 6 способов использования оператора Spread с массивом в JavaScript. Вы можете использовать его для объединения или клонирования массива. Или используйте его для преобразования итераций в массив.

// Merge Array
[...array1, ...array2]
// Clone Array
[...array]
// Sting → Array
[...'string']
// Set  → Array
[...new Set([1,2,3])]
// Node List → Array
[...nodeList]
// Arguments → Array
[...arguments]

Понимание распространения

MDN: синтаксис Spread позволяет развернуть итерацию, например выражение массива или строку, в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массива), или выражение объекта, которое должно быть развернуто в места, где ожидается ноль или более пар "ключ-значение" (для объектных литералов).

Ясно, как грязь прямо 😂 Разбирался долго. Итак, позвольте мне попытаться объяснить с помощью двух аналогий, которые мне помогли. Надеюсь, это тоже может вам помочь 🤞

Распространение похоже на русских кукол

Синтаксис распространения берет ваш массив и расширяет его на элементы. Представьте, что ваш массив похож на этих русских кукол. Когда вы вызываете для него синтаксис распространения, он извлекает вложенную отдельную куклу и раскладывает ее по отдельным частям.

Источник: Википедия

Распространение похоже на ластик

Если аналогия с Русскими куклами не помогла, а Spread все еще неясен для вас 😵 В этом случае просто подумайте о синтаксисе ... как о ластике, удаляющем скобки в массиве 😂

[
  ...[1, 2, 3] // 👈 The dots erases the brackets
]
/*  Becoming this: */
[
  1, 2, 3 // 👈 "Erased"
]

Манипуляции с массивами

Лучшее в синтаксисе Spread - это использовать его для управления массивами 👏

1. Используйте Spread для слияния массива

Допустим, у нас есть 2 массива.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

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

const attemptToMerge = [array1, array];
attemptToMerge;
// [ [1, 2, 3],  [4, 5, 6] ] 👈 😱

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

Итак, давайте воспользуемся синтаксисом Spread, чтобы «стереть» скобки.

const mergedArray = [
  ...array1,
  ...array2
];
mergedArray;
// [ 1, 2, 3, 4, 5, 6 ]

2. Клонировать массив

Клонирование массива в JavaScript не так просто. Итак, давайте посмотрим, как это делается двумя способами - неправильным и правильным 🛣

Неправильное клонирование массива

В JavaScript массивы являются ссылочными типами, поэтому вы не можете просто создать новую копию массива, используя =. Посмотрим, какая проблема случится, если мы попробуем сделать это таким образом.

const original = ['zero', 'one'];
const newArray = original;
original; // ['zero', 'one']
newArray; // ['zero', 'one']

👆Так что пока все выглядит нормально, но давайте посмотрим, что произойдет, если мы изменим элемент.

newArray[1] = '💩';
newArray;
// ['zero', '💩']
original;
// ['zero', '💩']  👈 😱 Our original array is affected

Ой, да Изменение newArray изменит исходный массив 👎

Думайте о ссылках как о адресах. Когда мы создаем копию массива с помощью =, мы копируем только адрес. Мы НЕ скопировали базовый массив, а это то, что мы хотим. Для этого нам нужно скопировать массив по новому адресу. Таким образом, когда мы вносим изменения в наш новый массив, это не повлияет на исходный массив, потому что они находятся по разным адресам.

Правильное клонирование массива

const original = ['zero', 'one'];
const newArray = [...original];
original; // ['zero', 'one']
newArray; // ['zero', 'one']

Так что, если мы сделали это правильно, наш original массив не пострадает, если мы изменим newArray. Хорошо, давай попробуем

newArray[1] = '💩';
newArray;
// ['zero', '💩']
original;
// ['zero', 'one']  ✅ original array is NOT affected

Итерируемые объекты в массив

Благодаря Spread преобразование различных типов данных в массив никогда не было таким простым 👏

3. Строка в массив

Когда мы распространяем string, он вернет массив отдельных подстрок.

const string = 'hi';
const array = [...string];
array;
// [ 'h' , 'i' ]

4. Установите в массив

Давайте создадим новый set объект:

const set = new Set([1, 2, 3]);
set;
// Set(3) {1, 2, 3}

Используя Spread, мы можем преобразовать set в массив:

const array = [...set];
array;
// [1, 2, 3]

5. Список узлов в массив

Давайте создадим список узлов:

const nodeList = document.querySelectorAll('p');
nodeList;
// [p, p, p]

Теперь мы можем использовать Spread для преобразования нашего списка узлов в массив:

const array = [...nodeList];
array;

6. Аргументы массива

Прежде чем мы начнем, давайте разберемся, что такое arguments объекты.

MDN: arguments - это объект типа Array, доступный внутри функций, который содержит значения аргументов, переданных этой функции.

👆 Обратите внимание на ключ, array-like. Итак, это похоже на массив, но это не так 😅 Таким образом, преимущество преобразования объекта arguments в массив означает, что у нас есть доступ ко всем замечательным методам массива (например, map, filter, find) 👍

function names() {
  arguments;
  // Arguments(4)['samantha', 'sam']
  arguments.map(name => `hi ${name}`);
  // ❌ TypeError: arguments.map is not a function
}
names('samantha', 'sam');

Хорошо, давайте преобразуем наши аргументы в массив, чтобы мы могли применить к нему методы массива 🙌

function names() {
  const argumentsArray = [...arguments];
  argumentsArray.map(name => `hi ${name}`);
  // ✅ ['hi samantha', 'hi sam']
}
names('samantha', 'sam');

Вклад сообщества

  • @harmleprinze: Разделение предоставит больше возможностей, учитывая, что он принимает разделитель и ограничение
  • @ mohammed_mamoun_98: Если вы объедините два массива без распространения, это будет двумерный массив, но плоский, сделайте его одномерным, так что я думаю, это будет более эффективно. Можешь попробовать

Ресурсы

Спасибо за чтение ❤
Чтобы найти больше интересных моментов, посетите samanthaming.com

🎨 Instagram | 🌟 Twitter | 👩🏻‍💻 SamanthaMing.com