国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

ES6解構(gòu) - 對(duì)象解構(gòu)

BlackHole1 / 793人閱讀

摘要：解構(gòu)是新加的解構(gòu)功能，可以使得我們獲取數(shù)據(jù)更方便，從而提高日常編碼效率。解構(gòu)賦值的語(yǔ)法要求，一定要用一對(duì)小括號(hào)包裹整個(gè)解構(gòu)賦值表達(dá)式。當(dāng)然，也有辦法定義不同命中的變量，依然利用解構(gòu)獲得對(duì)象的屬性值。下一篇，我們講解構(gòu)在類(lèi)型數(shù)據(jù)上的解構(gòu)。

解構(gòu)是ES6新加的解構(gòu)功能，可以使得我們獲取數(shù)據(jù)更方便，從而提高日常編碼效率。
解構(gòu)可以用于對(duì)象，也可以用于數(shù)組，這篇文章我們只講在對(duì)象類(lèi)型上使用解構(gòu)可以做哪些事情：
一：解構(gòu)用于變量聲明

let node = {
    name: "mike",
    age: 25
};
let {name, age} = node;
console.log(name); // mike
console.log(age); // 25

let/const/var 后面跟上用一對(duì){}包裹的變量列表，變量名與對(duì)象屬性名相同，則就會(huì)取對(duì)象屬性對(duì)應(yīng)的值初始化變量。

二：解構(gòu)用于變量賦值

let node = {
    name: "mike",
    age: 25
};
name = "lily";
age = 20;
console.log(name); // lily
console.log(age);//20
({name, age} = node);
console.log(name);//mike
console.log(age);//25

以上代碼的邏輯為：預(yù)先定義的變量name和age分別被初始化為"lily"和20之后，又用node對(duì)象的屬性，重新賦值給name和age變量。解構(gòu)賦值的語(yǔ)法要求，一定要用一對(duì)小括號(hào)()包裹整個(gè)解構(gòu)賦值表達(dá)式。

三：給解構(gòu)的變量設(shè)置默認(rèn)值

let node = {
    name: "mike",
    age: 25
};
let {name, age, country = "China"} = node;
console.log(name); // mike
console.log(age); // 25
console.log(country); // China

如果我們?cè)诮鈽?gòu)聲明變量時(shí)，定義了對(duì)象中不存在的屬性，那么這個(gè)變量的值為undefined。我們可以給變量設(shè)置默認(rèn)值，當(dāng)對(duì)象中沒(méi)有對(duì)應(yīng)的屬性時(shí)，這個(gè)變量的值就是設(shè)置的默認(rèn)值。

四：解構(gòu)對(duì)象屬性賦值給不同名變量
在前面的例子里，我們的變量名都是和對(duì)象的屬性名一樣的。當(dāng)然，也有辦法定義不同命中的變量，依然利用解構(gòu)獲得對(duì)象的屬性值。

let node = {
    name: "mike",
    age: 25
};
let {name: localName, age, country: localCountry = "China"} = node;
console.log(localName); //mike
console.log(age); // 25
console.log(localCountry); //China

這里需要注意的是，冒號(hào)左邊的是對(duì)象的屬性名，右邊的是我們新定義的變量名，這一點(diǎn)與我們的認(rèn)知和習(xí)慣恰好反過(guò)來(lái)了。
我們?cè)谶@種場(chǎng)景下也可以給變量設(shè)置默認(rèn)值，就像上面的localCountry變量那樣做：:左邊是對(duì)象的屬性名，右邊是一個(gè)賦值表達(dá)式; 這個(gè)表達(dá)式=左邊是變量名，右邊是默認(rèn)值。
五：嵌套對(duì)象的解構(gòu)
前面我們所有的例子，被解構(gòu)的對(duì)象都是單層解構(gòu)，接下來(lái)我們看看多層對(duì)象(嵌套對(duì)象)的解構(gòu)：

let node = {
    personalInfo: {
        basicInfo: {
            name: "mike",
            age: 25
        }
    },
    level: 3
};
let { personalInfo: { basicInfo } } = node;
console.log(basicInfo.name);// mike

上面代碼的倒數(shù)第二行，我們初始化的變量為basicInfo，而不是personalInfo，這一點(diǎn)要特別注意。personalInfo只是用來(lái)指明basicInfo的父節(jié)點(diǎn)。
嵌套對(duì)象的解構(gòu)的語(yǔ)法就是：從原對(duì)象的最外層變量定位，一直到需要取值的那一層，每層之間用冒號(hào):隔開(kāi)，變量在冒號(hào)的右邊。我們?cè)谏厦娴睦訖C(jī)場(chǎng)上，再增加一層：

let node = {
    personalInfo: {
        basicInfo: {
            name: {
                firstName: "mike",
                lastName: "deep"
            },
            age: 25
        }
    },
    level: 3
};
let { personalInfo: {basicInfo: {name}} } = node;
console.log(name.firstName);// mike

以上，就是解構(gòu)在對(duì)象數(shù)據(jù)的使用。下一篇，我們講解構(gòu)在Array類(lèi)型數(shù)據(jù)上的解構(gòu)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106221.html

相關(guān)文章

  • ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

    摘要：另外對(duì)于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時(shí)，要非常小心。因此在行首加，將其強(qiáng)制轉(zhuǎn)化為表達(dá)式執(zhí)行。由于和無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)。 let和const let和const是es6新增的兩個(gè)變量聲明關(guān)鍵字，與var的不同點(diǎn)在于： （1）let和const都是塊級(jí)作用域，在{}內(nèi)有效，這點(diǎn)在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。 （2）使用let和con...

    iOS122 評(píng)論0 收藏0

  • ES6學(xué)習(xí) 第二章 變量的解構(gòu)賦值

    摘要：前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。前言該篇筆記是第二篇 變量的解構(gòu)賦值。這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）。解構(gòu)賦值是對(duì)賦值運(yùn)...

    番茄西紅柿 評(píng)論0 收藏2637

  • ES6學(xué)習(xí) 第二章 變量的解構(gòu)賦值

    摘要：前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。 前言該篇筆記是第二篇 變量的解構(gòu)賦值。 這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)...

    番茄西紅柿 評(píng)論0 收藏2637

  • ES6-變量的解構(gòu)賦值(3)

    摘要：數(shù)組的解構(gòu)賦值特點(diǎn)根據(jù)數(shù)據(jù)的下標(biāo)來(lái)賦值的，有次序。模式能夠匹配起來(lái)，如長(zhǎng)度為數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值的規(guī)則是只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象。布爾值解構(gòu)賦值為字符串的一種。在很多獨(dú)立細(xì)小的方面，解構(gòu)賦值都非常有用。 1、解構(gòu)賦值簡(jiǎn)介 官方解釋?zhuān)喊凑找欢ǖ哪Ｊ剑瑥臄?shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)（Destructuring）。 舉個(gè)例子，想獲取數(shù)組中...

    Jason_Geng 評(píng)論0 收藏0

  • 《深入理解ES6》筆記——解構(gòu)：使數(shù)據(jù)訪問(wèn)更便捷（5）

    摘要：解構(gòu)，一種黑魔法解構(gòu)是從對(duì)象中提取出更小元素的過(guò)程。賦值是對(duì)解構(gòu)出來(lái)的元素進(jìn)行重新賦值。總結(jié)本章講解了對(duì)象解構(gòu)賦值和數(shù)組解構(gòu)賦值，以及對(duì)象和數(shù)組混合情況下的解構(gòu)賦值操作，最后一個(gè)知識(shí)點(diǎn)是解構(gòu)函數(shù)的參數(shù)。 解構(gòu)，一種黑魔法 解構(gòu)是從對(duì)象中提取出更小元素的過(guò)程。賦值是對(duì)解構(gòu)出來(lái)的元素進(jìn)行重新賦值。 下面的代碼你可能無(wú)法在瀏覽器上實(shí)時(shí)測(cè)試，推薦在babel官網(wǎng)在線測(cè)試代碼：在線測(cè)試ES6代碼...

    Drinkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<