ECMASCript6 新特性介绍

新特性介绍"/>

ECMASCript6 新特性介绍

一、介绍

1.历史

1. ECMAScript和JavaScript

   • ECMAScrip是标准，JavaScript是实现
     
     • 类似于HTML5是标准，IE10、Chrome、FF都是实现
     • 换句话说，将来也能有其他XXXScript来实现ECMA
   • ECMAScript简称ECMA或ES
   • 目前版本
     
     • 低级浏览器主要支持ES 3.1
     • 高级浏览器正在从ES 5过渡到ES 6

2. 历史版本

2.兼容性

1.兼容性

• ES5浏览器兼容性一览表: ES5浏览器支持情况
• ES6浏览器情况。包括：IE10+、Chrome、Firefox、移动端、NodeJS，具体情况为： ES6浏览器支持情况

2.编译与转换，将ES6编译转换成低版本浏览器支持的JS代码

• 在线编译，使用语法解析转换工具将ES6语法解析转换为大部分浏览器识别的ES5语法，通用的转换方案有babel，traceur，jsx，typescript，es6-shim，其中，Bable是比较常用的，参见Bable，可以引入browser.js使浏览器支持Babel；
• 提前编译

2.ES6特性

1.变量

1.var的缺陷

• 可以重复声明，var a =5; var b = 7; var a = 12;
• 无法限制修改，对于某些常量，如PI等可以任意修改；
• 没有块级作用域，var作用于函数，而不是作用于块语句；

2.新的关键字

• let: 不能重复声明，变量可以修改，块级作用域
• const: 不能重复声明，变量不可以修改，块级作用域

var aBtn = document.getElementByTagName('button');
(function(i){for(var i = 0; i < aBtn.length; i++){aBtn.i.onclock = function(){alert(i);
}
})(i)
}

用let不用闭包来解决以上问题:

var aBtn = document.getElementByTagName('button');
for(var let = 0; i < aBtn.length; i++){aBtn.i.onclock = function(){alert(i);}
}

2.函数

1.箭头函数

省略条件

• 如果只有一个参数，()可以省略；
• 如果只有一个return语句，{}可以省略

let show = function(){alert('13')  
}
show();
let show = ()=>{alert('13')
}
function add(a, b){return a+b
}
add(5,12);
(a, b)=>a+b

2.函数参数

1.参数扩展/数组展开

• 参数扩展：…args，用来收集剩余参数，但必须是参数列的最后一个，例如：

function add(a, b, ...args){return a+b;
};
add(1,2,3,4,4,6);//函数中的3,4,4,6会传给...args；

• 数组展开。