Привет, народ! Надеюсь, у вас все хорошо.
Сегодня я поделюсь полезной информацией о важной концепции деструктуризации вызовов JavaScript.
Так что же такое деструктуризация???
ХОРОШО. Давайте начнем с того, что MDN говорит о деструктуризации.
«Синтаксис присваивания деструктуризации — это выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные. .”
Итак, простыми словами деструктуризация — это способ извлечения значений из массива или свойств из объектов в разные переменные.
И следующий вопрос, который у нас возникает, заключается в том, каков синтаксис и преимущества деструктурирования? Позвольте понять это на некоторых примерах.
Предположим, у меня есть массив имен учеников, и требуется извлечь первое и второе имя из массива и сохранить в разных переменных. Итак, давайте посмотрим, как мы можем добиться этого обычным способом (что когда-то делали все разработчики JS)
const students = ["Andrew", "Virat", "Tait", "Robin", "Warner"]; const first = students[0]; //As array position start with '0' const second = students[1]; console.log(first, second); // Andrew Virat
Здесь мы создали две переменные, первую и вторую, и назначаем элемент из массива student на основе индекса элемента (0 и 1). В приведенном выше коде нет ничего неправильного, и он будет работать так, как ожидалось, но с помощью деструктуризации мы можем добиться того же результата более качественным и чистым способом с меньшими усилиями.
Как?? Давайте посмотрим…
const students = ["Andrew", "Virat", "Tait", "Robin", "Warner"]; const [first, second] = students; console.log(first, second); // Andrew Virat OR const [first, second] = ["Andrew", "Virat", "Tait", "Robin", "Warner"]; console.log(first, second); // Andrew Virat
И что мы здесь сделали? Мы добились того же с меньшим количеством кода и более простым способом, используя деструктурирование. Здесь вместо создания двух переменных и сопоставления их с отдельным элементом массива на основе индекса элемента мы создали массив из двух переменных и сопоставили его с массивом студентов и получили тот же результат. При деструктурированиипервая переменная сопоставляется с первым элементом массива, а вторая переменная сопоставляется со вторым элементом массива, и все готово!!
Больше не нужно обращаться к элементу с помощью индекса, используйте деструктурирование.
Мы также можем использовать деструктуризацию с объектом для доступа к свойствам объекта. Давайте разберемся с этим на примере.
Предположим, у меня есть объект, содержащий сведения об ученике (как показано ниже), и я просто хочу получить доступ к имени, фамилии и электронной почте из этого.
Опять же, один из способов добиться этого
const student = { id: 001, firstname: 'Bill', lastname: 'Gates', email: '[email protected]', country: 'US', contact: '1234567890' } const firstname = student.firstname; or const lastname = student["lastname"]; cosnt email = student["email"]; console.log(firstname, lastname, email); // Bill Gates [email protected]
Хорошо! мы получим результат, как и ожидалось, но все же мы можем оптимизировать этот код и добиться того же результата с меньшими усилиями, используя деструктурирование. Дай посмотреть как..
const student = { id: 001, firstname: 'Bill', lastname: 'Gates', email: '[email protected]', country: 'US', contact: '1234567890' } const { firstname, lastname, email} = student; console.log(firstname, lastname, email); // Bill Gates [email protected]
Как видно из приведенного выше блока кода, мы достигаем того же результата с меньшим количеством кода, усилий и стандартным способом.
Есть и другие варианты использования деструктуризации, о которых я расскажу в следующей статье. А пока давайте начнем использовать деструктурирование и улучшим ваш код.
Удачного обучения!!
Спасибо!