zoukankan      html  css  js  c++  java
  • ES6标准简介之Babel转码器解说

      ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5)。ES6已于2015年6月正式发布。它的目标是使JavaScript语言可以用于编写复杂的大型应用程序。ES6是一个泛指,含义是5.1版本以后的JavaScript的下一代标准,涵盖了ES2015、ES2016、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入门标准时一个理解和记录,如有错误,还望大家评论区指正,谢谢。

  • 相关阅读:
    算法竞赛入门经典习题2-3 韩信点兵
    ios入门之c语言篇——基本函数——5——素数判断
    ios入门之c语言篇——基本函数——4——数值交换函数
    144. Binary Tree Preorder Traversal
    143. Reorder List
    142. Linked List Cycle II
    139. Word Break
    138. Copy List with Random Pointer
    137. Single Number II
    135. Candy
  • 原文地址:https://www.cnblogs.com/hexiaobao/p/10152008.html
Copyright © 2011-2022 走看看