ES不同版本语法新特性

es6

1.类（class）
对熟悉Java，object-c，c#等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。

2.模块化(Module)
ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。
导出(export):
ES6允许在一个模块中使用export来导出多个变量或函数。

export const name = 'Rainbow';  // 导出1个

const name = 'Rainbow';
const age = '24'; 
export {
   name, age}; // 导出多个

export function myModule(val) {
   
	return val; 
}

export const myModule = val => val; // 箭头函数

导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。

import {
   myModule} from 'myModule';
import {
   name,age} from 'test';

3.箭头（Arrow）函数
这是ES6中最令人激动的特性之一。=>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>，就不需要这种模式了。

但是：【箭头函数不能用于匿名函数；】
与普通function函数的区别：
1.箭头函数不能用于匿名函数
2.箭头函数不具有arguments对象，每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
3.箭头函数不能用于Generator（生成器）函数。
4.箭头函数不具有prototype原型对象。
5.箭头函数不具有super。
箭头函数的结构：
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名，而箭头之后可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过return来返回值，否则返回的是undefined）。

4.函数参数默认值
ES6支持在定义函数的时候为其设置默认值：

function foo(height = 50, color = 'red') {
   
	 ... 
}

不使用默认值：

function foo(height, color) {
   
	var height = height || 50;
  var color = color || 'red';
}

5.模板字符串
ES6支持模板字符串，使得字符串的拼接更加的简洁、直观。
不使用模板字符串：

var name = 'Your name is ' + first + ' ' + last + '.'

使用模板字符串：

var name = `Your name is ${
     first} ${
     last}.`

在ES6中通过${}就可以完成字符串的拼接，只需要将变量放在大括号之中。

6.解构赋值
解构赋值语法是JavaScript的一种表达式，可以方便的从数组或者对象中快速提取值赋给定义的变量。
获取数组中的值
从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。

var foo = ["one", "two", "three", "four"]; 
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"  

//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four" 

//你也可以这样写
var a, b; //先声明变量 
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2 

获取对象中的值

const student = {
   
  name:'Ming',
  age:'18',
  city:'Shanghai',
}; 
const {
    name, age, city } = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"

7.延展操作符(Spread operator)
延展操作符…可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造对象时, 将对象表达式按key-value的方式展开。
语法
函数调用：

myFunction(...iterableObj); 

数组构造或字符串：

[...iterableObj, '4', ...'hello', 6];

构造对象时,进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）：

let objClone = {
    ...obj }