新闻资讯 

网联科技新闻资讯,介绍网联科技新闻信息,让大家快速了解网联公司,知道网联科技到底好不好。

网联 > 关于我们 > 新闻资讯

ES6解构对象篇

来源:网联科技  |  关键词:|  发布日期:2021年09月29日

ES6解构对象篇前因后果——罪恶的代码调用接口,接口正常情况下,应该返回如下数据//后台返回的数据varuserInfo={name:'Lily',age:'18',education:{degree:'Masters',school:'SYSU'}}

  ES6解构对象篇

  前因后果——罪恶的代码

  调用接口,接口正常情况下,应该返回如下数据

  // 后台返回的数据

  var userInfo = {

  name: 'Lily',

  age: '18',

  education: {

  degree: 'Masters',

  school: 'SYSU'

  }

  };

  当年年轻的我,坚信我的代码是正确的,这不就是一个简单的对象吗,So easy!

  var education = userInfo.education;

  var degree = education.degree;

  var school = education.school;

  我犯了所有年轻程序员都会犯的错误!/(ㄒoㄒ)/~~ 一天,后台接口返回userInfo为一个undefined,悲催的我,页面崩溃了.... 作为一个爱学习的良好青年,有了bug,当然第一时间debug(F12)了

  

ES6解构对象篇

最后发现这是后台返回数据的问题,但作为一个励志成为十佳前端的人,怎么能亲信后台呢?Too young too simple!


  解决bug

  我发现这个问题后,就对代码做了兼容,兼容措施如下:

  var education = userInfo && userInfo.education;

  var degree = education && education.degree;

  var school = education && education.school;

  在发现ES6对象解构这个东东以前,我一直都是这么做的,代码也稳健的活了下来,直到有一天我发现了ES6,ES6成功的拯救了我。 下面重点介绍ES6对象解构的知识。

  ES6对象解构

  最基本的解构

  从一个简单的栗子开始!

  // ES6年代我们都不怎么用var,用const就感觉很厉害的样子

  const userInfo = {

  name: 'Lily',

  age: '18'

  };

  // 解构开始

  const { name, age } = userInfo; // 此处有风险,最好改为 userInfo || {}

  console.log(name); // Lily

  有木有觉得,在解构大对象时会很方便,我也是这么觉得的。下面看一个更给力的QAQ。

  解构并使用别名

  有时接口定义的字段往往不是我们想要的,甚至是和我们其他变量存在冲突,我们该怎么办呢?我也很无奈,叫后台改呗(你可能会被打死���)!其实我们在解构时也可以设置别名。

  const userInfo = {

  name: 'Lily',

  age: '18'

  };

  // 解构开始

  const { name: nickName } = userInfo;// 此处有风险,最好改为 userInfo || {}

  console.log(nickName);

  解构嵌套对象

  当我们遇到嵌套对象,该怎么办呢?对于一个菜鸟一般可以这样做:

  // 后台返回的数据

  var userInfo = {

  name: 'Lily',

  age: '18',

  education: {

  degree: 'Masters',

  school: 'SYSU'

  }

  };

  const { education } = userInfo; // 此处有风险,最好改为 userInfo || {}

  const { degree } = education // 此处有风险,后面会说明

  console.log(degree); // Masters

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

  // 后台返回的数据

  const userInfo = {

  name: 'Lily',

  age: '18',

  education: {

  degree: 'Masters',

  school: 'SYSU'

  }

  };

  const { education: { degree }} = userInfo;// 此处有风险,后面会说明

  console.log(degree); // Masters

  没有外层怎么办

  还是上面这个栗子,我们依然要解构出degree字段,加入可恶的后台某次返回的数据丢失了education字段

  // 后台返回的数据

  const userInfo = {

  name: 'Lily',

  age: '18'

  };

  const { education: { degree }} = userInfo;// TUncaught TypeError: Cannot destructure property `degree` of 'undefined' or 'null'.

  

ES6解构对象篇

这是你是否会觉得还是我们原来的方法好,最起码不会出错


  const userInfo = {

  name: 'Lily',

  age: '18'

  };

  const education = userInfo && userInfo.education;

  const degree = education && education.degree;

  const school = education && education.school;

  如果你是一个前端老鸟,一定知道其实我们的对象解构也是可以设置缺省值的。

  // 后台返回的数据

  const userInfo = {

  name: 'Lily',

  age: '18'

  };

  const {

  education: {

  degree

  } = {}

  } = userInfo || {};

  console.log(degree); // undefined

  这样一来我们的解构就完美了,就算后台挂了,我们也依然坚挺,雄起!!!

  更深层次的对象解构

  后台正常返回数据

  const userInfo = {

  name: 'Lily',

  age: 18,

  education: {

  school: {

  name: 'SYSU',

  rank: '9'

  }

  }

  }

  加入我们要解构出name和rank字段,该怎么做呢?其实我们有两种方式

  · 方式一 分别给education和school设置缺省值为{}

  // 后台实际返回数据

  const userInfo = {

  name: 'Lily',

  age: 18

  };

  const {

  education: {

  school: {

  name,

  rank

  } = {}

  } = {}

  } = userInfo || {};

  console.log(name); // undefined

  · 方式二 直接给education设置缺省值为{school: {}}。

  // 后台实际返回数据

  const userInfo = {

  name: 'Lily',

  age: 18

  };

  const {

  education: {

  school: {

  name,

  rank

  }

  } = {

  school: {}

  }

  } = userInfo || {};

  console.log(name); // undefined

  结语

  这里我们主要介绍了ES6解构对象的便利之处,麻麻再也不用担心我解构复杂对象了!测试也不会再给我报bug了。最后最重要的三点!

  永远不要相信后台承诺返回的数据格式

  永远不要相信后台承诺返回的数据格式

  永远不要相信后台承诺返回的数据格式


(Admin)
高新科技企业

2015-2023 长春市网联科技有限公司