1、交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x]

2、从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能讲他们放在数组或者对象里返回。了解解构赋值，取值这些值非常方便

//返回一个数组
function example(){
    return [1,2,3];
}
let [a,b,c] = example();
[a,b,c];   //[1,2,3]


//返回一个对象
function example(){
    return {
        foo:1,
        bar:2
    };
}
let {foo,bar} = example();
foo;   //1
bar;   //2

3、函数参数的定义

解构赋值可以方便的讲一组参数与变量名对应起来。

//参数是一组有次序的值
function f([x,y,z]){
    console.log(x,y,z);
}
f([1,2,3]);  //1,2,3
 

//参数是一组无次序的值
function func({x,y,z}){
    console.log(x,y,z);
}
func({z:3,y:2,x:1}); //1,2,3

4、提取JSON数据

解构赋值对提取JSON对象中的数据尤其有用

let jsonData = {
    id:42,
    status:"OK",
    data:[123,456]             
} ;
let {id,status,data:number} = jsonData;
console.log(id,status,number);   //42 "OK" (2) [123, 456]

二

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

// 后台返回的数据
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)了

解决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'.

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

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

转自：https://blog.csdn.net/weixin_34204722/article/details/87961811