为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中创建方法非常简单,

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...