ECMAScript6简称ES6是在2015年发布的，又称ES2015
Babel是一个ES6转换器，可以将ES6代码转换为ES5代码并在现有环境中执行。
最常用的ES6特性包括let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
let const
用于声明变量，类似于var
ES5中只有函数作用域和全局作用域，没有块级作用域，块内同名变量会覆盖外层变量。let声明的两个用处：
- 具有块级作用域，不会改变块外同名的变量值
- 防止循环技术的变量泄露为全局变量带来意向不到的结果
下面的例子，第一个把块内var改为let，第二个把i声明改用let，即可得到期望结果
var name = 'zach'
while (true) {
var name = 'obama'
console.log(name) //obama
break
}
console.log(name) //obama
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
const用来声明常量，值不可改变
class extends super
引入class概念，对象原型写法更清晰
class通过extends可以继承
super代表父类的实例，子类必须在constructor中调用super方法，子类没有this对象，需要继承父类的this对象。
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
constructor(){
super()
this.type = 'cat'
}
}
let cat = new Cat()
cat.says('hello') //cat says hello
arrow function
两点好处，一简单方便，二对象中使用this更放心
- 简单方便
function(x, y) {
x++;
y--;
return x + y;
}//ES5
(x, y) => {x++; y--; return x+y}//ES6
- this问题
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout(function(){
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') //undefined says hi
以上会报错，因为setTimeout中的this是全局对象。解决方法把setTimeout替换成下面的
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
箭头函数没有自己的this，它的this是继承外面的。
template string
ES5中，组织html内容时，需要用到很多的+连接文本和变量，ES6中使用可以直接使用模板特性来写，用${}`来引用变量。
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
destructuring
中文名解构，按照一定的模式从数组和对象中提取值，对变量进行赋值
- 赋值
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog} //相当于let zoo = {cat: cat, dog: dog}
console.log(zoo) //Object {cat: "ken", dog: "lili"}
- 取值
let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many) //animal 2
default rest
ES6在function中可以直接给函数赋默认值
function animal(type = 'cat'){
console.log(type)
}
animal()
rest参数和一个变量名搭配使用，生成一个数组，用于获取函数多余的参数
function input(...params){
console.log(params)
}
input(1,2,3,4) //[1,2,3,4]
function input2(a,b,...params){
console.log(params)
}
input2(1,2,3,4) //[3,4]
import export
ES6中第一次加入了模块功能，取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
export
一个模块是一个独立的文件，如果希望外部能读取文件内的某个变量，必须使用export将变量输出，输出有两种方式：
- 在变量声明时输出
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
- 在文件末尾同统一输出（推荐）
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
export除了输出变量，还可以输出函数和类
输出时可以通过as给输出量设置输出名
export输出的接口与内部动态绑定，即外部获取到的是内部的实时值
import
import只能引入文件中export过的变量、函数或对象，可以通过as来重命名
import {var1, var2 as newname} from './example.js'
import会执行所加载的模块，import 'a_module'，但多次import只会执行一次。
参考资料
https://segmentfault.com/a/1190000004365693
http://es6.ruanyifeng.com/#docs/module
网友评论