es6相比es5增加的新特性 * 类 * 模块化 * 箭头函数 * 函数参数默认值 * 模板字符串 * 解构赋值 * 延展操作符(展开操作符) * 对象属性简写 * Promise * Let与Const #### 1.类（class） 对熟悉Java，PHP等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。 ``` <script type="text/javascript"> class user { constructor(name,age){ this.name = name this.age = age } getName(){ console.log(this.name) } getAge(){ console.log(this.age) } } </script> ``` #### 2.模块化(Module) ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域，模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口，通过import来引用其它模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突. #### 3.箭头（Arrow）函数 ()=>{} 如果只有一个参数，（）可以省略， 如果只有一个return，{}可以省略。 ``` <script type="text/javascript"> let show = function (){ alert(1111) } show() let show1 = ()=>{ alert(222) } show1() let show2 = function (b){ alert(b * 2); } let show3 = b =>{ alert(b*2) } let show4 = function(b){ return b *2; } let show5 = b=>b*2 </script> ``` ### 4.函数参数默认值 ``` function demo(arg1= 10, arg2 = 'red') { // TODO } ``` #### 5.模板字符串 `` 字符串模板,用反引号，这个可能被用在xss中。 let a=12 \`bbbb${a}ccccc` 在ES6中通过${}就可以完成字符串的拼接，只需要将变量放在大括号之中。 #### 6.解构赋值 很多语言都有这个特性，让代码更简单。 ``` [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 ``` #### 7.延展操作符 参数的扩展，就是不定个数的形参 ,...args 收集剩下的所有参数，位置必须是最后一个 function demo(a,b,...args){.............} ``` function demo(a,b,c){} arr = [1,2,3] demo(...arr) var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回 //等同于 var arr4 = arr1.concat(arr2); ``` ### 8.对象属性简写 ~~~sh const name='zhangsan',age='18',city='beijing'; const student = { name, age, city }; console.log(student);//{name: "zhangsan", age: "18", city: "beijing"} ~~~ #### 9.Promise 优雅的异步解决方案 ~~~js // 来用伪代码解释一下用法 var promise = new Promise(function (resolve, reject) { // ... some code if ( /* 异步操作成功 */ ) { resolve(value); } else { reject(error); } }); promise().then(res=>{ /* resolve */ /* 成功回调 */ /* res为回调的参数 也就是value */ }).catch(err=>{ /* reject */ /* 失败回调 */ /* err为回调的参数 也就是error*/ }) ~~~ **通俗的讲** `resolve`会触发`then`方法，`reject`会触发`catch`方法 在执行`resolve`或者`reject`前，都叫做`Pending`状态 #### 10.支持let与const var 声明变量的问题 可以重复声明 可以无限制修改 没有块级作用域 let 不能能重复声明变量，可以修改，块级作用域 const 声明常量，不能重复声明变量，也不能修改，块级作用域