Концепции деструктурирования, параметров Rest и синтаксиса Spread в JavaScript

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

Рассмотрим пример объекта, представляющего собой заметку со свойствами id, title и date:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Обычно при создании новой переменной для каждого свойства нужно задавать каждую переменную отдельно, используя много повторов:

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

С деструктурированием объектов можно уложиться в одну строку. При заключении каждой переменной в фигурные скобки {} JavaScript создаст новые переменные из каждого свойства с тем же именем:

// Destructure properties into variables
const { id, title, date } = note

Запустите console.log() для новых переменных:

console.log(id)
console.log(title)
console.log(date)

На экран будут выведены начальные значения свойств:

Output
1
My first note
01/01/1970

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

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

Зарегистрируйте новую переменную noteId в консоли:

console.log(noteId)

Результат будет выглядеть следующим образом:

Output
1

Также вы можете деструктурировать значения вложенных объектов. Например, обновите объект note так, чтобы у него был вложенный объект author:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

Теперь вы можете деструктурировать объект note, а затем провести деструктурирование еще раз, чтобы создать переменные из свойств объекта author:

// Destructure nested properties
const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

Затем зарегистрируйте новые переменные firstName и lastName, используя литерали шаблонов:

console.log(`${firstName} ${lastName}`)

Результат будет выглядеть следующим образом:

Output
Sherlock Holmes

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

// Access object and nested values
const {
  author,
  author: { firstName, lastName },
} = note

console.log(author)

Этот код выводит объект author:

Output
{firstName: "Sherlock", lastName: "Holmes"}

Деструктурирование объекта полезно не только для сокращения объема кода, но также позволяет организовать целевой доступ к важным свойствам.

Кроме того, деструктурирование можно использовать для доступа к свойствам объектов значений примитивов. Например, String — это глобальный объект для строк, и он имеет свойство length:

const { length } = 'A string'

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

console.log(length)

Результат будет выглядеть следующим образом:

Output
8

Строка A string была косвенно конвертирована в объект для получения свойства length.

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

const date = ['1970', '12', '01']

Массивы в JavaScript гарантированно сохраняют порядок, и поэтому первым индексом всегда будет год, вторым — месяц и т. д. Зная это, вы можете создавать переменные из элементов массива:

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

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

// Destructure Array values into variables
const [year, month, day] = date

Зарегистрируйте новые переменные в журнале:

console.log(year)
console.log(month)
console.log(day)

Результат будет выглядеть следующим образом:

Output
1970
12
01

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

// Skip the second item in the array
const [year, , day] = date

console.log(year)
console.log(day)

При запуске этого кода будут указаны значения year и day:

Output
1970
01

Вложенные массивы также можно деструктурировать. Вначале создайте вложенный массив:

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

Затем деструктурируйте массив и зарегистрируйте новые переменные:

// Destructure nested items
const [one, two, [three, four], five] = nestedArray

console.log(one, two, three, four, five)

Результат будет выглядеть следующим образом:

Output
1 2 3 4 5

Синтаксис деструктурирования можно применять для деструктурирования параметров функции. Для тестирования вам нужно будет деструктурировать ключи и значения из Object.entries().

Вначале декларируйте объект note:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Для этого объекта вы можете указать пары ключ-значение, деструктурируя аргументы по мере их передачи в метод forEach():

// Using forEach
Object.entries(note).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

Также вы можете использовать для этой цели цикл for:

// Using a for loop
for (let [key, value] of Object.entries(note)) {
  console.log(`${key}: ${value}`)
}

В каждом случае вы получите следующий результат:

Output
id: 1
title: My first note
date: 01/01/1970

Деструктурирование объектов и деструктурирование массивов можно комбинировать в одном выражении деструктурирования. При деструктурировании также можно использовать параметры по умолчанию, как видно из этого примера, где задается дата по умолчанию new Date().

Вначале декларируйте объект note:

const note = {
  title: 'My first note',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
  tags: ['personal', 'writing', 'investigations'],
}

Затем деструктурируйте объект и задайте новую переменную new со значением по умолчанию new Date():

const {
  title,
  date = new Date(),
  author: { firstName },
  tags: [personalTag, writingTag],
} = note

console.log(date)

Команда console.log(date) выведет на экран примерно следующее:

Output
Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

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

Spread упрощает выполнение распространенных задач с массивами. Допустим, у нас есть два массива и мы хотим их комбинировать:

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

Раньше нам нужно было бы использовать concat() для сокращения двух массивов:

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

Теперь мы также можем использовать spread для распаковки массивов в новый массив:

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]

console.log(allTools)

Результат выполнения будет выглядеть так:

Output
["hammer", "screwdriver", "wrench", "saw"]

Это особенно полезно в случае неизменяемых объектов. Например, вы можете работать с приложением, которое сохранило объект users в массиве объектов:

// Array of users
const users = [
  { id: 1, name: 'Ben' },
  { id: 2, name: 'Leslie' },
]

Вы можете использовать push для изменения массива и добавления нового пользователя, если это изменяемый объект:

// A new user to be added
const newUser = { id: 3, name: 'Ron' }

users.push(newUser)

Однако при этом изменяется массив user, что может быть для нас нежелательно.

Spread позволяет создать новый массив из существующего и добавить в его конец новый элемент:

const updatedUsers = [...users, newUser]

console.log(users)
console.log(updatedUsers)

Теперь в новый массив updatedUsers добавлен новый пользователь, а первоначальный массив users остался без изменений:

Output
[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}]

[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}
 {id: 3, name: "Ron"}]

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

Рассмотрим этот пример, где мы создаем массив и назначаем его другой переменной:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Assign Array to another variable
const secondArray = originalArray

При удалении последнего элемента второго массива изменится первый:

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Результат будет выглядеть следующим образом:

Output
["one", "two"]

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

Если вы напишете тот же код, но при этом скопируете массив с помощью spread, первоначальный массив больше не будет меняться:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Use spread to make a shallow copy
const secondArray = [...originalArray]

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

На консоли будет зарегистрировано следующее:

Output
["one", "two", "three"]

Spread также можно использовать для конвертации набора или другого элемента с итерацией в массив.

Создайте новый набор и добавьте в него записи:

// Create a set
const set = new Set()

set.add('octopus')
set.add('starfish')
set.add('whale')

Используйте оператор spread с set и зарегистрируйте результаты:

// Convert Set to Array
const seaCreatures = [...set]

console.log(seaCreatures)

В результате вы получите следующий вывод:

Output
["octopus", "starfish", "whale"]

Это также может быть полезно при создании массива из строки:

const string = 'hello'

const stringArray = [...string]

console.log(stringArray)

Это даст нам массив, где каждый символ будет элементом массива:

Output
["h", "e", "l", "l", "o"]

При работе с объектами spread можно использовать для их копирования и обновления.

Изначально для копирования объектов использовался Object.assign():

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

Теперь secondObject будет клоном originalObject.

Синтаксис spread все упрощает, позволяя создать простую копию объекта посредством его передачи в новый объект:

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject)

Результат будет выглядеть следующим образом:

Output
{enabled: true, darkMode: false}

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

Spread упрощает добавление и изменение свойств существующего неизменяемого объекта. В этом примере мы добавляем свойство isLoggedIn в объект user:

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

В результате вы получите следующий вывод:

Output
{id: 3, name: "Ron", isLoggedIn: true}

При обновлении объектов с помощью spread важно учитывать, что каждый вложенный объект также потребуется передать. Рассмотрим пример, когда в объекте user содержится вложенный объект organization:

const user = {
  id: 3,
  name: 'Ron',
  organization: {
    name: 'Parks & Recreation',
    city: 'Pawnee',
  },
}

Если мы попробуем добавить новый элемент в объект organization, существующие поля будут перезаписаны:

const updatedUser = { ...user, organization: { position: 'Director' } }

console.log(updatedUser)

Результат будет выглядеть следующим образом:

Output
id: 3
name: "Ron"
organization: {position: "Director"}

Если изменяемость неважна, поле можно обновить напрямую:

user.organization.position = 'Director'

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

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

console.log(updatedUser)

В результате вы получите следующий вывод:

Output
id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

Spread также можно использовать с аргументами в вызовах функций.

Например, у нас имеется функция multiply, которая берет три параметра и умножает их:

// Create a function to multiply three items
function multiply(a, b, c) {
  return a * b * c
}

Обычно мы передаем три переменных по отдельности как аргументы вызова функции, примерно так:

multiply(1, 2, 3)

Результат будет выглядеть следующим образом:

Output
6

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

const numbers = [1, 2, 3]

multiply(...numbers)

Это даст тот же результат:

Output
6

multiply.apply(null, [1, 2, 3])

Output
6

Теперь вы увидели, как можно использовать spread для сокращения кода и можете рассмотреть другой вариант использовать параметров ... синтаксиса: rest.