es5和es6的区别

1. 块级作用域 => 关键字let，常量const
2. 对象字面量的属性赋值简写
   1. let name = 'test';
   2. let person = {name;}
   3. console.log(person);// {name:'test'}
3. 赋值解构
   1. let [a,b,c] = [1,2,3];
   2. let [foo,[[bar], baz]] = [1, [[2], 3]];
   3. let [bar, foo] = [1];
   4. 解构不成功，变量值等于undefined
4. 展开运算符
   1. const [arg, arg1, ...arg2] = ['a', 'b', 'c', 'd'];
   2. console.log(arg2); //['c', 'd']
5. 箭头函数
   1. 箭头函数与普通函数的区别
      1. 外形不同：
      2. 箭头函数都是匿名函数 普通函数可以匿名也可以有名
      3. 箭头函数不能用于构造函数，不能使用new  普通函数可以
      4. 箭头函数本身没有this，在声明时捕获上下文的this为自己使用,并且call，apply，bind也改变不了          普通函数this指向调用它的对象      箭头函数不绑定arguments，取而代之用rest参数解决
      5. 箭头函数不能generator函数，不能使用yeild关键字          箭头函数不具有prototype原型对象        箭头函数不具有super                  箭头函数不具有new.target
6. 字符串模板
7. for of
8. Class类，有constructor、extends、super，本质上是语法糖
9. Map + Set + WeakMap + WeakSet
10. proxies：使用代理（Proxy）监听对象的操作
11. Symbol： 唯一命名
12. Promises：处理异步操作的对象，使用了Promise对象之后可以用一种链式调用的方式来组织代码

 

ES6是ES5 的语法糖。ES6的所有功能，使用ES5都可以实现，但是使用ES6更加简单、简介、标准化.

 

一、es6新特性

1、 新增let命令
区别 : es5声明变量都是通过var，let命令与var类似，但是不同的是，let声明的变量，只在let命令所在的代码块内有用。
2、 const命令
const声明的是一个只读的常量。一旦声明，常量的值就不能改变。
3、 声明变量的方法
es5声明变量的方法只有var和function，而es6除了es5中的两种方法外，还包括let，const，import，和class命令。es6一共有6种声明变量的方法。
4、 箭头函数

 

 

二、系统库的引入
es5：ES5中的引用需要先使用require导入React包，成为对象，再去进行真正引用
es6：ES6里，可以使用import方法来直接实现系统库引用，不需要额外制作一个类库对象
导出及引用单个类
es5：ES5中要导出一个类给别的模块用，一般通过module.exports来实现。引用时，则依然通过require方法来获取
es6：ES6中，则可以使用用export default来实现相同的功能，使用import方法来实现导入。
注意:ES5和ES6的导入导出方法是成对出现的，不可以混用。
比如：使用export default来导出，只能通过import 来导入。若使用require来导入，编译将不能通过。

 

 

三、定义组件
es5：ES5中，组件类的定义通过React.createClass实现。
注意;ES5中React.createClass后面是需要小括号的，且结尾必须有分号。
es6：在ES6里，让组件类去继承React.Component类就可以了。
注意：这里结尾时不会出现小括号，也不需要添加分号。

 

 

四、组件内部定义方法
es5：ES5中采用的是 ###:function()的形式，方法大括号末尾需要添加逗号
es6：ES6中省略了【: function】这一段，并且结尾不需要加逗号来实现分隔。
注意:使用ES6定义的规则的话，外层必须用【class #### extend React.Component】的方式来申明这个类，否则会报错。

 

 

五、定义组件的属性类型和默认属性
es5：在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现(这两个方法应该是固定名称的)
es6：在ES6里，统一使用static成员来实现
ES6中也可以在组件类声明完成后追加其静态方法。虽不推荐，但写法上也没问题

 

 

六、初始化state
es5：在ES5中，初始化state的方法是固定的getInitialState
es6：ES6中存在两种写法，
● 第一种，直接构造state函数
● 第二种，相当于OC中的方法重写，重写constructor方法

 

简略
● ES6中的let命令，声明变量，用法和var差不多

但是let是为JavaScript新增了块级作用域，ES5中是没有块级作用域的，并且var有变量提升的概念，但是在let中，使用的变量一定要进行声明；
● ES6中变量的结构赋值，包括对象解构和数组解构以及混合解构，比如：var [a,b,c] = [0,1,2];
● ES6中的函数定义也不再使用关键字function，而是利用了箭头函数=>来进行定义；
● ES6中可以设置默认函数参数，如function A（x,y=9）{};
● ES6中新增了Set集合和Map集合；
● ES6新增了一个基本数据类型Symbol；