這篇“Js解構(gòu)賦值的常見場(chǎng)景有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Js解構(gòu)賦值的常見場(chǎng)景有哪些”文章吧。

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作與策劃設(shè)計(jì),阜南網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:阜南等地區(qū)。阜南做網(wǎng)站價(jià)格咨詢:028-86922220

解構(gòu)賦值語法是一種 JavaScript 表達(dá)式，通過解構(gòu)賦值, 可以將屬性/值從對(duì)象/數(shù)組中取出，賦值給其他變量。這種語法是 ECMAscript 6 規(guī)范引入了一種新語法，可以更輕松地從數(shù)組和對(duì)象中獲取值。

1. 提取數(shù)據(jù)

先來看看如何在 JavaScript 中解構(gòu)對(duì)象，可以從這個(gè)商品對(duì)象的簡單示例開始。

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;

這樣，就可以通過以下方式訪問相應(yīng)的屬性：

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

解構(gòu)，能夠讓代碼更加清晰簡潔。如果需要解構(gòu)一個(gè)更復(fù)雜的對(duì)象呢？即對(duì)象中的對(duì)象。

現(xiàn)在假設(shè)需要從商品列表數(shù)據(jù)中獲取其中一個(gè)商品的屬性，如下：

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,
    },
];

在這里，產(chǎn)品列表嵌套了幾層，需要訪問商品的信息，可以解構(gòu)盡可能多的級(jí)別以獲取商品對(duì)象的屬性。

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

上面的代碼僅用于展示其用法，項(xiàng)目開發(fā)中不建議再數(shù)組中這樣獲取對(duì)象信息。

通常，數(shù)據(jù)列表不一定非要數(shù)組，從獲取效率來說，map 對(duì)象的訪問比數(shù)組效率要高?？梢詫⑸厦娴臄?shù)據(jù)改為 map 對(duì)象，如下：

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

在 JavaScript 中，數(shù)據(jù)可以是變量和方法，因此解構(gòu)賦值也適合用在函數(shù)參數(shù)的定義，如下：

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解構(gòu)賦值",
    remark: "解構(gòu)賦值的實(shí)用場(chǎng)景介紹",
});

在使用 React 或 Vue 等框架時(shí)，有很多解構(gòu)賦值的地方，如方法的引入等等。

2. 別名取值

如果想創(chuàng)建與屬性名稱不同的變量，那么可以使用對(duì)象解構(gòu)的別名功能。

const { identifier: aliasIdentifier } = expression;

identifier 是要訪問的屬性的名稱，aliasIdentifier 是變量名稱。具體用法如下：

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. 動(dòng)態(tài)屬性

可以使用動(dòng)態(tài)名稱提取到變量屬性（屬性名稱在運(yùn)行時(shí)已知）：

const { [propName]: identifier } = expression;

propName 表達(dá)式應(yīng)計(jì)算為屬性名稱（通常是字符串），標(biāo)識(shí)符應(yīng)指示解構(gòu)后創(chuàng)建的變量名稱，用法如下：

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 }

上面代碼中，可以通過更新 productKey 的值進(jìn)而使得 product 的值也跟隨變化。

4. 對(duì)象解構(gòu)中的 Rest

將 rest 語法添加到解構(gòu)中，Rest 屬性收集那些尚未被解構(gòu)模式拾取的剩余可枚舉屬性鍵。

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

解構(gòu)后，變量標(biāo)識(shí)符包含屬性值。 rest 變量是一個(gè)具有其余屬性的普通對(duì)象。

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 }

對(duì)于數(shù)組，可以通過 Rest 的實(shí)現(xiàn)首尾值的獲?。?/p>

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

5. 默認(rèn)值

正如前面介紹的那樣可以在解構(gòu)數(shù)組時(shí)為其分配默認(rèn)值：

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

這樣，可以將確保在 B、A 未定義的情況下有一個(gè)默認(rèn)值。

以上就是關(guān)于“Js解構(gòu)賦值的常見場(chǎng)景有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：Js解構(gòu)賦值的常見場(chǎng)景有哪些
新聞來源：http://jinyejixie.com/article32/ppissc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、定制開發(fā)、App開發(fā)、網(wǎng)頁設(shè)計(jì)公司、建站公司、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)