与es6的不期而遇 - 解构赋值

简介

es6 是什么？

es6 是 javascript 的下一代标准，相较于上一代的 es5，es6 提出了很多新的特性，能够帮助我们更优雅的编写代码，现代浏览器基本都支持了大部分的 es6 的特性，当然还有一些特性没有支持， 我们需要其他的工具帮助我们把 es6 的代码转换成 es5 的代码，如webpack、gulp等。

why es6?

现在特别火的JS框架，Vue，React，Angular 等，都集成了第三方的打包工具，我们不需要额外去做 es6 转化为es5 的工作，所以你只需要编写优雅的代码就可以了，等下面介绍了es6 的特性， 就知道我们为啥要用es6了，it’s amazing！

今日重点

数组解构

上代码

1. 基础的例子

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log("a 的值:", a);
console.log("b 的值:", b);
console.log("c 的值:", c);

能看到a, b, c的值就是数组中对应的位置的值， 我们不需要写 const a = arr[0] 这样的代码， 看着就很清爽有没有。
2. 数组的嵌套

const arr = [1, [2, 4], [3, 5]];
const [a, b, [c]] = arr;
console.log("a 的值:", a);
console.log("b 的值:", b);
console.log("c 的值:", c);

我们看到b的值是一个数组，对应数组arr 第二个位置的值，再看c的值， 对应arr 数组第三个位置的值， 由于外层还有一个数组， 所以它的值就是3。 解构出来的变量和原位置的结构保持一致。
3.可忽略的解构

 const arr = [1, 2, 3];
 const [a, , c] = arr;
 console.log("a 的值:", a);
 console.log("c 的值:", c);

找到a, c 在数组中对应的位置值即可。
4.数组解构中的扩展运算符 ‘…’

const arr = [1, 2, 3, 4, 5];
const [a, ...c] = arr;
console.log("a 的值:", a);
console.log("c 的值:", c);

数组中arr 中除了a 的值， 剩下的都给了c， 所以 ‘…’ 也称作剩余运算符, 这个代码看起来就简洁许多。

对象解构 – 这个日常用的更多

对象解构和数组解构差不多，但是我们变量的命名， 需要对应到对象中的键值。
1.基础使用

const obj = { name: "cool", age: 20, isMan: true };
const { name, age, isMan } = obj;
console.log("name 的值:", name);
console.log("age 的值:", age);
console.log("isMan 的值:", isMan);

这里要想解构对象， 变量的命名就需要对应解构的对象中的key 值， 比如name 对应 obj 中的name, age 对应 obj 中的age。

2.扩展运算符的使用

const obj = { name: "cool", age: 20, isMan: true };
const { name, ...c } = obj;
console.log("name 的值:", name);
console.log("c 的值:", c);

这里c 就代表的是obj 对象中除去name 属性， 剩下的属性组成的对象， 而且不会修改原来的对象，是真的很方便，按照es5 的写法， 需要对原来的对象遍历， 然后一次次的赋值， 才能生成这个c对象。
以后我们会经常用到对象的拷贝， 以及对象的合并都会用到这个运算符。