资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ES6解构嵌套对象

ES6解构嵌套对象

caige / 3115人阅读

摘要：更深层次的对象怎么办这里外层对设置缺省值，但里面的不存在，依然会报错。在代码中灵活使用解构不仅可以使代码简洁可读，而且逼格大大提升。

让我们先回忆一下ES6的对象解构，本文介绍各种ES6的对象解构用法，你用过哪一种？

最基本的解构

在对象中提取某个字段

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {name} = user;
  6. console.log(name); //prints: hehe
解构并使用别名

有时接口定义的字段往往带有下划线，但我们的前端更便好于驼峰式命名，那么可以使用别名(rename)：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   nick_name: "hehe"
  4. };
  5. const {nick_name: nickName} = user;
  6. console.log(nickName); //prints: hehe
解构嵌套对象

有时我们会遇到嵌套对象，如果我们了解未足够多时，会写出这种解构：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe",
  4.   education: {
  5.     degree: "Masters"
  6.   }
  7. };
  8. // 假设我们要提取degree
  9. const {education} = user;
  10. const {degree} = education;

我们会写两行，一层层的剥开，明显繁琐，如果这个对象有三四层结构那简直无法入目。其实可以用解构一步到位的：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe",
  4.   education: {
  5.     degree: "Masters"
  6.   }
  7. };
  8. const {education: {degree}} = user;
  9. console.log(degree); //prints: Masters

没错，就是比别名方法多了一个{ }

如果没有外层怎么办

假设要解构的数据是由接口返回的，由于某种原因会导致某个字段丢失。我们会往往遇到这种意外：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {education: {degree}} = user;  // TypeError: Cannot match against "undefined" or "null".

这时你是否会觉得还是我们原始的方法好使：

</>复制代码 
  1. const education = user || {};
  2. const degree = education.degree;

其实，神奇的解构可以让你定义一个缺省值，这样，我们不仅可以达到数据防御的目的，而且告别啰嗦的写法了：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {
  6.     education: {
  7.         degree
  8.     } = {}
  9. } = user;
  10. console.log(degree); //prints: undefined

这明显是一股清流啊。

更深层次的对象怎么办？ 
</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {
  6.     education: {
  7.         school: {
  8.             name
  9.         }
  10.     } = {}
  11. } = user;  // TypeError: Cannot match against "undefined" or "null".

这里外层对education设置缺省值，但里面的school不存在，依然会报错。
我们第一种办法就是继续对school设置缺省值为{}：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {
  6.     education: {
  7.         school: {
  8.             name
  9.         } = {}
  10.     } = {}
  11. } = user;
  12. console.log(name); //prints: undefined

另一种办法就是直接给education缺省值设置为{school: {}}：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {
  6.     education: {
  7.         school: {
  8.             name
  9.         }
  10.     } = {school: {}}
  11. } = user;
  12. console.log(name); //prints: undefined

这两种方法看似都可以，但如果要给学校名称school.name一个缺省值呢？如果是第一种方法，会写成这样：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {
  6.     education: {
  7.         school: {
  8.             name = "NB"
  9.         } = {}
  10.     } = {}
  11. } = user;
  12. console.log(name); //prints: NB

你数数看，这有多少个“=”号吗？啰嗦得不行，再看第二种方法：

</>复制代码 
  1. const user = {
  2.   id: 123,
  3.   name: "hehe"
  4. };
  5. const {
  6.     education: {
  7.         school: {
  8.             name
  9.         }
  10.     } = {
  11.         school: {
  12.             name: "NB"
  13.         }
  14.     }
  15. } = user;
  16. console.log(name); //prints: NB

这样整体给education设置一个缺省值，可读性更强，这又是一股清流。
在代码中灵活使用解构不仅可以使代码简洁可读，而且逼格大大提升。

云服务器 GPU云服务器 对象解构 解构函数 解构赋值 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90194.html

相关文章

  • [译] 最深刻而易懂的ES6解构教程

    摘要：被解构的数据项位于赋值运算符的右侧，可以是任何数组和对象的组合，允许随意嵌套。数组模式位于赋值运算符的左侧，被结构的数组在其右侧。 解构是ES6的新特性，用于从JavaScript对象和数组中提取数据，语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量，还能从根本上改变你的编码方式。用的越多，你就会发现越多塑造数据和函数的方式，这些实现方式在过去几乎是不可能的。本文将深...

    AlphaGooo 评论0 收藏0

  • 深入理解ES6笔记（五）解构：使访问数据更便捷

    摘要：当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中。在对象的嵌套解构中同样能为本地变量使用不同的名称提取数组解构结构赋值基本忽略一些选项重新赋值默认值数组解构赋值同样允许在数组任意位置指定默认值。 主要知识点：对象解构、数组解构、混合解构以及参数解构showImg(https://segmentfault.com/img/bVbfWgH?w=1020&h=585); 《深入理解...

    _DangJin 评论0 收藏0

  • ES6学习 第二章 变量的解构赋值

    摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇 变量的解构赋值。这一章原文链接： 变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

    番茄西红柿 评论0 收藏2637

  • ES6学习 第二章 变量的解构赋值

    摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。 前言该篇笔记是第二篇 变量的解构赋值。 这一章原文链接： 变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

    番茄西红柿 评论0 收藏2637

发表评论

登陆后可评论

0条评论

caige

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<