Фон
Код - это не только для того, чтобы заставить его работать. Код также должен быть удобочитаемым и кратким, например, с правильным отступом, соответствующими соглашениями об именах и т. Д. Код также должен быть самодокументированным (это еще одна тема, которую я рекомендую вам изучить). Распространенным соглашением для удобочитаемого и краткого кода является деструктуризация массивов и объектов. Деструктуризация массивов и объектов - это синтаксический сахар для «разборки» значений и присвоения этих значений различным переменным.
Деструктуризация массива
Судя по тому, что я видел до сих пор, деструктуризация массивов встречается реже, чем деструктуризация объектов, но время от времени я наблюдаю это. Итак, как работает деструктуризация массива?
Обычно вы увидите такой массив:
const colors = ["red", "blue", "green"]
И чтобы получить доступ к значениям в colors
, вы должны получить к ним доступ на основе их значений. Так,
colors[0] = "red" colors[1] = "blue" colors[2] = "green"
Но предположим, что вам нужно получить доступ к этим значениям несколько раз по всей базе кода. Попытки запомнить, какой индекс для их конкретного цвета, легко запутаться и привести к ошибкам. Представьте, что вы постоянно проверяете, правильно ли вы вводите номер индекса для массива. Не говоря уже о том, что если произошла ошибка или вам нужно было ее исправить, вам нужно будет отладить или найти ее, но все, что вы видите, это colors[0]
, colors[1]
или colors[2]
. Деструктуризация массива поможет вам решить эту загадку.
Сначала я покажу вам синтаксис деструктуризации массива, а затем подробно расскажу, что он делает.
const [ red, blue, green ] = colors
Вау ... это всего лишь одна строчка? Ага!
Итак, давайте распакуем этот лайнер.
В части const [ red, blue, green ]
я создаю три новых переменных: red
, blue
, green
. В части = colors
я объявляю значения для переменных red
, blue
и green
на основе массива colors
. Но как JavaScript узнает, какое значение в массиве colors
объявлено для какой переменной?
Обратите внимание на то, что red
, blue
и green
находятся в квадратных скобках. Индекс, в котором объявлена переменная, - это тот же индекс, который используется для определения того, какое значение использовать из массива. Например, blue
объявлен с индексом 1
. Это означает, что blue
будет равно значению color[1]
, которое в данном случае равно "blue"
. Здесь порядок, в котором создаются экземпляры переменных, является определяющим фактором. По сути, приведенный ниже код показывает, что делает деструктуризация массива.
const red = colors[0] const blue colors[1] const green = colors[2] console.log(red) // "red" console.log(blue) // "blue" console.log(green) // "green"
Итак, где вы можете найти примеры использования деструктуризации массива? Чаще всего я видел это для хуков React. Если вы собираетесь использовать строго функциональные компоненты, требующие состояния, вам нужно будет разбираться в деструктуризации массива.
Деструктуризация объекта
Деструктуризация объекта работает в том же ключе, что и деструктуризация массива. Но давайте возьмем это сверху.
Обычно вы видите объект, объявленный следующим образом:
const colors = { red: "red", blue: "blue", green: "green" }
А чтобы получить доступ к значениям в парах "ключ-значение", вы должны обращаться к ним на основе их ключей. Так,
colors.red = "red" colors.blue = "blue" colors.green = "green"
Теперь давайте деструктурируем этот объект!
const { red, blue, green } = colors
К счастью, деструктуризация объекта - это тоже всего одна строка! Если бы вы могли проследить за деструктуризацией массива, это было бы очень и очень похоже.
В части const { red, blue, green }
я создаю три новых переменных: red
, blue
, green
. В части = colors
я объявляю значения для переменных red
, blue
и green
на основе объекта colors
. Но как JavaScript узнает, какое значение в объекте colors
объявлено для какой переменной?
Обратите внимание, как red
, blue
и green
находятся в скобках объекта. Само имя переменной будет использоваться в качестве ключа для определения, какую пару ключ-значение использовать из объекта. Например, я объявляю переменную с именем blue
. Это означает, что в объекте colors
JavaScript будет искать ключ с именем blue и назначать значение, связанное с этим ключом, переменной blue
. Здесь имя переменной является определяющим фактором. По сути, приведенный ниже код показывает, что происходит при деструктуризации объекта.
const red = colors.red const blue = colors.blue const green = colors.green console.log(red) // "red" console.log(blue) // "blue" console.log(green) // "green"
Очень распространенный случай использования деструктуризации объекта - передача свойств в компоненте React. Поскольку props
(в функциональных компонентах) или this.props
(в классах) уже являются объектами, использование того же имени переменной, что и имя, которое вы использовали в родительском компоненте, может помочь вам деструктурировать свойства. Пример этого показан ниже.
// App.js import React, { Component } from 'react' import Calendar from './Calender' class App extends Component { state = { month: Feburary date: 9 year: 2020 } render() { return ( <div> <Calendar month={this.state.month} date={this.state.date} year={this.state.year} /> </div> ) } } // Calendar.js import React from 'react' function Calendar(props) { // object de-structuring const { month, date, year } = props return ( <h1>Today is {month} {date}, {year}</h1> ) } export default Calendar