解构

2019-08-05 本文已影响0人你喜欢吃青椒吗_c744

什么是解构？

解构与构造数据截然相反。例如，它不是构造一个新的对象或数组，而是逐个拆分现有的对象或数组，来提取你所需要的数据。可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值。

ES6使用了一种新模式来匹配你想要提取的数值, 解构赋值就是采用了这种模式。该模式会映射出你正在解构的数据结构，只有那些与该模式相匹配的数据，才会被提取出来。

被解构的数据项位于赋值运算符 = 的右侧，可以是任何数组和对象的组合，允许随意嵌套。用于给这些数据赋值的变量个数不限。

直白解释:模式匹配,映射关系,只要等号两边的模式相同,一一对应,左边的变量就会被赋予对应的值。

对象解构

最基本的解构

// ES6年代我们都不怎么用var，用const就感觉很厉害的样子
const userInfo = {
    name: 'Lily',
    age: '18'
};
// 解构开始
const { name, age } = userInfo; // 此处有风险，最好改为 userInfo || {}
console.log(name); // Lily

解构并使用别名

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

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

没有外层怎么办

//会报错
// 后台返回的数据
const userInfo = {
    name: 'Lily',
    age: '18'
};
const { education: { degree }} = userInfo;// TUncaught TypeError: Cannot destructure property `degree` of 'undefined' or 'null'.

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

// 后台返回的数据
const userInfo = {
    name: 'Lily',
    age: '18'
};
const { 
    education: { 
        degree 
    } = {}
} = userInfo || {};
console.log(degree); // undefined

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

参考文章

菜鸟也谈js（一）——ES6解构对象篇

解构