One place for hosting & domains

      Spread

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


      Автор выбрал COVID-19 Relief Fund для получения пожертвования в рамках программы Write for DOnations.

      Введение

      Многие функции для работы с массивами и объектами были добавлены в язык JavaScript после выпуска спецификации ECMAScript версии 2015. В этой статье мы расскажем о деструктурировании, параметрах rest и синтаксисе spread. Они открывают возможность более прямого доступа к элементам массива или объекта и делают работу с этими структурами данных более быстрой и лаконичной.

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

      Деструктурирование

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

      Деструктурирование объектов

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

      Рассмотрим пример объекта, представляющего собой заметку со свойствами 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

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

      При деструктурировании объектов создаются новые переменные с теми же именами, что и у свойств объекта. Если вы не хотите, чтобы имя новой переменной совпадало с именем свойства, вы можете переименовать новую переменную, используя двоеточие (:) для ввода нового имени, как показано в следующем примере с 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

      Синтаксис Spread (...) — это еще одно полезное дополнение JavaScript для работы с массивами, объектами и вызовами функций. Spread позволяет распаковывать или раскрывать объекты и элементы итерации (например, массивы) и использовать их для создания копий структур данных с целью упрощения манипуляций с данными.

      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 с объектами

      При работе с объектами 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 с вызовами функций

      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

      Примечание. Без spread этого можно добиться с помощью apply():

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

      Это даст нам следующее:

      Output
      6

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

      Параметры Rest

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

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

      function restTest(...args) {
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

      Все аргументы, переданные в функцию restTest, теперь доступны в массиве args:

      Output
      [1, 2, 3, 4, 5, 6]

      Синтаксис Rest можно использовать как единственный параметр или как последний параметр в списке. Если его использовать как единственный паарметр, он соберет все аргументы, но в конце списка он соберет все остающиеся аргументы, как показано в этом примере:

      function restTest(one, two, ...args) {
  console.log(one)
  console.log(two)
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

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

      Output
      1
2
[3, 4, 5, 6]

      В более старом коде переменную arguments можно было бы использовать для сбора всех аргументов, передаваемых в функцию:

      function testArguments() {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

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

      Output
      1Arguments(3) ["how", "many", "arguments"]

      Однако такой подход имеет ряд недостатков. Во первых, переменную arguments нельзя использовать со стрелочными функциями.

      const testArguments = () => {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

      При этом будет возникать ошибка:

      Output
      Uncaught ReferenceError: arguments is not defined

      Кроме того, arguments не является истинным массивом и не может использовать такие методы как map и filter без предварительной конвертации в массив. Он будет собирать все передаваемые аргументы, а не только остальные аргументы, как показано в примере restTest(one, two, ...args).

      Rest можно использовать и при деструктурировании массивов:

      const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']

console.log(firstTool)
console.log(rest)

      Это даст нам следующее:

      Output
      hammer
["screwdriver", "wrench"]

      Также Rest можно использовать при деструктурировании объектов:

      const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }

console.log(isLoggedIn)
console.log(rest)

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

      Output
      true
{id: 1, name: "Ben"}

      Таким образом, синтаксис rest дает эффективные методы для сбора неопределенного количества элементов.

      Заключение

      В этой статье мы рассказали о деструктурировании, синтаксисе spread и параметрах rest. Краткое содержание:

      • Деструктурирование используется для создания переменных из элементов массива или свойств объекта.
      • Синтаксис Spread используется для распаковки элементов с итерацией, таких как массивы, объекты и вызовы функций.
      • Синтаксис параметра Rest создает массив из неограниченного количества значений.

      Деструктурирование, параметры rest и синтаксис spread — полезные функции JavaScript, позволяющие сохранять код лаконичным и чистым.

      Если вы хотите увидеть деструктурирование в действии, пройдите обучающий модуль «Настройка компонентов React с помощью Props», где этот синтаксис используется для деструктурирования данных и их передачи компонентам клиентской части. Если вы хотите узнать больше о JavaScript, вернитесь на страницу серии статей по программированию на JavaScript.



      Source link

      Comprendre la déstructuration, les paramètres de rest et la syntaxe Spread en JavaScript


      L’auteur a choisi le COVID-19 Relief Fund pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      De nombreuses nouvelles fonctionnalités permettant de travailler avec des tableaux et des objets ont été mises à la disposition du langage JavaScript depuis l’édition 2015 de la spécification ECMAScript. Quelques-uns des éléments notables que vous apprendrez dans cet article sont la déstructuration, les paramètres de rest et la syntaxe de spread. Ces fonctionnalités fournissent des moyens plus directs d’accéder aux membres d’un tableau ou d’un objet, et peuvent rendre le travail avec ces structures de données plus rapide et plus succinct.

      De nombreux autres langages n’ont pas de syntaxe correspondante pour la déstructuration, les paramètres de rest et spread, de sorte que ces caractéristiques peuvent avoir une courbe d’apprentissage à la fois pour les nouveaux développeurs JavaScript et ceux qui viennent d’un autre langage. Dans cet article, vous apprendrez comment déstructurer des objets et des tableaux, comment utiliser l’opérateur de spread pour décompresser des objets et des tableaux, et comment utiliser les paramètres de rest dans les appels de fonction.

      Déstructurer

      L’affectation de déstructuration est une syntaxe qui vous permet d’affecter des propriétés d’objets ou des éléments de tableau comme variables. Cela peut réduire considérablement les lignes de code nécessaires pour manipuler les données dans ces structures. Il existe deux types de déstructuration : Déstructuration d’objets et déstructuration des tableaux.

      Déstructuration d’objets

      La déstructuration d’objets vous permet de créer de nouvelles variables en utilisant une propriété de l’objet comme valeur.

      Prenons cet exemple, un objet qui représente une note avec une id, un titre et une date :

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

      Traditionnellement, si vous vouliez créer une nouvelle variable pour chaque propriété, vous deviez affecter chaque variable individuellement, avec beaucoup de répétition :

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

      Avec la déstructuration des objets, tout cela peut être fait en une seule ligne. En entourant chaque variable d’accolades {}, JavaScript créera de nouvelles variables à partir de chaque propriété portant le même nom :

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

      Maintenant, console.log() les nouvelles variables :

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

      Vous obtiendrez les valeurs initiales des valeurs des propriétés comme résultat :

      Output
      1
My first note
01/01/1970

      Note : La déstructuration d’un objet ne modifie pas l’objet original. Vous pouvez toujours appeler la note originale avec toutes ses entrées intactes.

      L’affectation par défaut pour la déstructuration des objets crée de nouvelles variables portant le même nom que la propriété de l’objet. Si vous ne souhaitez pas que la nouvelle variable ait le même nom que le nom de la propriété, vous avez également la possibilité de renommer la nouvelle variable en utilisant deux-points ( : ) pour décider d’un nouveau nom, comme on le verra avec la noteId dans ce qui suit :

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

      Enregistrez la nouvelle variable noteId dans la console :

      console.log(noteId)

      Vous recevrez le résultat suivant :

      Output
      1

      Vous pouvez également déstructurer les valeurs d’objets imbriqués. Par exemple, mettez à jour l’objet note pour avoir un objet auteur imbriqué :

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

      Vous pouvez maintenant déstructurer note, puis déstructurer à nouveau pour créer des variables à partir des propriétés de l'auteur :

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

      Ensuite, enregistrez les nouvelles variables firstName et lastName en utilisant les littéraux du modèle :

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

      Cela donnera le résultat suivant :

      Output
      Sherlock Holmes

      Notez que dans cet exemple, bien que vous ayez accès au contenu de l’objet auteur, l’objet auteur lui-même n’est pas accessible. Pour accéder à un objet ainsi qu’à ses valeurs imbriquées, il faudrait les déclarer séparément :

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

console.log(author)

      Ce code produira l’objet author:

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

      La déstructuration d’un objet n’est pas seulement utile pour réduire la quantité de code que vous devez écrire ; elle vous permet également de cibler votre accès aux propriétés qui vous intéressent.

      Enfin, déstructurer peut être utilisé pour accéder aux propriétés des objets des valeurs primitives. Par exemple, String est un objet global pour les chaînes de caractères, et possède une propriété de longueur :

      const { length } = 'A string'

      Cela permettra de trouver la propriété de longueur inhérente d’une chaîne et de la rendre égale à la variable de longueur. Enregistrez la longueur pour voir si cela a fonctionné :

      console.log(length)

      Vous aurez le résultat suivant :

      Output
      8

      La chaîne A string a été implicitement convertie en un objet ici pour récupérer la propriété de longueur.

      Déstructuration des tableaux

      La déstructuration des tableaux vous permet de créer de nouvelles variables en utilisant un élément de tableau comme valeur. Prenons cet exemple, un tableau avec les différentes parties d’une date :

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

      Les tableaux en JavaScript sont garantis pour préserver leur ordre, donc dans ce cas le premier indice sera toujours une année, le second sera le mois, et ainsi de suite. Sachant cela, vous pouvez créer des variables à partir des éléments du tableau :

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

      Mais le faire manuellement peut prendre beaucoup de place dans votre code. Avec la déstructuration des tableaux, vous pouvez décomposer les valeurs du tableau dans l’ordre et les affecter à leurs propres variables, comme ceci :

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

      Enregistrez maintenant les nouvelles variables :

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

      Vous aurez le résultat suivant :

      Output
      1970
12
01

      Les valeurs peuvent être sautées en laissant la syntaxe de déstructuration vide entre les virgules :

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

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

      L’exécution de cette opération donnera la valeur de l'année et du jour :

      Output
      1970
01

      Les tableaux imbriqués peuvent également être déstructurés. Tout d’abord, créez un tableau imbriqué :

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

      Ensuite, déstructurez ce tableau et enregistrez les nouvelles variables :

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

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

      Vous recevrez le résultat suivant :

      Output
      1 2 3 4 5

      La syntaxe de déstructuration peut être appliquée pour déstructurer les paramètres d’une fonction. Pour tester cela, vous déstructurez les clés et les valeurs à partir de Object.entries().

      Déclarez d’abord l’objet de la note :

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

      Étant donné cet objet, vous pourriez dresser la liste des paires clé-valeur en déstructurant les arguments au fur et à mesure qu’ils sont passés à la méthode forEach() :

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

      Ou vous pourriez faire la même chose en utilisant une boucle for :

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

      Dans tous les cas, vous recevrez ce qui suit :

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

      La déstructuration d’objets et la déstructuration de tableaux peuvent être combinées en une seule affectation de déstructuration. Les paramètres par défaut peuvent également être utilisés avec la déstructuration, comme le montre cet exemple qui fixe la date par défaut à new Date().

      Déclarez d’abord l’objet de la note :

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

      Puis déstructurez l’objet, tout en définissant une nouvelle variable de date avec la valeur par défaut de new Date() :

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

console.log(date)

      console.log(date) donnera alors un résultat similaire à ce qui suit :

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

      Comme le montre cette section, la syntaxe de l’affectation de déstructuration ajoute beaucoup de souplesse à JavaScript et permet d’écrire un code plus succinct. Dans la section suivante, vous verrez comment la syntaxe de spread peut être utilisée pour étendre les structures de données dans leurs entrées de données constitutives.

      Spread

      La syntaxe Spread (...) est un autre ajout utile au JavaScript pour travailler avec des tableaux, des objets et des appels de fonction. Spread permet de déballer ou d’étendre des objets et des itérables (tels que des tableaux), qui peuvent être utilisés pour faire des copies superficielles de structures de données afin d’accroître la facilité de manipulation des données.

      Spread avec des tableaux

      Spread peut simplifier les tâches courantes avec les tableaux. Par exemple, disons que vous avez deux tableaux et que vous voulez les combiner :

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

      A l’origine, vous deviez utiliser concat() pour concaténer les deux tableaux :

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

      Désormais, vous pouvez également utiliser spread pour déballer les tableaux dans un nouveau tableau :

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

console.log(allTools)

      L’exécution de cette opération donnerait les résultats suivants :

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

      Cela peut être particulièrement utile en cas d’immuabilité. Par exemple, vous pourriez travailler avec une application dont les utilisateurs sont stockés dans un ensemble d’objets : 

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

      Vous pourriez utiliserpush pour modifier le tableau existant et ajouter un nouvel utilisateur, ce qui serait l’option mutable :

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

users.push(newUser)

      Mais cela change le tableau user, que nous pourrions vouloir conserver.

      Spread vous permet de créer un nouveau tableau à partir de celui qui existe déjà et d’ajouter un nouvel élément à la fin :

      const updatedUsers = [...users, newUser]

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

      Maintenant, le nouveau tableau, updatedUsers, a le nouvel utilisateur, mais le tableau original users reste inchangé :

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

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

      Créer des copies de données au lieu de modifier les données existantes peut aider à prévenir les changements inattendus. En JavaScript, lorsque vous créez un objet ou un tableau et que vous l’affectez à une autre variable, vous ne créez pas réellement un nouvel objet – vous passez une référence.

      Prenez cet exemple, dans lequel un tableau est créé et assigné à une autre variable :

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

// Assign Array to another variable
const secondArray = originalArray

      Supprimer le dernier élément du deuxième tableau modifiera le premier :

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

console.log(originalArray)

      Cela donnera le résultat :

      Output
      ["one", "two"]

      Spread vous permet de faire une copie superficielle d’un tableau ou d’un objet, ce qui signifie que toutes les propriétés de haut niveau seront clonées, mais que les objets imbriqués seront toujours passés par référence. Pour les tableaux ou objets simples, une copie superficielle peut suffire.

      Si vous écrivez le même exemple de code mais copiez le tableau avec spread, le tableau original ne sera plus modifié :

      // 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)

      Les éléments suivants seront enregistrés sur la console :

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

      Spread peut également être utilisé pour convertir un set, ou tout autre iterable, en un tableau.

      Créez un nouvel ensemble et ajoutez-y quelques entrées :

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

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

      Ensuite, utilisez l’opérateur spread avec set et enregistrez les résultats :

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

console.log(seaCreatures)

      Cela donnera le résultat :

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

      Cela peut également être utile pour créer un tableau à partir d’une chaîne de caractères :

      const string = 'hello'

const stringArray = [...string]

console.log(stringArray)

      Cela donnera un tableau avec chaque caractère en tant qu’élément dans le tableau :

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

      Spread avec objets

      Lorsqu’on travaille avec des objets, spread peut être utilisé pour copier et mettre à jour les objets.

      A l’origine, Object.assign() était utilisé pour copier un objet :

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

      Le secondObject sera désormais un clone de l’originalObject.

      La syntaxe de spread simplifie cette opération (vous pouvez copier un objet superficiellement en l’étalant dans un nouvel objet) :

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

console.log(secondObject)

      Ce qui donnera le résultat suivant :

      Output
      {enabled: true, darkMode: false}

      Tout comme pour les tableaux, cela ne créera qu’une copie superficielle, et les objets imbriqués seront toujours passés par référence.

      L’ajout ou la modification de propriétés sur un objet existant de manière immuable est simplifié avec spread. Dans cet exemple, la propriété isLoggedIn est ajoutée à l’objet user:

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

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

console.log(updatedUser)

      Il en résultera ce qui suit :

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

      Une chose importante à noter concernant la mise à jour des objets spread est que tout objet imbriqué devra également être diffusé. Par exemple, disons que dans l’objet user, il y a un objet organisationnel imbriqué :

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

      Si vous essayez d’ajouter un nouvel élément à l’organisation, il écrasera les champs existants : 

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

console.log(updatedUser)

      Ce qui donnera le résultat suivant :

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

      Si la mutabilité n’est pas un problème, le champ pourrait être mis à jour directement :

      user.organization.position = 'Director'

      Mais comme nous recherchons une solution immuable, nous pouvons diffuser l’objet intérieur pour conserver les propriétés existantes :

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

console.log(updatedUser)

      Cela donnera le résultat :

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

      Spread avec appels de fonction

      Spread peut également être utilisé avec les arguments dans les appels de fonction.

      Par exemple, voici une fonction multiply qui prend trois paramètres et les multiplie.

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

      Normalement, vous feriez passer trois valeurs individuellement comme arguments à l’appel de fonction, comme ceci :

      multiply(1, 2, 3)

      Cela donnerait ce qui suit :

      Output
      6

      Cependant, si toutes les valeurs que vous voulez passer à la fonction existent déjà dans un tableau, la syntaxe de spread vous permet d’utiliser chaque élément d’un tableau comme argument :

      const numbers = [1, 2, 3]

multiply(...numbers)

      Cela donnera le même résultat :

      Output
      6

      Note : Sans spread, ceci peut être réalisé en utilisant apply() :

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

      Il en résultera :

      Output
      6

      Maintenant que vous avez vu comment spread peut raccourcir votre code, vous pouvez vous pencher sur une utilisation différente de la syntaxe ... : les paramètres de rest.

      Les paramètres de Rest

      La dernière caractéristique que vous apprendrez dans cet article est la syntaxe des paramètres de rest. La syntaxe est la même que celle de spread (...) mais a l’effet inverse. Au lieu de décomposer un tableau ou un objet en valeurs individuelles, la syntaxe de rest va créer un tableau d’un nombre indéfini d’arguments.

      Dans la fonction restTest par exemple, si nous voulions qu’args soit un tableau composé d’un nombre indéfini d’arguments, on pourrait avoir ce qui suit : 

      function restTest(...args) {
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

      Tous les arguments transmis à la fonction restTest sont maintenant disponibles dans le tableau des args : 

      Output
      [1, 2, 3, 4, 5, 6]

      La syntaxe de Rest peut être utilisée comme seul paramètre ou comme dernier paramètre de la liste. S’il est utilisé comme seul paramètre, il rassemblera tous les arguments, mais s’il se trouve à la fin d’une liste, il rassemblera tous les arguments qui restent, comme on le voit dans cet exemple :

      function restTest(one, two, ...args) {
  console.log(one)
  console.log(two)
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6)

      Il s’agira de prendre les deux premiers arguments individuellement, puis de regrouper le reste dans un tableau :

      Output
      1
2
[3, 4, 5, 6]

      Dans l’ancien code, la variable arguments pouvait être utilisée pour rassembler tous les arguments transmis à une fonction :

      function testArguments() {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

      Cela donnerait le résultat suivant :

      Output
      1Arguments(3) ["how", "many", "arguments"]

      Toutefois, cela présente quelques inconvénients. Premièrement, la variable arguments ne peut pas être utilisée avec les fonctions flèches.

      const testArguments = () => {
  console.log(arguments)
}

testArguments('how', 'many', 'arguments')

      Cela entraînerait une erreur :

      Output
      Uncaught ReferenceError: arguments is not defined

      En outre, arguments n’est pas un véritable tableau et ne peut pas utiliser des méthodes comme map et filter sans être préalablement converti en un tableau. Il recueillera également tous les arguments passés au lieu de se limiter au reste des arguments, comme on le voit dans l’exemple restTest (one, two, ...args).

      Rest peut également être utilisé lors de la déstructuration des tableaux :

      const [firstTool, ...rest] = ['hammer', 'screwdriver', 'wrench']

console.log(firstTool)
console.log(rest)

      Il en résultera :

      Output
      hammer
["screwdriver", "wrench"]

      Rest peut également être utilisé lors de la déstructuration d’objets :

      const { isLoggedIn, ...rest } = { id: 1, name: 'Ben', isLoggedIn: true }

console.log(isLoggedIn)
console.log(rest)

      En donnant le résultat suivant :

      Output
      true
{id: 1, name: "Ben"}

      De cette façon, la syntaxe de rest fournit des méthodes efficaces pour rassembler une quantité indéterminée d’éléments.

      Conclusion

      Dans cet article, vous avez appris des choses sur la déstructuration, la syntaxe de spread et les paramètres de rest. En résumé :

      • La déstructuration est utilisée pour créer des variables à partir d’éléments de tableau ou de propriétés d’objets.
      • La syntaxe de spread est utilisée pour décompresser les itérables tels que les tableaux, les objets et les appels de fonction.
      • La syntaxe des paramètres de rest crée un tableau à partir d’un nombre indéfini de valeurs.

      La déstructuration, les paramètres de repos et la syntaxe de spread sont des fonctions utiles de JavaScript qui aident à maintenir votre code succinct et propre.

      Si vous souhaitez voir la déstructuration en action, consultez Comment personnaliser les éléments de React avec des props qui utilise cette syntaxe pour déstructurer les données et les transmettre à des composants frontaux personnalisés. Si vous souhaitez en savoir plus sur JavaScript, retournez à notre Page de la série Comment coder en JavaScript. 



      Source link

      Forgot Your Password ?