ES6解構嵌套對象

caige 發布于2019-08-21 17:54 / 3079人閱讀

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

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

最基本的解構

在對象中提取某個字段

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

解構并使用別名

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

const user = {
  id: 123,
  nick_name: "hehe"
};
const {nick_name: nickName} = user;
console.log(nickName); //prints: hehe

解構嵌套對象

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

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

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

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

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

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

如果沒有外層怎么辦

假設要解構的數據是由接口返回的，由于某種原因會導致某個字段丟失。我們會往往遇到這種意外：

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

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

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

其實，神奇的解構可以讓你定義一個缺省值，這樣，我們不僅可以達到數據防御的目的，而且告別啰嗦的寫法了：

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設置缺省值，但里面的school不存在，依然會報錯。
我們第一種辦法就是繼續對school設置缺省值為{}：

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

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

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

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

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

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

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

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

GPU云服務器云服務器對象解構解構函數解構賦值 ES6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90194.html

[譯] 最深刻而易懂的ES6解構教程

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

AlphaGooo 2019-08-22 10:33 評論0 收藏0
深入理解ES6筆記（五）解構：使訪問數據更便捷

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

_DangJin 2019-08-26 12:19 評論0 收藏0
ES6學習第二章變量的解構賦值

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

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6學習第二章變量的解構賦值

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

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637