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

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....