为react准备的一份es6语法笔记

在redux中，尤其在reducer对action处理上我们会使用下面常见的es6语法：

一. ...

1.省略赋值（在结构赋值中使用...）

一个数组形式的结构赋值：

var [a,b,c]=[1,2,3]  
console.log(a)
console.log(b)
console.log(c)

打印输出1 2 3！

我们如果使用了...

var [a,...c]=[1,3,4,5,6]  
console.log(a)
console.log(b)
console.log(c)

结果：

可见在结构复制中，...会把后面的以集合的形式复制给...后面的变量

2.展开运算符（在数组中使用...）

在数组中使用：

var arr=[1,3];
var arr2=[...arr,5]
console.log(arr2)

结果：

会把arr展开后自动赋值到arr2中

二. object.assign()

var obj={a:"a",b:"b"}
var obj2={c:"c"}
var obj3=Object.assign(obj,obj2)
console.log(obj3)

会把obj和obj2合并，

如果当合并的对象出现了相同的key，遵循后替前的原则：

var obj={a:"a",b:"b"}
var obj2={b:"c"}
var obj3=Object.assign(obj,obj2)
console.log(obj3)

在react的jsx使用中，我们有很多的循环处理，我们知道render方法可以显示组件里面的jsx：

var arr=[
<li>1</li>,<li>2</li>,<li>3</li>
];

三. map方法

map方法在es5已经存在，是数组的迭代方法：

var arr=[1,3];
var arr2=arr.map(function(item,i){
	return item+1;
})
console.log(arr2)

结果：

map方法接收一个回调函数，第一个参数就是数组某一项的值，我们return出我们的处理，最后返回一个新数组。

在react的组件中，我们会有很多的数据循环处理，

四. class

我们react创建组件采用推荐的子类继承父类的形式，里面会使用构造函数，里面会使用super函数，在里面我们可以：

this.state.xx定义各种状态，用来在jsx中使用

同理，在class中创建方法非常简单，

原文地址：https://www.jb51.cc/react/302602.html