• ECMAScript 6 是JavaScript 语言的下一代标准;发布于2015年,又称为ECMAScript 2015。

  • ECMAScript 方言还有 JScript 和 ActionScript。

  • ECMAScript 与 JavaScript 的关系:前者是后者的规范,后者是前者的一种实现。

  • 一个完整的JavaScript实现 包含 ECMAScript 、DOM、 BOM 三部分。

  • babel 转码器:
    • Babel 是一个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行;

      //转码前
      input.map(item => item +1); //转码后
      input.map(function (item) {
      return item + 1;
      })
    1. 命令行环境
      Babel 的命令行版本通过下面的命令安装:

      $ npm install --global babel-cli
      $ npm install --save babel-preset-es2015
      // 然后在当前目录下新建配置文件 .babelrc 并写入以下代码
      {
      "presets": ['es2015']
      }

      Babel 自带一个babel-node 命令, 提供支持ES6 的 REPL 环境。它支持Node.js 的REPL环境的所有功能,而且可以直接运行ES6代码:

      $ babel-node
      console.log([1,2,3].map(x => x * x)) //[1 , 4, 9]

      babel-node 命令也可以直接运行 ES6脚本:(假设将上述代码写入es6.js中)

      $ babel-node es6.js     // [1, 4, 9]

      babel 命令可以将 ES6代码 转换为 ES5 代码:

      $ babel es6.js
      
      "use strict";
      console.log( [1,2,3].map( function (x) {
      return x * x;
      }) )

      -o参数(或--out-file)可将转换后的代码从标准输出 重定向至文件

      $ babel es6.js -o es5.js
      #或者
      $ babel es6.js --out-file es5.js

      -d参数 用于转换整个目录 (-d后面跟的是输出目录)

      $ babel -d build-dir source-dir

      -s参数 用于生成source map 文件

      $ babel -d build-dir source-dir -s
    2. 浏览器环境
      babel 也可以用于浏览器。 但是Babel6.0开始不再直接提供浏览器版本,而是要用构建工具构建出来;或者通过安装5.x 版本的babel-core模块获取。
      $ npm install babel-core@5

      运行以上命令可在当前目录的 node_modules/babel-core/ 子目录下找到babel的浏览器版本browser.js(未精简) 和 browser.min.js(已精简)
       然后插入以下代码到网页中:

      <script src="node-modules/babel-core/browser.js"></script>
      <script type="text/babel">
      // 书写es6 代码
      </script>

      注意: 这种写法实时的将es6 转换为 es5,对网页性能有影响。 生产环境下需要加载已转码的脚本。

    3. Node.js 环境
      (1)先安装babel-core 和 babel-preset-2015 
      $ npm install --save-dev babel-core babel-preset-2015

      (2)然后在项目根目录下新建 .babelrc 文件

      {
      "presets":["es2015"]
      }

      (3)最后在脚本中调用babel-core的 transform 方法

      var es5Code = 'let x = n => n + 1';
      var es6Code = require('babel-core')
      .transform(es5Code, {presets: ['es2015']})
      .code;
      //' "use strict"; \n\n var x = function x(n) {\n return n+1; \n}; '

      方法二:
      Node 脚本还有一种特殊的babel用法,即把babel加载为require 命令的一个钩子
      执行完(1)(2)之后,在应用的入口脚本( entry script )头部加入下面语句:

      require("babel-core/register");

      有了上面这个语句,后面所有通过require命令加载的后缀名为 .es6  .es  .jsx  .js  的脚本都会先通过babel转码再加载;

    4. 在线转换
      Babel提供了一个REPL在线编译器, 将ES6代码转换为es5代码后 插入到网页中运行。

ES6标准入门 第一章:简介的更多相关文章

  1. 关于阮大神的es6标准入门第一章

    题记:之前在10月份的时候写过阮大神的es6的第一章,但是由于那段时间项目组的动荡,所以也没有什么后续,导致我现在对es6基本都忘的差不多了,不过,现在换了新公司,最近也没什么任务,所以现在开始重新写 ...

  2. ES6标准入门 第二章:块级作用域 以及 let和const命令

    一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function ...

  3. 读书笔记 - javascript 高级程序设计 - 第一章 简介

      第一章 简介   诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262  一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...

  4. ES6 常用总结——第一章(简介、let、const)

    ES6整理 1. ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准.它的目标,是使得 JavaScript 语言可以用来编写复杂 ...

  5. ES6标准入门 2/26

    第一章 ECMAScript6 简介 1.首先经典开头,ECMAScript跟JavaScript的关系,前者是后者的规格,后者是前者的一种实现.在日常场合中,这两个词是可以互换的. 2.ES6可以泛 ...

  6. MySQL----MySQL数据库入门----第一章 数据库入门

    第一章 数据库入门 1.1 数据库基础知识 1.1.1 数据库概述 数据不仅包括普通意义上的数字,还包括文字.图像.声音等.也就是说,凡是在计算机中用来描述事物的记录都可称作数据. 数据库的基本特点: ...

  7. ES6标准入门读书笔记

    第一章  基础 1.let和const命令 (1).let用于声明变量,所声明的变量只在当前代码块有效 特点:不存在变量提升     所以在变量声明之前就使用会报错 暂时性死区           只 ...

  8. JAVA 入门第一章(语法基础)

    本人初学java 博客分享记录一下自己的学习历程 java我的初步学习分为六章,有c和c++的基础学起来也简便了很多. 第一章 语法基础 第二章 面向对象 第三章 常用工具类 第四章 文件操纵 第五章 ...

  9. ES6标准入门之变量的解构赋值简单解说

    首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...

随机推荐

  1. RSA关于加密长度限制的解决办法

    RSA关于加密长度限制的解决办法   因为rsa采用分块进行加密的,所以有长度限制.如果加密信息较多,可分段加解密(不建议对大量信息rsa加密,效率低效): 正常加密情形如下:      public ...

  2. 【JSP/Servlet】后台如何获取复选框或可选属性的同名参数

    感觉自己jsp/servlet部分学的太差了--今天突然想到还有这种操作,遂分享之 比如有些时候我们需要使用复选框发送同名数据的时候,后台接收参数是个麻烦事,还有可选属性也是如此 有丰富经验的会想到a ...

  3. jquery自定义进度条与h5原生进度条

      介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...

  4. Flexible Box布局基础知识详解

    1.基本概念,借用阮一峰老师的一张图: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫 ...

  5. [知了堂学习笔记]_Jquery_Validate 表单校验的使用

    一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通 ...

  6. 记一些安卓app反编译修改的记录

    2017-12-2209:00:40 好几天没有写过博客了,因为马上要期末考试,只能暂且放下我的小玩物,专心复习我的期末考试. 今天突然想设置一个安卓的栏目,记录下自己从高中就爱玩的一些东西,像刷机呀 ...

  7. sqlserver datetime的bug

    sqlserver datetime 的毫秒的个位似乎存在bug,只有0.3.7这三个值,比如: 2018-01-20 23:59:59:999会变成2018-01-21 00:00:00.000 2 ...

  8. 在Tomcat中配置连接池和数据源

    1.DataSource接口介绍 (1)DataSource 概述 JDBC1.0原来是用DriverManager类来产生一个对数据源的连接.JDBC2.0用一种替代的方法,使用DataSource ...

  9. java常用类--正则表达式

    正则表达式到底是什么? 在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码. 很可能你使用过W ...

  10. linkin大话面向对象--闭包和回调

      先来理解2个概念:闭包和回调   什么是闭包? 闭包是一个可调用的对象,它记录了一些信息,这些信息来自于创建他的作用域.通过这个定义,可以看出内部类是面向对象的闭包,因为他不仅包含了外部类对象的信 ...