Analisis penggunaan pemusnahan objek JavaScript (contoh terperinci)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang analisis penggunaan pemusnahan objek dalam JavaScript saya harap ia akan membantu anda.

Keluaran ES6 (ES2015) menyediakan JavaScript dengan cara yang lebih mudah dan lebih pantas untuk mengendalikan sifat objek. Mekanisme ini dipanggil Destructuring (juga dikenali sebagai destructuring assignment). Tetapi adakah anda benar-benar akan menggunakannya? Adakah anda benar-benar memahami penggunaan tugasan memusnahkan dalam pelbagai senario?

Dapatkan nilai daripada objek menggunakan pemusnahan

Penggunaan paling asas pemusnahan objek ialah untuk mendapatkan semula nilai kunci sifat daripada objek.

Sebagai contoh, kami mentakrifkan objek dengan dua sifat: nama dan umur

const User = {
  name: '搞前端的半夏',
  age: 18
}

Secara tradisinya, kami akan menggunakan notasi titik (.) atau notasi subskrip ([] ) mendapatkan nilai daripada sesuatu objek. Coretan kod berikut menunjukkan contoh mendapatkan semula nilai daripada objek menggunakan tatatanda titik untuk mendapatkan id dan nama nilai objek. pekerja

Sebelum ini kami ingin mendapatkan nilai atribut tertentu dalam objek, biasanya menggunakan .

const name = User['name'];
const age = User.age;

Sudah tentu kedua-dua kaedah ini tiada masalah dalam keadaan semasa, tetapi apabila terdapat terlalu banyak atribut Pengguna, kita perlu terus menyalin dan menampal, menghasilkan banyak kod berulang.

Dengan tugasan struktur, kami boleh mendapatkan nilai dengan cepat. Sebagai contoh kita mencipta pembolehubah menggunakan nama kunci objek dan memberikan nilai objek kepada kunci yang sama. Dengan cara ini, tidak kira berapa banyak atribut yang ada, kita hanya perlu menetapkan nama atribut, yang juga mengurangkan banyak kod berulang.

const { name, age } = User;

Gunakan pemusnahan untuk mendapatkan nilai daripada objek bersarang

Dalam contoh di atas, Pengguna hanyalah objek satu lapisan yang mudah Kami juga akan menemui objek bersarang dalam pembangunan harian. Objek bersarang, kemudian menggunakan tugasan struktur, bagaimana kita boleh mendapatkan semula nilai dalam objek bersarang. Seterusnya kami mentakrifkan semula objek Pengguna dan menambah atribut kenalan pada objek ini, yang mengandungi telefon Pengguna. .

const User = {
  name: '搞前端的半夏',
  age: '18',
  contact:{
    phone:'110',
  }
}

Jika kita menggunakan . untuk berulang-alik dengan nilai telefon, ia akan mengambil masa dua kali.

const phone = User.contact.phone;

Jika kita menggunakan tugasan pemusnah: penulisannya adalah seperti berikut :

const  {contact:{phone}}=User
consosle.log(phone)  // 输出10.

Tidak kira berapa peringkat sarang yang ada, asalkan anda mengikuti kaedah penulisan ini, anda pasti akan mendapat nilai tertentu.

Gunakan penstrukturan objek untuk menentukan pembolehubah baharu dan nilai lalai

Nilai lalai

Sudah tentu kita mungkin menghadapi banyak situasi yang melampau dalam proses pembangunan harian,

Sebagai contoh, objek yang dihantar dari bahagian belakang mungkin kehilangan beberapa medan

const User = {
  name: '搞前端的半夏',
}

atau atribut mungkin tidak mempunyai nilai khusus:

const User = {
  name: '搞前端的半夏',
  age: ''
}

Apabila kami menggunakan tugasan memusnahkan: Umur pembolehubah akan dibuat tanpa mengira sama ada atribut umur wujud.

const { name, age } = employee;

Apabila User.age tidak mempunyai nilai khusus, kami boleh menggunakan

const { name, age=18 } = employee;

untuk memberikan umur sebagai nilai lalai.

Pembolehubah baharu

Tunggu, tunggu. Terdapat lebih banyak keajaiban yang dipamerkan di bahagian penyahbinaan! Bagaimana untuk mencipta pembolehubah baru sepenuhnya dan menetapkan nilai yang dikira menggunakan nilai harta objek? Bunyi rumit? Ini ialah contoh

Apakah yang perlu kita lakukan apabila kita ingin mengeluarkan nilai gabungan atribut Pengguna?

const { name,age,detail = `${name} 今年 ${age} `} = User ;
console.log(detail); // 输出：搞前端的半夏 今年 18

Menggunakan alias pemusnah objek JavaScript

Dalam pemusnahan objek JavaScript, anda boleh menamakan alias pembolehubah pemusnah. Sangat berguna untuk mengurangkan kemungkinan konflik nama berubah.

const User = {
  name: '搞前端的半夏',
  age: ''
}

Katakan kita ingin menggunakan tugasan pemusnah untuk mendapatkan nilai atribut umur, tetapi umur pembolehubah sudah ada dalam kod Pada masa ini, kita perlu menentukan alias semasa struktur.

const { age: userAge } = User;
console.log(userAge); //搞前端的半夏

Dan jika anda menggunakan umur, ralat akan dilaporkan.

console.log(age);

Mengendalikan sifat nama dinamik menggunakan pemusnahan objek

Kami sering mengendalikan data respons API sebagai objek JavaScript. Objek ini mungkin mengandungi data dinamik, jadi sebagai pelanggan kami mungkin tidak mengetahui nama kunci harta itu terlebih dahulu.

const User = {
  name: '搞前端的半夏',
  age: ''
}

Apabila kita lulus kunci sebagai parameter, kita boleh menulis fungsi yang mengembalikan nilai sifat objek Pengguna. Di sini kami menggunakan [] untuk menerima parameter, dan js akan mengambilnya daripada objek berdasarkan pasangan kunci ini!

function getPropertyValue(key) {
    const { [key]: returnValue } = User;   
    return returnValue;
}

const contact = getPropertyValue('contact');
const name = getPropertyValue('name');
console.log(contact, name); // 空  搞前端的半夏

Memusnahkan objek dalam parameter fungsi dan mengembalikan nilai

Memusnahkan tugasan dan lulus parameter

Gunakan pemusnahan objek untuk menghantar nilai atribut sebagai parameter kepada fungsi .

const User = {
  name: '搞前端的半夏',
  age: 18
}

nama Sekarang mari kita buat fungsi mudah yang mencipta mesej menggunakan dan atribut nilai dept untuk log masuk ke konsol penyemak imbas.

function consoleLogUser({name, age}) {
  console.log(`${name} 今年 ${age}`); 
}

Lulus nilai secara langsung sebagai argumen fungsi dan gunakannya secara dalaman.

consoleLogUser(User); // 搞前端的半夏 今年 18

Nilai pulangan objek fungsi pemusnah

Terdapat satu lagi kegunaan fungsi pemusnah objek. Jika fungsi mengembalikan objek, anda boleh memusnahkan nilai terus ke dalam pembolehubah. Mari buat fungsi yang mengembalikan objek.

function getUser() {
  return {
    'name': '搞前端的半夏',
    'age': 18
  }
}

const { age } = getUser();
console.log(age); // 18

Menggunakan Pemusnahan Objek dalam Gelung

Penggunaan terakhir (tetapi paling tidak) yang akan kita bincangkan ialah pemusnahan gelung. Mari kita pertimbangkan satu set objek pekerja. Kami ingin mengulangi tatasusunan dan ingin menggunakan nilai harta setiap objek pekerja.

const User= [
  { 
       'name': '爱分享的半夏',
    'age': 16
  },
  { 
      'name': '搞前端的半夏',
    'age': 18
  },
  { 
        'name': '敲代码的半夏',
    'age': 20
  }
];

Anda boleh menggunakan gelung for-of untuk lelaran ke atas objek Pengguna dan kemudian menggunakan sintaks tugasan memusnahkan objek untuk mendapatkan semula butiran.

for(let {name, age} of employees) {
  console.log(`${name} 今年${age}岁!!!`);
}

Cadangan berkaitan: Tutorial pembelajaran javascript

Atas ialah kandungan terperinci Analisis penggunaan pemusnahan objek JavaScript (contoh terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!