ES6也出来有一会时间了，他新增的语法糖也的确大大提高了开发者的效率，今天就总结一些自己用到最多的。 开始前先分享一个好消息(*^__^*)，在3月30日晚上19点36分<60秒终于盼到了公众号原创文章保护的邀请，在今后发表的文章里都会支持留言功能了，期待和大家互动！然后历史文章菜单也有改变了，支持n天前的所有文章查看。欢迎使劲的敲！敲！敲！！！ 说到ES6肯定是先介绍Babel了，据阮一峰老师介绍到，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。
一、 Babel
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 该文件用来设置转码规则和插件，基本格式如下。
{
"presets": [],
"plugins": []
}
presets 字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm install --save-dev babel-preset-react # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3
然后，将这些规则加入.babelrc
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
想更深入了解Babel的话可以去阮一峰老师的Babel 入门教程看更详细的。
接下来就是我们开发中用到最多的ES6语法。
二、 ECMAScript6
为了让大家能快速理解ES6语法，部分我会拿ES5的来对比，你会发现大有不同O(∩_∩)O~。
1.Class
ES6中添加了对类的支持，引入了class关键字，想了解ES5对象语法的可以敲javascript中的面向对象
//定义类
class Cons{
constructor(name,age){
this.name = name;
this.age = age;
}
getMes(){
console.log(`hello ${this.name} !`);
}
}
let mesge = new Cons('啦啦啦~',21);
mesge.getMes();
//继承
class Ctrn extends Cons{
constructor(name,anu){
super(name); //等同于super.constructor(x)
this.anu = anu;
}
ingo(){
console.log(`my name is ${this.name},this year ${this.anu}`);
}
}
let ster = new Ctrn('will',21);
ster.ingo();
ster.getMes();
2.箭头操作符
新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写
var arr = [1, 2, 3];
//ES5
arr.forEach(function(x) {
console.log(x);
});
//ES6
arr.forEach(x = > console.log(x));
3.解构赋值
数组中的值会自动被解析到对应接收该值的变量中
var [name,,age] = ['will','lala','21'];
console.log('name:'+name+', age:'+age);//输出：name:will, age:21
4.默认参数
定义函数的时候指定参数的默认值
//ES5
function fn(name){
var name=name||'will';
console.log('my name is '+name);
}
//ES6
function fn(name='will'){
console.log(`my name is ${name}`);
}
5.多行字符串
使用反引号`来创建字符串
//ES5 var str = 'The 3.1 work extends XPath and' +'XQuery with map and array data structures' +'along with additional functions and operators' +'for manipulating them; a primary motivation' +'was to enhance JSON support.'; //ES6 var roadPoem = `The 3.1 work extends XPath and XQuery with map and array data structures along with additional functions and operators for manipulating them; a primary motivation was to enhance JSON support.`;
6.字符串模板
由美元符号加花括号包裹的变量${name}
var name = 'will';
console.log(`my name is ${name}`);
7.扩展运算符
在函数中使用命名参数同时接收不定数量的未命名参数，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。而ES6中是如下实现的
function add(...x){
return x.reduce((m,n)=>m+n);
}
console.log(add(1,2,3));//输出：6
console.log(add(1,2,3,4,5));//输出：15
8.块级作用域
let与const 关键字！可以把let看成var，它定义的变量被限定在了特定范围内。const则用来定义常量，即无法被更改值的变量。共同点都是块级作用域。
//let
for (let i=0;i<2;i++){
console.log(i);//输出: 0,1
}
console.log(i);//输出：undefined
//const
const name='a';
name='b'; //报错
9.模块
在ES6标准中支持module了,将不同功能的代码分别写在不同文件中，各模块只需使用export导出公共接口部分，然后通过使用module模块的导入的方式可以在其他地方使用
// b.js
function fn(){
console.log('hello world');
}
export fn; // a.js
module { fn } from "./b";
fn();
//然后在HTML引入a文件运行浏览器
10.for or
我们都知道for in循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。
var arr = [ "a", "b", "c" ];
for (v of arr) {
console.log(v);//输出 a,b,c
}
这些用到相对比较多。其他还有很多好玩的可以查看阮一峰的ECMAScript 6 入门
