ES6解構巢狀物件

zzbo發表於2019-02-16
巢狀物件

讓我們先回憶一下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設定一個預設值，可讀性更強，這又是一股清流。
在程式碼中靈活使用解構不僅可以使程式碼簡潔可讀，而且逼格大大提升。

相關文章