Membawa Anda memahami tugas perusakan JavaScript

Konsep

tutorial pembelajaran JavaScript

ES6 menyediakan mode penugasan yang lebih ringkas untuk mengekstrak nilai dari array dan objek, yang disebut destrukturisasi

Contoh:

[a, b] = [50, 100];
konsol.log(a);
// keluaran yang diharapkan: 50
konsol.log(b);
// keluaran yang diharapkan: 100

[a, b, ...istirahat] = [10, 20, 30, 40, 50];
console.log(istirahat);
// keluaran yang diharapkan: [30, 40, 50]

array

sangat sederhana dan ringkas. Gunakan literal array di sisi kiri ekspresi penugasan. Setiap nama variabel dalam literal array dipetakan ke indeks yang sama dari yang dirusak Apa yang dimaksud dengan item

? Sama seperti contoh di bawah ini, item dalam array di sebelah kiri mendapatkan nilai indeks yang sesuai dari array yang dirusak di sebelah kanan

misalkan [a, b, c] = [1, 2, 3];
// dan = 1
// b = 2
// c = 3

mendeklarasikan penugasan terpisah.

Anda dapat mendekonstruksi penugasan secara terpisah melalui deklarasi variabel.

Contoh: mendeklarasikan variabel, menetapkan nilai secara terpisah

// Mendeklarasikan variabel let a, b;
//Kemudian tetapkan nilai [a, b] = [1, 2];
konsol.log(a); // 1
console.log(b); // 2

Destrukturisasi nilai default

Jika nilai yang diambil dengan destrukturisasi adalah undefined , Anda dapat menetapkan nilai default:

let a, b;
// Tetapkan nilai default [a = 5, b = 7] = [1];
konsol.log(a); // 1
console.log(b); // 7Pada

contoh di atas, kita menetapkan nilai default untuk a dan b. Dalam hal ini, jika nilai a atau b adalah undefined , maka nilai default yang ditetapkan akan ditetapkan ke nilai yang sesuai Variabel (5 ditugaskan ke a, 7 ditugaskan ke b)

menukar nilai variabel

Dulu, ketika kita menukar dua variabel, kita selalu menggunakan

metode

//exchange abc = a;a = b;b = c;

Namun, dalam dekonstruksi Dalam penugasan, kita dapat menukarkan nilai dua variabel dalam ekspresi destrukturisasi

misalkan a = 1; misalkan b = 3;//Tukarkan nilai a dan b [a, b] = [b, a]; console.log( a); // 3console.log(b); // 1

Mendekonstruksi array yang dikembalikan

fungsi

.

  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b)

; nilai kembalian [10, 20] dari c()** dapat digunakan dalam baris kode terpisah

untuk mengabaikan nilai kembalian (atau melewatkan item tertentu)

fungsi

nilai kembalian yang tidak diinginkan

) {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

tetapkan nilai array yang tersisa ke a variabel

ketika Anda Saat menggunakan destrukturisasi array, Anda dapat menetapkan semua bagian sisa dari array yang ditugaskan ke variabel

let [a, ...b] = [1, 2, 3];console.log(a); .log(b ); // [2, 3]

Dalam

hal ini, b juga akan menjadi sebuah array, dan semua item dalam array adalah item yang tersisa.

Berhati-hatilah di sini karena Anda tidak dapat menulis koma di akhir. Jika ada koma tambahan, kesalahan akan dilaporkan

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element tidak boleh memiliki tanda koma

Destrukturisasi array

Seperti halnya objek, array juga dapat disarangkan.

Contoh:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Gunakan destrukturisasi bertingkat untuk menetapkan warna merah, hijau, dan biru
// Gunakan destrukturisasi bertingkat untuk menetapkan warna merah, hijau, biru
const [hex, [merah, hijau, biru]] = warna;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

Penghancuran string

Dalam penghancuran array, jika target penghancuran adalah objek yang dapat dilintasi, penghancuran dan penugasan dapat dilakukan Data

misalkan [a, b, c, d, e] = 'halo';/*
a = 'h'
b = 'e'
c = 'aku'
d = 'aku'
e = 'o'
*/

Dekonstruksi objek

dasar dekonstruksi objek

misalkan x = { y: 22, z: true };
misalkan { y, z } = x; // misalkan {y:y,z:z} = singkatan dari x;
console.log(z); // true

ditugaskan ke nama variabel baru.

Nama variabel dapat diubah ketika menggunakan destrukturisasi objek

let o = { p: 22, q: true };
misalkan { p: foo, q: bar } = o;

konsol.log(foo); // 22
console.log(bar); // kode sebenarnya

=

var {p: foo} = o mendapatkan nama properti p dari objek o, dan kemudian menugaskannya ke variabel bernama foo.

Merusak nilai default

keluar dengan destrukturisasi undefined , kami Anda dapat mengatur nilai default

let { a = 10, b = 5 } = { a: 3 };

konsol.log(a); // 3
console.log(b); // 5

Berikan nilai pada nama objek baru dan berikan nilai default.

Seperti disebutkan sebelumnya, kita memberikan nilai pada nama objek baru , jika tidak didekonstruksi, nilai default akan otomatis digunakan

let { a: aa = 10, b: bb = 5 } = { a: 3 };

konsol.log(aa); // 3
console.log(bb); // 5

Menggunakan destrukturisasi array dan objek secara bersamaan.

Array dan objek dapat digunakan bersama dalam struktur

const props = [
  { id: 1, nama: 'Fizz' },
  { id: 2, nama: 'Buzz' },
  { id: 3, nama: 'FizzBuzz' },
];

const [, , { nama }] = alat peraga;
console.log(name); // "FizzBuzz"

tidak sepenuhnya didekonstruksi

let obj = {p: [{y: 'world'}] };
misalkan {p: [{ y }, x ] } = obj;//Jangan mendekonstruksi x

// x = tidak terdefinisi
// y = 'world'

memberikan sisa nilai pada objek

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// dan = 10
// b = 20
// rest = {c: 30, d: 40}

Penghancuran objek bertumpuk (penghancuran dapat diabaikan)

let obj = {p: ['hello', {y: 'world'}] };
misalkan {p: [x, { y }] } = obj;
// x = 'halo'
// y = 'dunia'
misalkan obj = {p: ['halo', {y: 'dunia'}] };
misalkan {p: [x, { }] } = obj;//abaikan y
// x = 'hello'

Catatan:

Berhati-hatilah dalam menggunakan variabel yang dideklarasikan untuk mendestrukturisasi

demonstrasi kesalahan:

misalkan x;{x} = {x: 1};

Mesin JavaScript akan memahami {x} sebagai blok kode, sehingga menghasilkan sintaksis kesalahan, Kami ingin menghindari penulisan kurung kurawal di awal baris untuk mencegah JavaScript menafsirkannya sebagai blok kode

Cara

penulisan

yang benar

:

let

function add([x, y]) {
	return x + y;}add([1, 2]);

Pada kode di atas, parameter fungsi add adalah array di permukaan, tetapi ketika melewati parameter, parameter array didekonstruksi menjadi variabel x dan y fungsinya Secara internal sama dengan meneruskan langsung x dan y.

penggunaan

penugasan destrukturisasi. Ada banyak cara

untuk menukar nilai variabel

misalkan x = 1;
misalkan y = 2;
[x, y] = [y, x];

penulisan

ini tidak hanya ringkas tetapi juga mudah dibaca, dan semantiknya jelas

dari suatu fungsi

hanya dapat mengembalikan satu nilai. Jika Anda ingin mengembalikan beberapa nilai, kita hanya dapat memasukkan nilai-nilai ini ke dalam array atau objek dan mengembalikannya dari objek atau array seperti mencari sesuatu

// Mengembalikan fungsi array contoh() {
  kembalikan [1, 2, 3];}biarkan [a, b, c] = contoh();
  // Mengembalikan contoh fungsi objek() {
  kembali {
    foo: 1,
    batang: 2
  };
  }let { foo, bar } = example();

Mengekstrak

tugas

penghancuran data JSON sangat berguna untuk mengekstraksi data dalam objek JSON

.
  nomor identitas: 42,
  status: "Oke",
  data: [867, 5309]
};

misalkan { id, status, data: angka } = jsonData;

console.log(id, status, nomor);
// 42, "OK", [867, 5309]

Dengan menggunakan kode di atas, kita dapat dengan cepat mengambil nilai dalam data JSON.

Rekomendasi terkait: Tutorial JavaScript

Di atas adalah untuk membawa Anda memahami detail tugas penghancuran JavaScript informasi lebih lanjut, harap perhatikan php Artikel terkait lainnya di situs web Cina!