ES6标准简介之Babel转码器解说

　　ES6是ECMAScript 6的简称，是JavaScript语言的下一代标准，如今基于jquery库的前端开发js所使用的标准是ES5（ECMAScript 5）。ES6已于2015年6月正式发布。它的目标是使JavaScript语言能够用于编写复杂的大型应用程序。ES6是一个泛指，含义是5.1版本之后的JavaScript的下一代标准，涵盖了ES201五、ES201六、ES2017等。

　　因为如今各大浏览对ES6的支持程度不一，因此在开发过程当中须要使用ES6的转码器 —— Babel,它能够将ES6代码转化为ES5代码，方便在浏览器环境中执行，你们能够参阅http://kangax.github.io/compat-table/es6/了解各大浏览器对ES6的支持状况。就如今目前三大新的JS框架中都是使用es6语法，这三大框架集成前端自动化打包工具 —— webpack和ES6转ES5的转化器 —— Babel，在新的框架下面就不用操心怎么转换了。

　　学习过ES6的同窗都应该知道箭头函数，那箭头函数和ES5中的function函数有什么区别呢，下面咱们先来看一段代码再跟你们说明一下最主要的区别

　　

1 //ES6
2 input.map(item => item + 1);
3 
4 //ES5
5 
6 inout.map(function (item) {
7     return item + 1;
8 });

箭头函数和function函数对比

　　不知道你们有没有看出什么细微的差异，可是很明显的一点就是ES6标准下的箭头函数简单了不少，方便咱们书写代码，开发项目和维护。这二者之间最主要的区别在于this指向，箭头函数的this指向不会改变，但function函数的this指向会改变（这也是当时本身第一次找工做面试官问个人最简单的一道面试题，当时没有回答上来，所如今对ES6的箭头函数和ES5的function函数的区别记得特别牢靠）。上面这段代码ES6的箭头函数通过Babe转码器转码以后就造成ES5的function函数。在新的js框架中集成Babel转码，因此每一个项目都会有一个.babelrc的配置文件，不少时候这个文件不须要改动　本文件的基本格式以下：

　　

1 {
2     “presets”: [],
3     "plugins": []  
4 }

.babelrc配置文件基本格式

　　固然若是你只是为了熟悉使用babel，你彻底能够使用命令行转码 —— babel-cli，安装命令以下：

　　npm install -global babel-cli

　　基本用法以下：

　　babel example.js

　　Babel 只转换新的JavaScript句法，而不转换新的API，如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及这些定义在前句对象上的方法都不会转码，要想对这么对象进行转码，就得使用babel-polyfill为当前环境提供一个垫片，安装命令以下：

　　npm install --save babel-polyfill

　　而后在脚本头部加入以下代码：

　　import 'babel-polyfill'便可

　　此博客是我的在学习ES6入门标准时一个理解和记录，若有错误，还望你们评论区指正，谢谢。