Когда вы посмотрите на большую часть общих языков программирования, связанные с веб, все они имеют основные операторы, которые почти каждый разработчик там знает, как их использовать. Но есть некоторые операторы, которые не имеют большого общего, а не каждый язык имеет их или если они это сделают, они могут не поделиться тем же синтаксисом. Но для новичков на язык, пытаясь прочитать код другого и не имея инструментов, необходимых для понимания концепций между технологиями, это может быть проблемой. Таким образом, в этой статье я собираюсь поговорить об одном самым недооцененным и печально известным «Распространение» Оператор A.K.A Три точка (…). Приходить! Давайте начнем исследую!
JavaScript видел огромные улучшения в его синтаксисе и функциональности за последние несколько лет с добавлением кучка новых функций. Спред является одним из самых полезных, а также самый простой способ пойти, если вы хотите обновить часть данных в объекте при создании нового объекта. Это очень мощный кусок синтаксиса, который имеет много приложений в программировании. На данный момент трудно отследить их всех. Таким образом, давайте выкопадием некоторые из наиболее распространенных случаев использования оператора распространения.
Давайте понять это с небольшим примером. Кто ваши любимые крикет? Мой? Его Дтони и Райна, очевидно. Хорошо. Давайте возьмем это в массиве.
let favourites = ["Dhoni","Raina"] let copy = [...favourites] console.log(copy); // ["Dhoni","Raina" ]
Если вы посмотрите по-другому, оператор SPREPS выбирает каждый отдельный элемент внутри избранного массива и помещает каждый из этих элементов в новой структуре массива, что является чем-то вроде распространения. Теперь вы можете подумать, что произойдет, если нет распространения оператора.
let favourites = ["Dhoni","Raina"] let copy = [favourites] console.log(copy); // [["Dhoni","Raina" ]]
Это разные, потому что мы получаем многомерное массив (массив внутри массива).
Здание на предыдущем примере, давайте скажем, я хочу, чтобы новый игрок был в списке избранного. Оператор распространения предоставляет простой и эффективный способ сделать это.
let favourites = ["Dhoni","Raina"] console.log(...favourites,"Smith"); // Dhoni Raina Smith
Так просто, как, что. Здесь мы не получаем массив, так как мы не просим структуру массива в отличие от нас в предыдущем случае. Таким образом, этот способ обновить ваши данные без фактического перезаписи к существующим данным.
Оператор по распространению также работает со распространением строки. Одним из практических примеров является извлечение символов из строки.
const player = 'Sachin'; //Spread Operator extracts the characters from the String and assigns to an array const characters = [...player]; console.log(characters); //Output -> Array (6) ["S", "a", "c", "h","i","n"]
Слияние объектов практически похоже на массивы слияния, за исключением некоторых условий ключевых значений. Если у вас есть уникальный ключ, ключевое значение добавляется в новый объект. Если ключ такой же, значение заменяется на новое значение.
const match1 =
{
name : "Sachin",
score : 56
};
const match2 =
{
name : "Sachin",
score: 53,
balls: 32
};
const match = {...match1, ...match2};
console.log(match) ;
// Output ->
{ name: "Sachin",
score: 53,
balls: 32
};
Так что это все для этой статьи. Помимо этого, Spread Syntax имеет много других приложений. Наслаждайтесь пробуем и примите эти новые инструменты, язык дает вам язык. Надеюсь, вы любите статью, дайте мне знать ваши отзывы в разделе «Комментарий» ниже.
На целом много о распространенном синтаксисе, пожалуйста, обратитесь к MDN веб-документы.
Увидимся в следующем 👋
Оригинал: “https://dev.to/theneoterik/understanding-the-three-dot-operator-better-1ib7”