ES6也出来有一会时刻了，他新增的语法糖也确实大大提高了开辟者的效力，本日就总结一些本身用到最多的。
说到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~。
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();
箭头操作符
新增的箭头操作符=>便有异曲同工之妙。它简化了函数的誊写
var arr = [1, 2, 3];
//ES5
arr.forEach(function(x) {
console.log(x);
});
//ES6
arr.forEach(x = > console.log(x));
解构赋值
数组中的值会自动被剖析到对应吸收该值的变量中
var [name,,age] = ['will','lala','21'];
console.log('name:'+name+', age:'+age);
//输出： name:will, age:21
默许参数
定义函数的时刻指定参数的默许值
//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}`);
}
多行字符串
运用反引号 ` 来建立字符串
//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.`;
字符串模板
由美圆标记加花括号包裹的变量${name}
var name = 'will';
console.log(`my name is ${name}`);
扩大运算符
在函数中运用定名参数同时吸收不定数目标未定名参数，在之前的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
块级作用域
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'; //报错
模块
在ES6规范中支撑module了,将差别功用的代码离别写在差别文件中，各模块只需运用export导出大众接口部份，然后经由过程运用module模块的导入的体式格局能够在其他处所运用
// b.js
function fn(){
console.log('hello world');
}
export fn;
// a.js
module { fn } from "./b";
fn();
//然后在HTML引入a文件运转浏览器
for or
我们都晓得for in 轮回用于遍历数组，类数组或对象，ES6中新引入的for of轮回功用类似，差别的是每次轮回它供应的不是序号而是值。
var arr = [ "a", "b", "c" ];
for (v of arr) {
console.log(v);//输出 a,b,c
}
其他另有Map、Set等能够检察阮一峰的ECMAScript 6 入门
