Повторное введение в назначение деструктуризации

Если вы пишете на JavaScript, вы, вероятно, знакомы с ES2015 и всеми введенными новыми языковыми стандартами. Одним из таких стандартов, получивших невероятную популярность, является деструктурирование присваивания. Возможность «погрузиться» в массив или объект и напрямую сослаться на что-то внутри него. Обычно это происходит примерно так.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

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

1. Вложенная деструктуризация

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

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

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

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

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Имейте в виду, что эти функции следует использовать с умом, как и с любым другим инструментом. Определите свой вариант использования и аудиторию вашей кодовой базы. Учитывайте удобочитаемость и простоту внесения изменений в будущем. Например, если вы хотите получить доступ только к подмассиву, возможно, лучше подойдет карта.

2. Деструктуризация объектов и массивов

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

Возьмите этот пример массива внутри объекта.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

Обратный вариант использования также допустим. Массив объектов.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

Как оказалось, в этом примере у нас есть небольшая проблема. Мы можем получить доступ только к имени первого пользователя; в противном случае мы попытаемся использовать «имя» для ссылки на две разные строки, что недопустимо. Наш следующий сценарий деструктуризации должен разобраться с этим.

3. Псевдонимы

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

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

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

4. Значения по умолчанию

Деструктуризация часто предполагает, что значение, на которое она ссылается, существует, но что, если это не так? Никогда не приятно засорять код неопределенными значениями. Вот когда значения по умолчанию пригодятся.

Давайте посмотрим, как они работают с объектами.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

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

Мы можем сделать что-то подобное для массивов.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

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

5. Игнорирование ценностей

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

На самом деле мы видели пример этого ранее, но давайте изолируем концепцию, о которой мы говорим.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

В этом примере мы никогда не деструктурируем organization , и это совершенно нормально. Он по-прежнему доступен для ссылки внутри user объекта, например.

 user.organization

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

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Мы деструктурируем первый и второй элементы в массиве, а остальные не имеют значения. А как насчет более поздних элементов? Если это основано на позиции, не должны ли мы деструктурировать каждый элемент, пока не наткнемся на тот, который нам нужен?

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

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

И мы можем делать и то, и другое одновременно. Пропускаем элементы везде, где хотим, используя запятую. И снова, как и в примере с объектом, «игнорируемые» элементы по-прежнему доступны для ссылки в массиве roleCounts .

шаткий пример

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

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

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Еще одна вещь, для которой можно использовать деструктурирование, — это разыменование.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

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

Заключение

JavaScript полон сложных объектов и массивов. Будь то ответ на HTTP-запрос или статические наборы данных, важна возможность эффективного доступа к встроенному контенту. Использование деструктурирующего присваивания — отличный способ сделать это. Он не только обрабатывает несколько уровней вложенности, но и обеспечивает сфокусированный доступ и предоставляет значения по умолчанию в случае неопределенных ссылок.

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