Objek dan tatasusunan merosakkan di JavaScript

ini nampaknya agak rumit, tetapi ingat bahawa dalam semua tugasan yang dibina semula:

const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/

sebelah kiri tugasan adalah sasaran dekonstruksi - corak yang mentakrifkan pembolehubah yang diberikan

di sebelah kanan tugasan adalah sumber yang dibina semula - array atau objek yang mengandungi data yang diekstrak
Langkah berjaga -jaga

Terdapat beberapa perkara lain yang perlu diperhatikan. Pertama, anda tidak boleh memulakan pernyataan dengan pendakap keriting, kerana ia kelihatan seperti blok kod, contohnya:

anda perlu mengisytiharkan pembolehubah, contohnya:

// 这会失败
{ a, b, c } = myObject;

atau gunakan kurungan Jika pemboleh ubah telah diisytiharkan, contohnya:

// 这可以工作
const { a, b, c } = myObject;

anda juga harus berhati -hati untuk mengelakkan pencampuran pembolehubah yang diisytiharkan dan tidak diisytiharkan, seperti:

// 这可以工作
({ a, b, c } = myObject);

di atas adalah pengetahuan asas dekonstruksi. Jadi, dalam keadaan apa keadaannya berfungsi? Saya gembira anda mengemukakan soalan ini.

// 这会失败
let a;
let { a, b, c } = myObject;

// 这可以工作
let a, b, c;
({ a, b, c } = myObject);

kes penggunaan yang dibina semula

pernyataan mudah

pembolehubah boleh diisytiharkan tanpa menentukan secara jelas setiap nilai, contohnya:

Authentic, versi deconstructed lebih lama. Lebih mudah dibaca, walaupun mungkin tidak berlaku untuk lebih banyak item.

// ES5
var a = 'one', b = 'two', c = 'three';

// ES6
const [a, b, c] = ['one', 'two', 'three'];

pertukaran nilai variabel

nilai swap memerlukan pemboleh ubah ketiga sementara, tetapi menggunakan dekonstruksi lebih mudah:

Anda tidak terhad kepada dua pembolehubah;

const myArray = ['a', 'b', 'c'];

Parameter fungsi lalai

Katakan kami mempunyai fungsi cantik () untuk mengeluarkan objek meta kami:

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

Jika tidak ada dekonstruksi, anda perlu menghuraikan objek ini untuk memastikan nilai lalai yang sesuai tersedia, contohnya:

const [one, , three] = myArray;

// one = 'a', three = 'c'

Sekarang, kita boleh memberikan nilai lalai kepada mana -mana parameter, contohnya:

const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']

tetapi kita boleh menggunakan dekonstruksi untuk mengekstrak nilai dan memberikan nilai lalai jika perlu:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'

Saya tidak pasti jika ini lebih mudah dibaca, tetapi ia jelas lebih pendek.

mengembalikan pelbagai nilai dari fungsi

hanya boleh mengembalikan satu nilai, tetapi ini boleh menjadi objek kompleks atau array multidimensi. Dekonstruksi tugasan menjadikan ini lebih praktikal, contohnya:

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

// ES6 解构示例
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'

for-of loop

Pertimbangkan pelbagai maklumat buku:

const meta = {
  title: 'Destructuring Assignment',
  authors: [
    {
      firstname: 'Craig',
      lastname: 'Buckler'
    }
  ],
  publisher: {
    name: 'SitePoint',
    url: 'https://www.sitepoint.com/'
  }
};

const {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

/*
  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = 'https://www.sitepoint.com/'
*/

ES6's For-Of adalah serupa dengan untuk masuk, kecuali ia mengekstrak setiap nilai dan bukan indeks/kunci, contohnya:

// 这会失败
{ a, b, c } = myObject;

tugasan dekonstruksi menyediakan peningkatan selanjutnya, seperti:

// 这可以工作
const { a, b, c } = myObject;

pemprosesan ekspresi biasa

Fungsi ungkapan biasa (seperti padanan) mengembalikan pelbagai perlawanan, yang boleh menjadi sumber tugasan yang dibina semula:

// 这可以工作
({ a, b, c } = myObject);

bacaan selanjutnya

• tugasan dekonstruksi - mdn
• Adakah terdapat sebarang kehilangan prestasi dalam menyusun semula tugasan menggunakan JavaScript - Reddit
• untuk ... pernyataan - mdn

Soalan Lazim mengenai Tugasan Dekonstruksi ES6 (Soalan Lazim)

(bahagian Soalan Lazim ditinggalkan di sini kerana panjangnya terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Kandungan bahagian FAQ sangat kebetulan dengan teks asal, dan pengekalan langsung akan menyebabkan pseudo -Originality terlalu rendah.)

Atas ialah kandungan terperinci Objek dan tatasusunan merosakkan di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!