Полное руководство для начинающих
Деструктуризация в Javascript (основы)
Синтаксический сахар для более чистого кода при использовании массивов и объектов
Мы собираемся обсудить деструктуризацию в javascript, которая сэкономит вам много времени, улучшит читаемость, более чистый код и т. Д .;
Имейте в виду, что он не совместим со всеми браузерами, и вам понадобятся транспилеры, такие как babel, чтобы получить эквивалентную версию вашего кода ES5, которая полностью совместима со всеми браузерами.
Я расскажу о некоторых классных примерах деструктуризации, которые используются в повседневной жизни. На данный момент деструктуризация применима к типам данных Array и Object в Javascript.
Не теряя времени, давайте перейдем к примерам и поймем, что я имею в виду.
// Array Destructuring // Accessing Element in array ES5 Way const array = ['First', 'Second', 'Third', 'Fourth'] // What if I have to access first Element array[0] // ES5 way const [first, second, third, fourth] = array // ES6 way console.log(first) // Output: 'First'
Что, если мне нужны только первые две переменные
const [first, second,...rest] = array console.log(first) // Output: 'First' console.log(rest) // Output: ['Third', 'Fourth']
Разрушение объекта
Мы также можем применить деструктуризацию для объектов в Javascript аналогично тому, как мы это сделали для массивов.
const studentDetails = { name: "Yaswanth", age: 28, contactDetails: { "phone": "+919030*****", "email": "yas*****@email.com", "address": { "doorNo": "132", "street": "La la land", "landmark": "Hollywood" } } } const {name, age, ...more} = studentDetails console.log(name, age) // Output: "Yaswanth" 28
Давайте деструктурируем больше
const {contactDetails: {phone, email, address}} = more const {doorNo, street, landmark = "NA"} = address
Обратите внимание, что мы установили для ориентира значения по умолчанию, если ориентир не определен, к нему будет добавлено «NA».
Вот проблема: что, если сам contactDetails не определен? Будет выдана следующая ошибка
TypeError: Cannot destructure property `phone` of 'undefined' or 'null'.
В этом случае мы должны обрабатывать ошибки. Таким образом, приведенный выше код будет изменен, как показано ниже
const {contactDetails: {phone, email, address} = {} } = more const {doorNo, street, landmark = "NA"} = address
Значения по умолчанию будут работать только с неопределенными, но не с нулевыми
const studentDetails = { name: "Yaswanth", age: 28, contactDetails: null } const {name, age, contactDetails} = studentDetails const {phone, email, address} = contactDetails || {} // This will still work even contactDetails is null
Бонус:
Как переименовать после деструктуризации?
const studentDetails = { name: "Yaswanth", age: 28, contactDetails: null } const {name, age, contactDetails: contact_details} = studentDetails
Теперь contactDetails переименован в contact_details, и значение будет доступно в contact_details.
Для дальнейшего чтения перейдите по этой ссылке.
Пожалуйста, поделитесь своими мыслями по этому поводу, а также о наиболее распространенных случаях деструктуризации. Надеюсь, вам понравилась эта статья. Помогите своим коллегам, оставив фрагменты в комментариях ниже.
Удачного кодирования !!