Mari kita bincangkan tentang 5 senario biasa dan contoh tugasan pemusnahan JS

Artikel ini membawakan anda pengetahuan yang berkaitan tentang JavaScript terutamanya tentang 5 senario biasa dan contoh pemusnahan dan tugasan js. Saya harap ia dapat membantu anda.

Memusnahkan sintaks tugasan ialah ungkapan JavaScript Melalui tugasan memusnahkan, atribut/nilai boleh dikeluarkan daripada objek/tatasusunan dan diberikan kepada pembolehubah lain. Sintaks ini ialah sintaks baharu yang diperkenalkan oleh spesifikasi ECMAscript 6 yang memudahkan untuk mendapatkan nilai daripada tatasusunan dan objek.

1. Ekstrak data

Mari kita lihat cara menyahbina objek dalam JavaScript Anda boleh mulakan dengan contoh mudah objek produk ini.

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;

Dengan cara ini, anda boleh mengakses sifat yang sepadan dengan cara berikut:

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38

Penyusunan boleh menjadikan kod lebih jelas dan ringkas. Bagaimana jika anda perlu menyahbina objek yang lebih kompleks? Iaitu, objek dalam objek.

Sekarang andaikan anda perlu mendapatkan atribut salah satu produk daripada data senarai produk, seperti berikut:

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];

Di sini, senarai produk bersarang dalam beberapa lapisan, dan anda perlu mengakses maklumat produk, anda boleh Menyahbina sebanyak mungkin peringkat untuk mendapatkan sifat objek item.

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

Kod di atas hanya digunakan untuk menunjukkan penggunaannya. Ia tidak disyorkan untuk mendapatkan maklumat objek dalam tatasusunan dengan cara ini semasa pembangunan projek.

Biasanya, senarai data tidak semestinya merupakan tatasusunan Dari segi kecekapan pemerolehan, capaian objek peta adalah lebih cekap daripada akses tatasusunan. Data di atas boleh ditukar kepada objek peta, seperti berikut:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

Dalam JavaScript, data boleh menjadi pembolehubah dan kaedah, jadi penetapan penstrukturan juga sesuai digunakan dalam definisi parameter fungsi, seperti berikut :

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解构赋值",
    remark: "解构赋值的实用场景介绍",
});

Apabila menggunakan rangka kerja seperti React atau Vue, terdapat banyak tempat untuk memusnahkan tugasan, seperti pengenalan kaedah, dsb.

2. Nilai alias

Jika anda ingin mencipta pembolehubah dengan nama yang berbeza daripada sifat, anda boleh menggunakan fungsi alias pemusnahan objek.

const { identifier: aliasIdentifier } = expression;

identifier ialah nama harta yang hendak diakses dan aliasIdentifier ialah nama pembolehubah. Penggunaan khusus adalah seperti berikut:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275

3 Atribut dinamik

boleh diekstrak kepada atribut pembolehubah menggunakan nama dinamik (nama atribut diketahui semasa masa jalan):

const { [propName]: identifier } = expression;

propName Ungkapan harus menilai kepada nama sifat (biasanya rentetan) dan pengecam harus menunjukkan nama pembolehubah yang dibuat selepas penstrukturan, penggunaan adalah seperti berikut:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

Dalam kod di atas , anda boleh mengemas kininya dengan mengemas kini productKey Nilai kemudian menyebabkan nilai product turut berubah dengan sewajarnya.

4. Rehat dalam pemusnahan objek

Tambahkan sintaks rehat pada pemusnahan, dan atribut Rehat mengumpul kunci harta terkira yang masih belum diambil oleh mod pemusnahan.

const { identifier, ...rest } = expression;

Selepas dimusnahkan, pengecam pembolehubah mengandungi nilai atribut. rest Pembolehubah ialah objek biasa dengan sifat yang tinggal.

const product = {
    title: "Nike Air Zoom Pegasus 38",
    price: 120,
    quantity: 5,
    category_id: 1,
    reviews: 9830,
    total: 45,
};
const { title, ...others } = product;
console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

Untuk tatasusunan, anda boleh mendapatkan nilai pertama dan terakhir​​ melalui Rehat:

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]

5 Nilai lalai

Seperti yang dinyatakan sebelum ini , anda boleh menyahbina tatasusunan Berikan nilai lalai kepadanya:

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1

Dengan cara ini, anda boleh memastikan bahawa terdapat nilai lalai apabila B, A tidak ditakrifkan.

Ringkasan

Pemusnahan adalah ciri yang sangat berguna yang telah ditambahkan pada versi ES6 JavaScript. Pemusnahan membolehkan anda mengekstrak sifat atau data dengan cepat dan mudah daripada objek dan tatasusunan ke dalam pembolehubah yang berasingan. Ia berfungsi dengan objek bersarang dan tugasan tatasusunan boleh diberikan menggunakan operator ....

Pembelajaran yang disyorkan: "Tutorial Video JavaScript"

Atas ialah kandungan terperinci Mari kita bincangkan tentang 5 senario biasa dan contoh tugasan pemusnahan JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!