微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐