Objek dan tatasusunan merosakkan di JavaScript

dekonstruksi dan tugasan javascript: memudahkan kod dan meningkatkan kebolehbacaan

Tugasan Deconstructed JavaScript membolehkan anda mengekstrak elemen individu dari array atau objek menggunakan sintaks ringkas dan memberikannya kepada pembolehubah, memudahkan kod dan menjadikannya lebih jelas dan mudah dibaca.

Dekonstruksi dan tugasan digunakan secara meluas, termasuk pemprosesan respons API, pengaturcaraan fungsional, dan rangka kerja dan perpustakaan seperti React. Ia juga boleh digunakan untuk objek dan tatasusunan bersarang, parameter fungsi lalai, pertukaran nilai berubah, mengembalikan pelbagai nilai dari fungsi, gelung untuk-, dan pemprosesan ekspresi biasa.

Apabila menggunakan tugasan yang dibina, anda perlu memberi perhatian kepada perkara -perkara berikut: Anda tidak boleh memulakan pernyataan dengan pendakap keriting, kerana ia kelihatan seperti blok kod. Untuk mengelakkan kesilapan, sama ada mengisytiharkan pembolehubah atau menggunakan kurungan jika pembolehubah diisytiharkan. Juga berhati -hati untuk mengelakkan pencampuran pembolehubah yang diisytiharkan dan tidak diisytiharkan.

bagaimana menggunakan tugasan dekonstruksi

Deconstructing Array

Katakan kita mempunyai array:

Deconstruction menyediakan alternatif yang lebih mudah dan kurang rawan untuk mengekstrak setiap elemen:

<code class="language-javascript">const myArray = ['a', 'b', 'c'];</code>

anda boleh mengabaikan nilai tertentu dengan menghilangkan nama nilai semasa menyerahkan, contohnya:

<code class="language-javascript">const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'</code>

atau gunakan pengendali rehat (...) untuk mengekstrak unsur -unsur yang tinggal:

<code class="language-javascript">const [one, , three] = myArray;

// one = 'a', three = 'c'</code>

<code class="language-javascript">const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']</code>

Deconstructing Object

dekonstruksi juga terpakai kepada objek:

Dalam contoh ini, nama pembolehubah satu, dua, dan tiga sepadan dengan nama harta benda. Kita juga boleh menetapkan atribut kepada pembolehubah nama, contohnya:

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'</code>

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

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

// first = 'a', second = 'b', third = 'c'</code>

Deconstruct Objects bersarang

objek bersarang yang lebih kompleks juga boleh dirujuk, contohnya:

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

<code class="language-javascript">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/'
*/</code>

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:

<code class="language-javascript">// 这会失败
{ a, b, c } = myObject;</code>

atau gunakan kurungan Jika pemboleh ubah telah diisytiharkan, contohnya:

<code class="language-javascript">// 这可以工作
const { a, b, c } = myObject;</code>

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

<code class="language-javascript">// 这可以工作
({ a, b, c } = myObject);</code>

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

<code class="language-javascript">// 这会失败
let a;
let { a, b, c } = myObject;

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

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.

<code class="language-javascript">// ES5
var a = 'one', b = 'two', c = 'three';

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

pertukaran nilai variabel

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

Anda tidak terhad kepada dua pembolehubah;

<code class="language-javascript">const myArray = ['a', 'b', 'c'];</code>

Parameter fungsi lalai

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

<code class="language-javascript">const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'</code>

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

<code class="language-javascript">const [one, , three] = myArray;

// one = 'a', three = 'c'</code>

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

<code class="language-javascript">const [one, ...two] = myArray;

// one = 'a', two = ['b', 'c']</code>

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

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
// ES6 解构示例
const {one, two, three} = myObject;
// one = 'a', two = 'b', three = 'c'</code>

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

mengembalikan pelbagai nilai dari fungsi

Fungsi

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

<code class="language-javascript">const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};

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

// first = 'a', second = 'b', third = 'c'</code>

for-of loop

Pertimbangkan pelbagai maklumat buku:

<code class="language-javascript">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/'
*/</code>

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

<code class="language-javascript">// 这会失败
{ a, b, c } = myObject;</code>

tugasan dekonstruksi menyediakan peningkatan selanjutnya, seperti:

<code class="language-javascript">// 这可以工作
const { a, b, c } = myObject;</code>

pemprosesan ekspresi biasa

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

<code class="language-javascript">// 这可以工作
({ a, b, c } = myObject);</code>

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.)

Dengan membuat pelarasan pernyataan, penggantian sinonim dan penyusunan semula perenggan teks asal, pemprosesan pseudo-asal teks asal selesai, dan format asal dan lokasi gambar dikekalkan.

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