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

Распространение, разрушение и параметры отдыха в JavaScript

Вступление с момента версии спецификации спецификации ECMASCRIP Tagged с JavaScript, Ecmascript2015, функции.

С момента версии спецификации Ecmascript Deficization разработчики JavaScript получили доступ ко многим новым функциям, касающимся работы с массивами и объектами. В этой статье я собираюсь объяснить «распространение», «разрушение» и «параметры отдыха», показывая вам примеры того, как их можно использовать для уменьшения длины вашего кода или сделать его более понятным.

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

Синтаксис спреда ( ... ) является очень полезной техникой при работе с массивами или объектами, поскольку он позволяет вам распаковать и расширять объекты или массивы и делать их мелкие копии.

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

Распространение можно использовать для копирования объекта, например Object.assign () , или обновить это.

Копия

// without spreading
const originalObject = { 
    enabled: true, 
    darkMode: false 
}
const secondObject = Object.assign({}, originalObject)

// with spreading
const originalObject = { 
    enabled: true, 
    darkMode: false 
}
const secondObject = { ...originalObject }
console.log(secondObject)

// Output:
{enabled: true, darkMode: false}

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

Обновлять

Обновление объектов легко с использованием распространения, поэтому давайте добавим другое свойство, StayLoggedin к нашему OriginalObject Анкет

const originalObject = { 
    enabled: true, 
    darkMode: false 
}
const updatedObject = { 
    ...originalObject, 
    stayLoggedIn: true 
}
console.log(updatedObject)

// Output:
{enabled: true, darkMode: false, stayLoggedIn: true}

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

const originalObject = { 
    enabled: true, 
    settings: { 
        darkMode: false 
    } 
}
const updatedObject = { 
    ...originalObject, 
    settings: { 
        stayLoggedIn: true 
    } 
}
console.log(updatedObject)

// Output:
{enabled: true, settings: {stayLoggedIn: true}}

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

const originalObject = { 
    enabled: true, 
    settings: { 
        darkMode: false 
    } 
}
const updatedObject = { 
    ...originalObject, 
    settings: { 
        ...originalObject.settings, 
        stayLoggedIn: true 
    } 
}
console.log(updatedObject)

// Output:
{enabled: true, settings: {darkMode: false, stayLoggedIn: true}}

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

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

Дублировать

const originalArray = ['A', 'B', 'C']
const copyArray = [...originalArray]
originalArray.pop()
console.log(copyArray)

// Output:
['A', 'B', 'C']

Круто, верно? Это создает мелкую копию массива, это означает, что все свойства верхнего уровня будут клонированы, но вложенные свойства все еще будут переданы ссылкой. Но это не конец, теперь вы также можете объединить массивы намного проще.

. Конг

const first = ['A', 'B', 'C']
const second = ['D', 'E', 'F']
const union = [...first, ...second]
console.log(union)

// Output:
['A', 'B', 'C', 'D', 'E', 'F']

Вы также можете разделить строку на массив, используя распространение, как это:

const string = 'awesome'
const charArray = [...string]
console.log(charArray)

// Output:
['a', 'w', 'e', 's', 'o', 'm', 'e']

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

Уничтожение объектов

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

const obj = { 
    enabled: true, 
    darkMode: false, 
    stayLoggedIn: true 
}
const enabled = obj.enabled
const darkMode = obj.darkMode
const stayLoggedIn = obj.stayLoggedIn

Теперь с разрушением объекта это может быть сокращено до одной линии вместо трех, проверьте это!

const obj = { 
    enabled: true, 
    darkMode: false, 
    stayLoggedIn: true 
}
const { enabled, darkMode, stayLoggedIn } = obj
console.log(enabled, darkMode, stayLoggedIn)

// Output: 
true
false
true

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

const obj = { 
    enabled: true, 
    darkMode: false, 
    stayLoggedIn: true 
}
const { enabled: activated, darkMode, stayLoggedIn } = obj
console.log(enabled, activated)

// Output:
undefined
true

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

Вы также можете разрушить вложенные свойства, это работает так же, как вы ожидаете.

const obj = { 
    enabled: true, 
    settings: { 
        darkMode: false,
        stayLoggedIn: true
    } 
}
const { settings: { darkMode, stayLoggedIn } } = obj
console.log(darkMode, stayLoggedIn)

// Output:
false
true

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

Дестание также может использоваться для доступа к свойствам примитивных типов, таких как String.length .

const string = 'awesome'
const { length } = string
console.log(length)

// Output:
7

Разрушительные массивы

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

const date = ['09', '04', '2001']
const day = date[0]
const month = date[1]
const year = date[2]

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

const date = ['09', '04', '2001']
const [day, month, year] = date
console.log(day, month, year)

// Output:
09
04
2001

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

const date = ['09', '04', '2001']
const [day, , year] = date
console.log(day, year)

// Output:
09
2001

Вложенные массивы также могут быть разрушены, как вложенные объекты.

const nested = ['A', 'B', ['C', 'D'], 'E']
const [a, b, [c, d], e] = nested
console.log(a, b, c, d, e)

// Output:
'A'
'B'
'C'
'D'
'E'

Разрушение объекта и разрушение массива могут быть объединены в одно назначение, и вы даже можете использовать параметры по умолчанию при разрушении, позвольте мне показать вам!

const obj = { 
    enabled: true, 
    darkMode: false, 
    roles: ['user', 'admin', 'moderator']
}
const { 
    enabled, 
    date = new Date(), 
    darkMode, 
    roles: [userRole, , moderatorRole] 
} = obj
console.log(date)

// Output:
Wed Jun 17 2020 09:52:20 GMT+0200 (Central European Summer Time)

Вместо того, чтобы позволить вам распаковать или обновить объекты и массивы, параметры REST позволяют вам создавать массивы с неопределенным количеством аргументов. Синтаксис такой же, как и для распространения ( ... ).

const foo = (...args) => console.log(args)
foo('A', 'B', 'C', 'D')

// Output:
['A', 'B', 'C', 'D']

Как видите, все аргументы переданы foo были агрегированы в массив args Анкет

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

const foo = (first, second, ...args) => console.log(first, second, args)
foo('A', 'B', 'C', 'D')

// Output:
A
B
['C', 'D']

Это еще не все!

const { enabled, ...originalObject } = { 
    enabled: true, 
    darkMode: false,
    stayLoggedIn: true
}
console.log(enabled, originalObject)

// Output:
true
{darkMode: false, stayLoggedIn: true}

Как вы можете видеть, объекты также могут быть деструкции с помощью синтаксиса параметров REST, но это также возможно с массивами, позвольте мне показать вам!

const [first, second, ...rest] = ['A', 'B', 'C', 'D']
console.log(first, second, rest)

// Output:
A
B
['C', 'D']
  • Распространение можно использовать для распаковки массивов и объектов
  • Разрушение можно использовать для создания нескольких переменных из массивов или объектов
  • Параметры отдыха может быть использован для создания массивов с неопределенным размером

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

Оригинал: “https://dev.to/puf17640/spreading-destructuring-and-rest-parameters-in-javascript-1haf”

Читайте ещё по теме: