成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6解構(gòu)嵌套對象

caige / 3086人閱讀

摘要：更深層次的對象怎么辦這里外層對設(shè)置缺省值，但里面的不存在，依然會報錯。在代碼中靈活使用解構(gòu)不僅可以使代碼簡潔可讀，而且逼格大大提升。

讓我們先回憶一下ES6的對象解構(gòu)，本文介紹各種ES6的對象解構(gòu)用法，你用過哪一種？

最基本的解構(gòu)

在對象中提取某個字段

const user = {
  id: 123,
  name: "hehe"
};
const {name} = user;
console.log(name); //prints: hehe
解構(gòu)并使用別名

有時接口定義的字段往往帶有下劃線，但我們的前端更便好于駝峰式命名，那么可以使用別名(rename)：

const user = {
  id: 123,
  nick_name: "hehe"
};
const {nick_name: nickName} = user;
console.log(nickName); //prints: hehe
解構(gòu)嵌套對象

有時我們會遇到嵌套對象，如果我們了解未足夠多時，會寫出這種解構(gòu)：

const user = {
  id: 123,
  name: "hehe",
  education: {
    degree: "Masters"
  }
};

// 假設(shè)我們要提取degree
const {education} = user;
const {degree} = education;

我們會寫兩行，一層層的剝開，明顯繁瑣，如果這個對象有三四層結(jié)構(gòu)那簡直無法入目。其實(shí)可以用解構(gòu)一步到位的：

const user = {
  id: 123,
  name: "hehe",
  education: {
    degree: "Masters"
  }
};
const {education: {degree}} = user;
console.log(degree); //prints: Masters

沒錯，就是比別名方法多了一個{ }

如果沒有外層怎么辦

假設(shè)要解構(gòu)的數(shù)據(jù)是由接口返回的，由于某種原因會導(dǎo)致某個字段丟失。我們會往往遇到這種意外：

const user = {
  id: 123,
  name: "hehe"
};
const {education: {degree}} = user;  // TypeError: Cannot match against "undefined" or "null".

這時你是否會覺得還是我們原始的方法好使：

const education = user || {};
const degree = education.degree;

其實(shí)，神奇的解構(gòu)可以讓你定義一個缺省值，這樣，我們不僅可以達(dá)到數(shù)據(jù)防御的目的，而且告別啰嗦的寫法了：

const user = {
  id: 123,
  name: "hehe"
};

const {
    education: {
        degree
    } = {}
} = user;
console.log(degree); //prints: undefined

這明顯是一股清流啊。

更深層次的對象怎么辦？ 
const user = {
  id: 123,
  name: "hehe"
};

const {
    education: {
        school: {
            name
        }
    } = {}
} = user;  // TypeError: Cannot match against "undefined" or "null".

這里外層對education設(shè)置缺省值，但里面的school不存在，依然會報錯。
我們第一種辦法就是繼續(xù)對school設(shè)置缺省值為{}：

const user = {
  id: 123,
  name: "hehe"
};
const {
    education: {
        school: {
            name
        } = {}
    } = {}
} = user;
console.log(name); //prints: undefined

另一種辦法就是直接給education缺省值設(shè)置為{school: {}}：

const user = {
  id: 123,
  name: "hehe"
};
const {
    education: {
        school: {
            name
        }
    } = {school: {}}
} = user;
console.log(name); //prints: undefined

這兩種方法看似都可以，但如果要給學(xué)校名稱school.name一個缺省值呢？如果是第一種方法，會寫成這樣：

const user = {
  id: 123,
  name: "hehe"
};
const {
    education: {
        school: {
            name = "NB"
        } = {}
    } = {}
} = user;
console.log(name); //prints: NB

你數(shù)數(shù)看，這有多少個“=”號嗎？啰嗦得不行，再看第二種方法：

const user = {
  id: 123,
  name: "hehe"
};
const {
    education: {
        school: {
            name
        }
    } = {
        school: {
            name: "NB"
        }
    }
} = user;
console.log(name); //prints: NB

這樣整體給education設(shè)置一個缺省值，可讀性更強(qiáng)，這又是一股清流。
在代碼中靈活使用解構(gòu)不僅可以使代碼簡潔可讀，而且逼格大大提升。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90194.html

相關(guān)文章

  • [譯] 最深刻而易懂的ES6解構(gòu)教程

    摘要：被解構(gòu)的數(shù)據(jù)項位于賦值運(yùn)算符的右側(cè)，可以是任何數(shù)組和對象的組合，允許隨意嵌套。數(shù)組模式位于賦值運(yùn)算符的左側(cè)，被結(jié)構(gòu)的數(shù)組在其右側(cè)。 解構(gòu)是ES6的新特性，用于從JavaScript對象和數(shù)組中提取數(shù)據(jù)，語法上比ES5所提供的更加簡潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會發(fā)現(xiàn)越多塑造數(shù)據(jù)和函數(shù)的方式，這些實(shí)現(xiàn)方式在過去幾乎是不可能的。本文將深...

    AlphaGooo 評論0 收藏0

  • 深入理解ES6筆記（五）解構(gòu)：使訪問數(shù)據(jù)更便捷

    摘要：當(dāng)冒號右側(cè)存在花括號時，表示目標(biāo)被嵌套在對象的更深一層中。在對象的嵌套解構(gòu)中同樣能為本地變量使用不同的名稱提取數(shù)組解構(gòu)結(jié)構(gòu)賦值基本忽略一些選項重新賦值默認(rèn)值數(shù)組解構(gòu)賦值同樣允許在數(shù)組任意位置指定默認(rèn)值。 主要知識點(diǎn)：對象解構(gòu)、數(shù)組解構(gòu)、混合解構(gòu)以及參數(shù)解構(gòu)showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...

    _DangJin 評論0 收藏0

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

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

    番茄西紅柿 評論0 收藏2637

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

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

    番茄西紅柿 評論0 收藏2637

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<