Фон

Код - это не только для того, чтобы заставить его работать. Код также должен быть удобочитаемым и кратким, например, с правильным отступом, соответствующими соглашениями об именах и т. Д. Код также должен быть самодокументированным (это еще одна тема, которую я рекомендую вам изучить). Распространенным соглашением для удобочитаемого и краткого кода является деструктуризация массивов и объектов. Деструктуризация массивов и объектов - это синтаксический сахар для «разборки» значений и присвоения этих значений различным переменным.

Деструктуризация массива

Судя по тому, что я видел до сих пор, деструктуризация массивов встречается реже, чем деструктуризация объектов, но время от времени я наблюдаю это. Итак, как работает деструктуризация массива?

Обычно вы увидите такой массив:

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