解构赋值是ES6送给开发者的一把神奇的兵刃，在一定程度上给开发者带来了便捷和高效。

引入

在我的日常开发过程中，解构赋值经常被应用到。

前段时间开发一个需求时，我又用到了解构赋值，但是却怎么也实现不了我想要的效果，直到我查找了一篇文章才帮助我解决了问题（参见参考链接）。

虽然起因是解构赋值里的那一个问题，但是既然主题是解构赋值，那就当给自己复习一遍，把大略的知识都记录一下。

解构赋值

在ES6诞生之前，开发者们取对象里的值通常都是ES5的写法：

ES5写法

var obj = {
    name: 'Bob',
    age: 16,
};

var name = obj.name;
var age = obj.name;

console.log(name);   // 'Bob'
console.log(age);   // 16

这样的写法简单易懂，原本也是可以接受的。但是ES6里的解构赋值诞生之后，更加简洁的语法让开发者们喜笑颜开。

ES6写法

这里，才是解构赋值真正开始的地方。

解构

一般用法都是声明同时定义。

const obj = {
    name: 'Bob',
    age: 16,
};

const { name, age } = obj;

console.log(name);   // 'Bob'
console.log(age);   // 16

解构并赋值

将对象解构后，定义一个新的变量（userName），并将对象某个属性值（name）赋值给它。

const obj = {
    name: 'Bob',
    age: 16,
};

const {
    name: userName,
    age
} = obj;

console.log(name);   // Uncaught ReferenceError: name is not defined
console.log(userName);   // 'Bob'
console.log(age);   // 16

剩余参数

有时候，对一个庞大的数组或者对象进行解构，我们需要的结果是将数组或者对象中某一个项数据或者某几项数据单独提出来定义，其他的数据保存在另一个变量中。

例：现有如下对象

const obj = {
    id: 1,
    name: 'title',
    price: 1,2,
    num: 4,
    money: 90,
};

现在需要将对象中的money项提取出来单独定义，其他数据依旧保存在同一个对象中。

const {
    money,
    ...otherData,
} = obj;

// money: 90

// otherData: {
//     id: 1,
//     name: 'title',
//     price: 1,2,
//     num: 4,
// }

解构时给已存在的变量重新赋值

上面的例子中，userName是解构时才定义的，而我想实现的效果是，将之前已经定义的变量，在解构时，给其赋一个新的值。

最开始我是这样写的，但是却报错了：

// 错误代码
let userName = 'Tom';

const obj = {
    name: 'Bob',
    age: 16,
};

let {
    name: userName,
    age
} = obj;   // Uncaught SyntaxError: Identifier 'userName' has already been declared

报错信息提示，userName已经被定义过了，这就是我上面所提到的遇到的问题。

而参考链接中的这篇文章给了解决方案：立即执行函数。仅仅说这个名词可能会让人有点懵，所以还是让代码自己来解释吧。

let userName = 'Tom';

const obj = {
    name: 'Bob',
    age: 16,
};

// 立即执行函数
({
    name: userName,
    age
} = obj);

console.log(userName);   // 'Bob'

到这里我的问题就解决了，但是ES6解构赋值中还有很多使用场景和方法，需要探究更多可以查看参考链接中的文章，这篇文章讲解的非常清晰！！

参考链接

ES6解构赋值.

ES6解构赋值使用方法详解

引入