Полное руководство для начинающих

Деструктуризация в 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.

Для дальнейшего чтения перейдите по этой ссылке.

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

Удачного кодирования !!