Разрушение от нуля до героя
Задание по деструктуризации JavaScript существует уже давно. Он предоставляет возможность напрямую распаковывать значения из объектов и массивов в переменные, экономя нам, разработчикам, массу времени и кода.
Поскольку деструктуризация настолько мощна и удобна, я думаю, вам будет трудно найти разработчика JavaScript, который ее не использовал. Но хотя вы можете получить представление о деструктуризации, скорее всего, вы еще не затронули весь ее потенциал. Чтобы помочь вам перейти от ученика к мастеру, вот 10 способов повысить уровень деструктуризации.
1. Игнорирование ценностей
Массивы часто содержат большие объемы данных. Часто для дальнейшей обработки требуется только часть этих данных. Поэтому при деструктуризации массива можно выборочно распаковывать значения, игнорируя ненужные. Просто поставьте запятую, если хотите, чтобы значение осталось нетронутым.
2. Присвоение оставшихся значений
Большинству разработчиков известен параметр остатка. Параметр функции с префиксом из трех точек принимает бесконечное количество аргументов и анализирует их как массив.
Но знаете ли вы, что шаблон rest также можно использовать для деструктуризации? Ставя перед переменной 3 точки, вы распаковываете в нее все оставшиеся значения.
Это относится как к деструктурированию объектов, так и к массивам. Хотя приятно знать, что для объектов предложение в настоящее время находится на стадии 4, что означает, что оно будет официально включено в следующую итерацию ECMAScript.
3. комбинированная деструктуризация массива и объекта
Деструктуризация объектов и массивов эффективна сама по себе, но их сочетание дает вам супервозможности разработки. Если вы сталкиваетесь с массивом с объектами внутри, вы можете напрямую распаковать вложенные объекты, используя эту технику.
4. Замена переменных в массиве
Вам когда-нибудь приходилось менять местами две переменные в массиве? Если да, то вы знаете, что это трудоемкая задача. Чтобы переключиться на две переменные, вам нужно вызвать временную третью переменную для хранения одного из значений, которые нужно поменять местами.
var temp = array[index1];
array[index1] = array[index2];
array[index2] = temp;Но при деструктуризации эта временная переменная больше не нужна. Вы можете поменять местами две переменные напрямую!
5. Переименование переменных
Каждый разработчик видел объектные ключи, которые, мягко говоря, неоднозначны. Чаще всего ключи содержат опечатки или не имеют четкой связи со своими значениями. Чтобы преодолеть это, вы можете установить новое имя переменной при деструктурировании объекта. Просто напишите двоеточие, за которым следует новое имя при распаковке значений.
6. Значения по умолчанию
Если и есть одна гарантия при написании кода, так это то, что вы не можете доверять данным. Значения могут неожиданно измениться, и крайних случаев нельзя избежать.
По этой причине обычно рекомендуется указывать значения по умолчанию или резервные значения. Установка значений по умолчанию при деструктуризации очень проста. Просто напишите знак = после имени вашей переменной и укажите значение по умолчанию. Когда значение в массиве или объекте равно undefined — любое другое нулевое значение будет распаковано — переменной присваивается значение по умолчанию.
7. Разрушение регулярного выражения
Регулярные выражения используются для поиска шаблонов в строках. Когда регулярное выражение выполняется (RegExp.exec()) в javascript, совпадения возвращаются в виде массива строк.
Используя деструктурирование массива, вы можете напрямую распаковать совпадения RegExp с нужными переменными. В приведенном ниже примере мы разбираем почтовый адрес на отдельные части и напрямую присваиваем их переменным. Красивый!
8. Вложенная деструктуризация
Объекты и массивы не всегда плоские. Знаете ли вы, что вам не нужны отдельные назначения деструктурирования для распаковки значений? Назначения могут быть вложены в одно предложение для непосредственного достижения желаемого уровня.
9. Ключи динамических объектов
Предположим, вы хотите распаковать объект, ключи которого являются динамическими. Невозможна ли деструктуризация, поскольку вы не можете быть уверены в правильности имен ключей?
Неа! Ключи объекта можно назначать динамически при деструктурировании, что обеспечивает дополнительный уровень гибкости.
10. Параметры функции деструктурирования
Во всех предыдущих примерах мы распаковывали значения объекта в переменные. Но если в качестве параметра функции указан объект, мы можем вообще пропустить этот шаг. Параметры функции можно деструктурировать напрямую, делая значения доступными для использования в теле функции.
Это обертка! За 10 шагов я постарался показать вам весь потенциал задания по деструктуризации. Надеюсь, вы узнали что-то новое по пути. Хотите узнать больше о методах улучшения вашего JavaScript? Статья ниже может вам подойти!
Ресурсы:
- Назначение деструктурирования: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment?retiredLocale=ar
- Остаточный параметр: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
- Предложение отдыха/распространения: https://github.com/tc39/proposal-object-rest-spread
- Regex exec: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
