es6 解构赋值 新认知/新习惯

es6 的解构赋值其实很早就学习了，但一直纠结于习惯和可读性问题，所以没有大规模使用。最近被 react调教一番之后。已经完全融入认知和习惯中去了。总结一下三个常用的技巧：

1. 对象取值
2. 取值并重命名
3. 剩余表达式 

 

1、对象取值

// 以前都需要这样取对象的值：
const title = obj.title;
const text = obj.text;
const time = obj.time;
const author = obj.author;
const type  = obj.type;

// 现在使用解构赋值就可以这样了：
const { title, text, time, author, type } = obj;

 

2、取值并重新命名

let { foo: baz } = myObject;
baz // "aaa"
foo // error: foo is not defined

foo被重新赋值为baz，请注意，结构赋值的时候，赋值的其实是后者而不是前者。请注意了。

 

3、剩余参数

...原本是延展运算符的意思，但和解构赋值结合，就变成剩余运算符了。举个例子：

// 这时候我顺理成章的想，rest是this.props里面的某个属性吧。结果找不到，后来才知道，这是剩余表达式的意思。

const { component: Component, render, authority, redirectPath, ...rest } = this.props;

给个例子说明剩余运算符的作用：

let [first,...rest] = [1,2,3,4,5];
first //1
rest //[2,3,4,5]

非常类似arguments