《ECMAScript 6 入门》笔记1

By admin in 4858美高梅 on 2019年3月27日

ECMAScript 6简介

ECMAScript 6简介

ECMAScript 6.0(以下简称 ES6)是 JavaScript
语言的后进标准,已经在二〇一五年1月标准公布了。它的指标,是驱动
JavaScript 语言能够用来编排复杂的重型应用程序,成为集团级开发语言

一、简介

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的子弟标准,已经在
2014 年 6 月正式发布了。它的指标,是驱动 JavaScript
语言能够用来编排复杂的特大型应用程序,成为集团级开发语言。

2011年 ECMAScript 5.1版发布
2014年5月颁发 《ECMAScript 2014标准》(简称 ES2016) ES6 的率先个版本
二〇一六年十二月发表 小幅度修订的《ECMAScript 2014规范》(简称
ES二〇一五),那几个版本可以作为是 ES6.1
版,因为两岸的歧异一点都十分小(只新增了数组实例的includes方法和指数运算符)
2017年6月发布 ES2017 标准
ES6 既是2个历史名词,也是三个泛指,含义是5.1版之后的 JavaScript
的新一代标准,涵盖了ES201五 、ES201六 、ES2017等等,而ES2014则是专业名称,特指该年发表的科班版本的语言专业。本书中涉嫌 ES6
的地点,一般是指 ES二零一六 标准,但偶尔也是泛指“下一代 JavaScript 语言”。

4858美高梅 ,2011年 ECMAScript 5.1版发布
二〇一六年一月公布 《ECMAScript 二〇一五正经》(简称 ES二零一四) ES6 的第二个版本
二零一五年10月颁发 小幅度修订的《ECMAScript 2015正规》(简称
ES二〇一五),这么些本子能够看成是 ES6.1
版,因为双方的差距相当小(只新增了数组实例的includes方法和指数运算符)
2017年6月发布 ES2017 标准
ES6 既是四个历史名词,也是一个泛指,含义是5.1版之后的 JavaScript
的后进标准,涵盖了ES201⑤ 、ES201⑥ 、ES2017之类,而ES二零一五则是规范名称,特指该年发表的正规化版本的言语专业。本书中提到 ES6
的地点,一般是指 ES二零一五 标准,但有时也是泛指“下一代 JavaScript 语言”。

ECMAScript 和 JavaScript 的关系

前端是后者的准绳,后者是前者的一种完毕(其余的 ECMAScript 方言还有
Jscript 和 ActionScript)。日常场面,那多个词是能够沟通的

ECMAScript 标准怎么不叫 JavaScript 标准?
一是商标,Java 是 Sun 集团的商标,依据授权协议,唯有 Netscape
公司能够合法地应用 JavaScript 那一个名字,且 JavaScript 本人也一度被
Netscape 公司登记为商标。
二是想显示那门语言的制定者是 ECMA,不是
Netscape,那样便于确定保障那门语言的开放性和中立性。

一 、ECMAScript 和 JavaScript 到底是什么关联?

JavaScript :所属集团为:Netscape 

ECMAScript:所属集团为:ECMA 

ECMAScript 和 JavaScript
的关系是,前者是后者的条件,后者是前者的一种实现(其它的 ECMAScript
方言还有 Jscript 和 ActionScript)。平常地方,这四个词是足以调换的。

 

 

ES6 与 ECMAScript 2015 的关系

ES6 这几个词的本心,就是指 JavaScript 语言的下三个本子。ES6
既是多个历史名词,也是一个泛指,含义是5.1版之后的 JavaScript
的后进标准,涵盖了ES201伍 、ES201陆 、ES2017等等,而ES二〇一五则是行业内部名称,特指该年发布的正统版本的语言专业。

2、ES6 与 ECMAScript 2015 的关系

ES6 既是贰个历史名词,也是二个泛指,含义是 5.1 版现在的 JavaScript
的新一代标准,涵盖了 ES201伍 、ES201⑥ 、ES2017 等等
,而 ES二零一四则是正经名称,特指该年发表的规范版本的语言专业

本书中提到 ES6 的地方,一般是指 ES二〇一五 标准,但偶尔也是泛指“下一代
JavaScript 语言”。

各大浏览器的最新版本,对 ES6
的协助能够查阅kangax.github.io/es5-compat-table/es6/

各大浏览器的摩登版本,对 ES6
的支撑可以查阅kangax.github.io/es5-compat-table/es6/

语法提案的批准流程

任什么人都得以向标准委员会(又称 TC39
委员会)提案,要求修改语言专业。当前的具备提案,能够在 TC39
的官方网站查看

  • 一种新的语法从提案到成为正规标准,需求阅历八个阶段
    • 《ECMAScript 6 入门》笔记1。Stage 0 – Strawman(体现阶段)
    • Stage 1 – Proposal(征求意见阶段)
    • Stage 2 – Draft(草案阶段)
    • Stage 3 – Candidate(候选人阶段)
    • Stage 4 – Finished(定案阶段)

3、ECMAScript 的历史

ES6 从开始制订到结尾公布,整整用了 15 年。

前方提到,ECMAScript 1.0 是 1996 年发布的,接下去的两年,一连公布了
ECMAScript 2.0(1996 年 6 月)和 ECMAScript 3.0(一九九九 年 12 月)。3.0
版是二个光辉的打响,在产业界获得周边帮忙,成为交通标准,奠定了 JavaScript
语言的中坚语法,以往的本子完全继承。

截止今日,初学者一起始攻读 JavaScript,其实便是在学 3.0 版的语法。

Node 是 JavaScript 的服务器运维条件(runtime)。

Node 是 JavaScript 的服务器运转条件(runtime)。

ECMAScript 的历史

④ 、陈设进程

各大浏览器的时尚版本,对 ES6 的扶助度已经越来越高了,超过 十分九的 ES6
语法本性都完毕了。

Node 是 JavaScript 的服务器运营条件(runtime)。它对 ES6
的支撑度更高。除了那一个暗中同意打开的作用,还有一对语法效用已经落到实处了,不过私下认可没有打开。使用上边包车型地铁一声令下,能够查看
Node 已经落到实处的 ES6 天性。

$ node–v8-options|grep harmony

上边命令的出口结果,会因为版本的例外而有所不一样。

运作下边包车型客车下令,能够查阅你正在使用的 Node 环境对 ES6 的扶助程度。

$ npm install-g es-checker$ es-checker

=========================================

Passes24feature Dectations

Your runtime supports  57%of ECMAScript6

=========================================

使用上面包车型客车授命,能够查看 Node 已经落实的 ES6 天性。

选用下边包车型客车命令,能够查阅 Node 已经实现的 ES6 性子。

安顿进程

各大浏览器的风尚版本,对 ES6
的援助景况

// 查看 Node 已经实现的 ES6 特性。
node --v8-options | grep harmony

访问 ruanyf.github.io/es-checker,能够看到您的浏览器援助 ES6 的水平

// 安装阮一峰老师插件 ES-Checker
npm install -g es-checker
es-checker

=========================================
Passes 24 feature Dectations
Your runtime supports 57% of ECMAScript 6
=========================================

5、Babel 转码器

Babel 是一个普遍使用的
ES6 转码器,能够将 ES6 代码转为 ES5
代码,从而在现有条件进行。那表示,你能够用 ES6
的方法编写程序,又毫不担心现有条件是不是帮忙。下边是二个例子。

5.1 配置文件转码:Babel 的布局文件是.babelrc,

5.2 命令行转码babel-cli:Babel 提供babel-cli工具,用于命令行转码。

5.3 在线转换 :Babel 提供二个REPL
在线编写翻译器,能够在线将
ES6 代码转为 ES5 代码。转换后的代码,能够间接当做 ES5 代码插入网页运营。

5.4 Traceur 转码器:Google
公司的Traceur转码器,也能够将
ES6 代码转为 ES5 代码。

 

 

Babel 转码器

Babel 是3个大规模应用的 ES6 转码器,能够将 ES6 代码转为 ES5
代码,从而在存活条件进行

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

二、let 和 const 命令

$ node --v8-options | grep harmony
$ node --v8-options | grep harmony

配备文件.babelrc

Babel 的安插文件是.babelrc,存放在项指标根目录下

{
 // presets字段设定转码规则
  "presets": [],
  "plugins": []
}

// 官方提供以下的规则集,你可以根据需要安装
// 最新转码规则
npm install --save-dev babel-preset-latest

// react 转码规则
npm install --save-dev babel-preset-react

// 不同阶段语法提案的转码规则(共有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。所有 Babel工具和模块的使用,都必须先写好.babelrc
 {
    "presets": [
      "latest",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

1、let 命令

基本用法

ES6
新增了let命令,用来声称变量。用法类似于var,但是所注明的变量,只在let命令所在的代码块内有效。

  

  

指令行转码babel-cli

Babel提供babel-cli工具,用于命令行转码。

$ npm install --global babel-cli

// 基本用法如下。全局环境下,进行 Babel 转码
// 转码结果输出到标准输出
babel example.js

// 转码结果写入一个文件
// --out-file 或 -o 参数指定输出文件
babel example.js --out-file compiled.js
// 或者
babel example.js -o compiled.js

// 整个目录转码
// --out-dir 或 -d 参数指定输出目录
 babel src --out-dir lib
// 或者
 babel src -d lib

// -s 参数生成source map文件
 babel src -d lib -s

不等类型选用区别版本的 Babel 化解办法?

// 1. 将babel-cli安装在项目之中
npm install --save-dev babel-cli
// 2. 改写package.json
{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}
// 3. 转码命令
npm run build

2、块级功能域

 

 

babel-node

babel-cli工具自带贰个babel-node命令,提供2个支撑ES6的REPL环境(Read-伊娃l-Print-Loop
REPL 读取-执行-输出循环)

// 不用单独安装,而是随babel-cli一起安装
babel-node
> (x => x * 2)(1)
2
// 可以直接运行ES6脚本
babel-node es6.js
// babel-node也可以安装在项目中
npm install --save-dev babel-cli
// 改写 package.json
{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}

3、const 命令

Babel 普通话网 · Babel:下一代 JavaScript 语法的编写翻译器

Babel 提供二个REPL在线编写翻译器,能够在线将 ES6
代码转为 ES5 代码。

Babel 转码器  将ES6 代码转为 ES5
代码,从而在存活条件实行。那象征,你能够用 ES6
的法门编写程序,又毫无操心现有条件是还是不是协理。

babel-cli 命令行转码
babel-node命令
babel-cli工具自带,提供三个匡助ES6的REPL(交互式解释器)环境。它援救Node的REPL环境的富有机能,而且能够直接运营ES6代码。

babel-register模块改写require命令,为它助长贰个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的公文,就会先用Babel举办转码。
babel-core模块 调用 Babel 的 API 举行转码
babel-polyfill,转码的 API,
Babel暗许只转换新的JavaScript句法(syntax),而不转换新的API

 

Traceur谷歌公司的转码器,也足以将
ES6 代码转为 ES5 代码。

 

 

Babel 汉语网 · Babel:下一代 JavaScript 语法的编写翻译器

Babel 提供3个REPL在线编写翻译器,能够在线将 ES6
代码转为 ES5 代码。

贝布el 转码器  将ES6 代码转为 ES5
代码,从而在现有条件实行。那意味着,你能够用 ES6
的情势编写程序,又不用顾虑现有条件是还是不是帮衬。

babel-cli 命令行转码
babel-node命令
babel-cli工具自带,提供贰个支撑ES6的REPL(交互式解释器)环境。它辅助Node的REPL环境的具备效能,而且能够一贯运维ES6代码。

babel-register模块改写require命令,为它助长1个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel举行转码。
babel-core模块 调用 Babel 的 API 进行转码
babel-polyfill,转码的 API,
Babel私下认可只转换新的JavaScript句法(syntax),而不转移新的API

 

Traceur谷歌企业的转码器,也得以将
ES6 代码转为 ES5 代码。

 

 

babel-register

babel-register模块改写require命令,为它助长贰个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的公文,就会先用Babel进行转码

npm install --save-dev babel-register
// 使用时,必须首先加载babel-register。然后,就不需要手动对index.js转码
require("babel-register");
require("./index.js");

babel-register只会对require命令加载的公文转码,而不会对当前文件转码。其余,由于它是实时转码,所以只适合在支付条件使用

4、顶层对象的习性

babel-core

一点代码须求调用 Babel 的 API 进行转码,就要动用babel-core模块

// 安装命令
npm install babel-core --save
// 调用
var babel = require('babel-core');
// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }
// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
  result; // => { code, map, ast }
});
// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }
// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
// 配置对象options http://babeljs.io/docs/usage/options/

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

5、global 对象

babel-polyfill

Babel 默许只转换新的 JavaScript 句法(syntax),而不转换新的 API。转换
API 必须运用babel-polyfill

npm install --save babel-polyfill
// 脚本头部加入
import 'babel-polyfill';
// 或者
require('babel-polyfill');

Babel 暗中认可不转码的 API
非凡多,查看

浏览器环境

Babel 也足以用于浏览器环境。可是,从 Babel 6.0
开头,不再间接提供浏览器版本,而是要用创设筑工程具塑造出来。假诺你未曾或不想利用创设筑工程具,能够行使babel-standalone模块提供的浏览器版本,将其插入网页

// 注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

怎么将代码打包成浏览器能够应用的脚本?

// 以 Babel 配合 Browserify 为例。首先,安装 babelify 模块
npm install --save-dev babelify babel-preset-latest
// 然后,再用命令行转换 ES6 脚本。将 ES6 脚本 script.js,转为 bundle.js,浏览器直接加载后者就可以了
browserify script.js -o bundle.js \
  -t [ babelify --presets [ latest ] ]
// 在package.json设置下面的代码,就不用每次命令行都输入参数了
{
  "browserify": {
    "transform": [["babelify", { "presets": ["latest"] }]]
  }
}

在线转换

Babel
提供贰个REPL在线编写翻译器,能够在线将
ES6 代码转为 ES5 代码。转换后的代码,能够直接当做 ES5 代码插入网页运维

与任何工具的匹配

成都百货上千工具须要 Babel 进行停放转码,那里举三个例子:ESLint 和 Mocha

// 1. ESLint 用于静态检查代码的语法和风格,安装命令如下
npm install --save-dev eslint babel-eslint

// 2. 在项目根目录下,新建一个配置文件.eslintrc,在其中加入parser字段
{
  "parser": "babel-eslint",
  "rules": {
    ...
  }
}

// 3. 在package.json之中,加入相应的scripts脚本
{
    "name": "my-module",
    "scripts": {
      "lint": "eslint my-files.js"
    },
    "devDependencies": {
      "babel-eslint": "...",
      "eslint": "..."
    }
  }

// Mocha 则是一个测试框架,如果需要执行使用 ES6 语法的测试脚本,可以修改 package.json 的 scripts.test
//命令中,--compilers 参数指定脚本的转码器,规定后缀名为 js 的文件,都需要使用 babel-core/register 先转码
"scripts": {
  "test": "mocha --ui qunit --compilers js:babel-core/register"
}

Traceur 转码器

Google
公司的Traceur转码器,也足以将
ES6 代码转为 ES5 代码。

直接插入网页

Traceur 允许将 ES6 代码直接插入网页。首先,必须在网页底部加载 Traceur
库文件

// 加载 Traceur 的库文件
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
// 第二个和第三个是将这个库文件用于浏览器环境
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
// 加载用户脚本 type 属性的值是 module
<script type="module">
  import './Greeter.js';
</script>

// 编译器会自动将所有type=module的代码编译为 ES5,然后再交给浏览器执行。可在网页中放置 ES6 代码
<script type="module">
  class Calc {
    constructor() {
      console.log('Calc constructor');
    }
    add(a, b) {
      return a + b;
    }
  }
  var c = new Calc();
  console.log(c.add(4,5));
</script>

// 对 Traceur 的行为有精确控制,采用下面参数配置
<script>
  // Create the System object
  window.System = new traceur.runtime.BrowserTraceurLoader();
  // Set some experimental options
  var metadata = {
    traceurOptions: {
      experimental: true,
      properTailCalls: true,
      symbols: true,
      arrayComprehension: true,
      asyncFunctions: true,
      asyncGenerators: exponentiation,
      forOn: true,
      generatorComprehension: true
    }
  };
  // Load your module
  System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
    console.error('Import failed', ex.stack || ex);
  });
</script>

首先生成 Traceur 的全局对象 window.System,然后 System.import
方法能够用来加载 ES6。加载的时候,须要传入八个安插对象
metadata,该对象的 traceurOptions 属性能够布置帮助 ES6 功效。假若设为
experimental: true,就表示除了 ES6 以外,还接济部分实验性的新效率

在线转换

Traceur
也提供二个在线编写翻译器

命令行转换

// 作为命令行工具使用时,Traceur 是一个 Node 的模块,首先需要用 Npm 安装
npm install -g traceur

// 运行 ES6 脚本文件,会在标准输出显示运行结果
$ traceur calc.js
Calc constructor
9

// 将 ES6 脚本转为 ES5 保存
// --script选项表示指定输入文件,--out选项表示指定输出文件
traceur --script calc.es6.js --out calc.es5.js

// 为了防止有些特性编译不成功,最好加上--experimental选项
$ traceur --script calc.es6.js --out calc.es5.js --experimental

Node 环境的用法

var traceur = require('traceur');
var fs = require('fs');

// 将 ES6 脚本转为字符串
var contents = fs.readFileSync('es6-file.js').toString();

var result = traceur.compile(contents, {
  filename: 'es6-file.js',
  sourceMap: true,
  // 其他设置
  modules: 'commonjs'
});

if (result.error)
  throw result.error;

// result 对象的 js 属性就是转换后的 ES5 代码
fs.writeFileSync('out.js', result.js);
// sourceMap 属性对应 map 文件
fs.writeFileSync('out.js.map', result.sourceMap);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有