Деструктурирането е начин за разопаковане на елементи от масив или обект или знаци от низ. Използва се за извличане на стойностите от масиви или обекти и присвояването им на променливи.
От лявата страна посочваме имената на променливите, а от дясната страна масива или обекта, от който стойностите трябва да бъдат извлечени.
Деструктуриране на масиви:
// Destructuring an array of elements in the variables a, b, c let [a, b, c] = [1, 2, 3]; console.log(a) // 1 console.log(b) // 2 console.log(c) // 3
Деструктуриране на низове:
// Destructuring Strings characters into the variables a, b, and c let [a, b, c] = "hey"; console.log(a); // h console.log(b); // e console.log(c); // y
Разрушаване на обекти:
// Destructuring an object properties in the variables firstname, lastname let {firstname, lastname} = { firstname: 'John', lastname: 'Jay' }; console.log(firstname) // John console.log(lastname) // Jay
Имената на свойствата трябва да съвпадат с името на променливата, в противен случай няма да извлече стойността и дава undefined.
// Destructuring an object properties in the variables firstname, lastname let {fname, lastname} = { firstname: 'John', lastname: 'Jay' }; console.log(fname) // undefined console.log(lastname) // Jay
Нека вземем пример за обект с вложени обекти:
let {name, address: {city}} = { name: 'Jay', age: 23, address: {city: 'Raipur' }}; console.log(name) // Jay console.log(city) // Raipur
Задаване на стойности по подразбиране:
Можем да зададем стойностите по подразбиране за променливите, които се присвояват на променливата, ако съответният ключ не съществува в ключа.
let {firstname = 'Jetty', lastname} = { lastname: 'Jay' }; console.log(firstname) // Jetty console.log(lastname) // Jay
Псевдоними с деструктуриране:
Има случаи, в които искате променливата да има име, различно от името на свойството; в този случай използвайте двоеточие (:), за да посочите името на псевдонима след името на свойството.
// Extracting firstname as name let {firstname : name, age} = { firstname: 'John', age: 23 }; console.log(name) // John console.log(age) // 23
Абонирайте се за нашия Youtube канал за повече видеоклипове: