Mari kita lihat pemusnahan objek dalam JavaScript

Destructuring ialah konsep yang menguraikan salah satu jenis data dan menetapkan atribut individunya kepada pembolehubah Ia telah diperkenalkan dalam artikel "5 Senario Biasa dan Contoh Tugasan Pemusnahan JavaScript". hari ini satu masa.

Pemusnahan Asas

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, lastName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(lastName); // Tang

Seperti yang dilihat dalam coretan kod di atas, dalam sintaks pemusnah, sifat objek firstName diuraikan dan ditetapkan ke sebelah kiri pembolehubah definisi ungkapan. Dalam senario di atas, nama sifat objek harus sepadan dengan pembolehubah yang ditakrifkan dalam ungkapan di sebelah kiri. Jika anda mentakrifkan nama pembolehubah lain, anda tidak akan mendapat nilai yang diingini, seperti:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, trueName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(trueName); // undefined

Memandangkan tiada atribut fullName dalam trueName, ia dimulakan kepada undefined.

Alias ​​​​destructuring

Jika anda perlu menetapkan atribut objek kepada nama pembolehubah dengan nama atribut yang tidak konsisten, anda boleh melaksanakannya dengan kod berikut:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang

Lalai pemusnahan nilai

Seperti yang anda lihat dalam kod di atas, tiada penstrukturan atribut khusus dalam objek Secara amnya, nilai ditetapkan kepada undefined jika anda tidak mahu ia menjadi undefined, anda boleh menetapkan nilai lalai untuknya, seperti berikut:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 18

Mari kita lihat keputusan di bawah kehadiran age atribut:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 30

REST Dekonstruksi

Jika anda ingin menyahbina atribut daripada objek, struktur atribut yang tinggal ialah Satu lagi pembolehubah, seperti berikut:

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { age, ...username } = fullName; // 解构语法
console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }
console.log(age); // 30

Dalam coretan kod di atas, atribut username diberikan kepada pembolehubah dan pembolehubah yang selebihnya diperuntukkan menggunakan operator rest (...) Sifat separa ditetapkan kepada objek tunggal.

Pembelajaran yang disyorkan: "Tutorial Video JavaScript"

Atas ialah kandungan terperinci Mari kita lihat pemusnahan objek dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!