Рубрики
Без рубрики

Сказка о трех точках в JavaScript

Один за раз, было значительное обновление на языке JavaScript называется ES6 / ES2015. Он ввел много разных новых функций. Одним из них было три последовательных точка, которые мы можем писать перед любым совместимым контейнером (объектами, массивами, строками, наборами, картами). Эти крошечные маленькие точки позволяют нам написать более элегантный и краткий код. Я объясню, как три точки работают и показывают наиболее распространенные случаи использования. Помечено JavaScript, WebDev, начинающими.

Один за раз, было значительное обновление на языке JavaScript называется ES6/ES2015. Он ввел много разных новых функций. Одним из них было три последовательных точка, которые мы можем писать перед любым совместимым контейнером (объектами, массивами, строками, наборами, картами). Эти крошечные маленькие точки позволяют нам написать более элегантный и краткий код. Я объясню, как три точки работают и показывают наиболее распространенные случаи использования.

У трех последовательных точек имеют два значения: оператор распространения и оператор остальных.

Распространение оператора

Оператор SPREPLATE позволяет отдельным распространению или расширению индивидуально распространяться внутри приемника. Итализатор и приемник могут быть все, что можно зацикливаться подобным трафам, объектам, наборам, картам. Вы можете поместить части контейнера индивидуально в другой контейнер.

const newArray = ['first', ...anotherArray];

Параметры отдыха

Синтаксис параметра отдыха позволяет нам представлять неопределенное количество аргументов в качестве массива. Названные параметры могут быть перед параметрами отдыха.

const func = (first, second, ...rest) => {};

Случаи применения

Определения могут быть полезны, но трудно понять концепцию только что от них. Я думаю, что повседневные случаи использования могут принести недостающее понимание определений.

Копирование массива

Когда мы должны мутировать массив, но не хочу трогать оригинал (другие могут использовать его), мы должны скопировать его.

const fruits = ['apple', 'orange', 'banana'];
const fruitsCopied = [...fruits]; // ['apple', 'orange', 'banana']

console.log(fruits === fruitsCopied); // false

// old way
fruits.map(fruit => fruit);

Он выбирает каждый элемент внутри массива и размещение каждого из этих элементов в новой структуре массива. Мы можем достичь копирования массива с карта Оператор и создание идентификационного отображения.

Уникальный массив

Мы хотим разобраться с дублирующими элементами из массива. Какое самое простое решение?

Установить Объект хранит только уникальные элементы и могут быть заполнены массивом. Также также есть итоги, поэтому мы можем распространить его обратно в новый массив, и то, что мы получаем, это массив с уникальными значениями.

const fruits = ['apple', 'orange', 'banana', 'banana'];
const uniqueFruits = [...new Set(fruits)]; // ['apple', 'orange', 'banana']

// old way
fruits.filter((fruit, index, arr) => arr.indexOf(fruit) === index);

Раздатные массивы

Мы можем объединить две отдельные массивы с Concat Метод, но почему бы не использовать оператор по распространению снова?

const fruits = ['apple', 'orange', 'banana'];
const vegetables = ['carrot'];
const fruitsAndVegetables = [...fruits, ...vegetables]; // ['apple', 'orange', 'banana', 'carrot']
const fruitsAndVegetables = ['carrot', ...fruits]; // ['carrot', 'apple', 'orange', 'banana']

// old way
const fruitsAndVegetables = fruits.concat(vegetables);
fruits.unshift('carrot');

Пропускать аргументы как массивы

При прохождении аргументов находится в том, где оператор спреда начинает делать наш код более читаемым. До ES6 мы должны были применить функцию к аргументы . Теперь мы можем просто распространить параметры к функции, которая приводит к гораздо более чистому коду.

const mixer = (x, y, z) => console.log(x, y, z);
const fruits = ['apple', 'orange', 'banana'];

mixer(...fruits); // 'apple', 'orange', 'banana'

// old way
mixer.apply(null, fruits);

Нарезка массива

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

const fruits = ['apple', 'orange', 'banana'];
const [apple, ...remainingFruits] = fruits; // ['orange', 'banana']

// old way 
const remainingFruits = fruits.slice(1);

Преобразовать аргументы в массив

Аргументы в JavaScript являются массивными объектами. Вы можете получить доступ к нему с индексами, но вы не можете вызвать методы массива на нем, как карта , Фильтр Отказ Аргументы – это намерение, так что мы можем сделать с этим? Положите три точки перед ними и доступа к ним как массив!

const mixer = (...args) => console.log(args);
mixer('apple'); // ['apple']

Конвертировать odelist в массив

Аргументы похожи на Odelist Вернулся из QuerySelectorAll функция. Они также ведут себя немного как массив, но не имеют соответствующих методов.

[...document.querySelectorAll('div')];

// old way
Array.prototype.slice.call(document.querySelectorAll('div'));

Копирование объекта

Наконец, мы добираемся до объекта манипуляций. Копирование работает так же, как и с массивами. Ранее это было сделано бесплатно с Объект.assign и пустой объект буквальный.

const todo = { name: 'Clean the dishes' };
const todoCopied = { ...todo }; // { name: 'Clean the dishes' }
console.log(todo === todoCopied); // false

// old way
Object.assign({}, todo);

Объекты объединения

Единственное различие в объединении состоит в том, что свойства с одним и тем же ключом перезаписываются. Самое главное свойство имеет самый высокий приоритет.

const todo = { name: 'Clean the dishes' };
const state = { completed: false };
const nextTodo = { name: 'Ironing' };
const merged = { ...todo, ...state, ...nextTodo }; // { name: 'Ironing', completed: false }

// old way
Object.assign({}, todo, state, nextTodo);

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

Разделение струны на персонажи

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

const country = 'USA';
console.log([...country]); // ['U', 'S', 'A']

// old way
country.split('');

Вот и все

Мы смотрели на множество различных случаев использования для трех точек в JavaScript. Как вы можете видеть, ES6 не только сделало его более эффективным для записи кода, но также представила несколько забавных способов решения долгосрочных проблем. Теперь все основные браузеры поддерживают новый синтаксис; Все вышеперечисленные примеры можно попробовать в консоли браузера при чтении этой статьи. В любом случае, вы начинаете использовать оператор по распространению и параметры остальных. Это отличное дополнение к языку, о котором вы должны знать.

Оригинал: “https://dev.to/vuesomedev/the-tale-of-three-dots-in-javascript-4287”