Вот 6 способов использовать оператор спреда с массивом в 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: Синтаксис спреда позволяет расширять итерабильный, такой как выражение массива или строка в местах, где ожидаются ноль или более аргументов (для вызовов функций) или элементы (для литералов массива), или выражение объекта будет расширено в местах, где ноль. Или ожидается более пары ключевых значений (для объектных литералов).
Ясно, как грязь справа 😂 Распространение потребовалось много времени, чтобы понять. Итак, позвольте мне попытаться объяснить с двумя аналогиями, которые помогли мне. Надеюсь, это также может помочь вам 🤞
Распространение похоже на русские куклы
Синтаксис спреда берет ваш массив и расширяет его в элементы. Представьте, что ваш массив похож на те русские куклы. Когда вы назовите на него синтаксис спреда, она вытащит вложенную отдельную куклу и выложите ее в свои отдельные произведения.
Кредит: Википедия
Распространение похоже на ластик
Если аналогия русских кукол не помогла и распространилась, все еще грязная для вас 😵 В этом случае просто подумайте о ... Синтаксис как ластик, который удаляет кронштейны массива 😂
[ ...[1, 2, 3] // 👈 The dots erases the brackets ] /* Becoming this: */ [ 1, 2, 3 // 👈 "Erased" ]
Манипуляция массива
Лучшая вещь в синтаксисе распространения – это использовать его для манипуляции с массивом 👏
1. Используйте спред для слияния массива
Допустим, у нас есть 2 массива.
const array1 = [1, 2, 3]; const array2 = [4, 5, 6];
Давайте посмотрим, что произойдет, когда мы пытаемся объединить массив без синтаксиса распространения.
const attemptToMerge = [array1, array]; attemptToMerge; // [ [1, 2, 3], [4, 5, 6] ] 👈 😱
👆 Когда вы пытаетесь объединить массив без синтаксиса распространения, вы оказываетесь с вложенным или многомерным массивом.
Итак, давайте используем синтаксис спреда, чтобы «стирать» кронштейны.
const mergedArray = [ ...array1, ...array2 ]; mergedArray; // [ 1, 2, 3, 4, 5, 6 ]
2. Массив клонов
Массив клонирования в JavaScript не так просто. Итак, давайте посмотрим, что это сделано 2 путями – неправильный путь и правильный путь 🛣
Массив клонирования в неправильном пути
В 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
О, yikes 😱 Изменение Newarray будет мутировать оригинальный массив 👎
Думайте о ссылках как о адресах. Когда мы создаем копию массива, используя = , мы только скопировали адрес. Мы не скопировали основной массив, что мы хотим. Для этого нам нужно скопировать массив по новому адресу. Таким образом, когда мы вносим изменения в наш новый массив, это не повлияет на первоначальный массив – потому что они в разных адресах.
Массив клонирования правильного пути
const original = ['zero', 'one']; const newArray = [...original]; original; // ['zero', 'one'] newArray; // ['zero', 'one']
Так что, если мы сделали это правильно, наш оригинал Массив не должен быть затронут, если мы изменили Newarray Анкет Хорошо, давайте попробуем 💪
newArray[1] = '💩'; newArray; // ['zero', '💩'] original; // ['zero', 'one'] ✅ original array is NOT affected
Иеры для массива
При распространении преобразование различных типов данных в массив никогда не было проще 👏
3. Строка для массива
Когда мы распространяем строка , он вернет массив отдельных подстроков.
const string = 'hi'; const array = [...string]; array; // [ 'h' , 'i' ]
4. Установить на массив
Давайте создадим новый установить объект:
const set = new Set([1, 2, 3]);
set;
// Set(3) {1, 2, 3}
Используя спред, мы можем преобразовать установить в массиве:
const array = [...set]; array; // [1, 2, 3]
5. Список узлов на массив
Давайте создадим список узлов:
const nodeList = document.querySelectorAll('p');
nodeList;
// [p, p, p]
Теперь мы можем использовать спред для преобразования нашего списка узлов в массив:
const array = [...nodeList]; array;
6. Аргументы на массив
Прежде чем мы начнем, давайте потратим некоторое время, чтобы понять, что такое аргументы Объекты есть.
MDN: Аргументы-это массивоподобный объект, доступный внутри функций, который содержит значения аргументов, передаваемых этой функции.
👆 Обратите внимание на ключ, массив – Так что это похоже на массив, но это не (о, JS, всегда делает вещи такими веселыми для нас, чтобы понять вас 😅). Преимущество преобразования объекта аргументов в массив означает, что у нас есть доступ ко всем удивительным методам массива (т.е. карта , фильтр , Найти ) 👍
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 : Split даст больше вариантов, учитывая, что это займет сепаратор и ограничение
@mohammed_mamoun_98 : Если вы объединили два массива без распространения, это будет двумерный массив, но плоский сделает его одним измерением, так что это более эффективно, я думаю. Можешь попробовать
@bukazoltan :
min ()иmax ()Метод не может принять массив в качестве ввода, поэтому распространение тоже может решить эту проблему … Это спасло мне много головных болей.
array = [1, 2, 3, 4, 5]; var minimum = Math.min(...array); var maximum = Math.max(...array);
Ресурсы
- Code Tidbit: разделенная строка с использованием спреда ES6
- MDN Веб -документы: Распространение синтаксиса
- MDN Веб -документы: Установлен
- MDN Веб -документы: Аргументы объект
- Чтобы найти больше кода, посетите, пожалуйста, посетите Samanthaming.com
Спасибо за чтение ❤ Скажи привет! Instagram | Twitter | Samanthaming.com
Оригинал: “https://dev.to/samanthaming/6-use-cases-of-spread-with-array-in-javascript-2n53”