第一章 ECMAScript 6简介
- Node是JavaScript语言的服务器运行环境。
-
Babel转码器
Babel是个广为使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。
Babel将其转为普通函数,这样就能在不支持箭头函数的JavaScript环境中执行了。// 转码前 input.map(item => item + 1) // 转码后 input.map(function (item) { return item + 1; })
我们来试验一下是不是这样的:
- 安装Babel提供的babel-cli工具。
npm install --global babel-cli
- 随便在一个磁盘创建一个空文件夹
babelTest
- 在
babelTest
创建aaa.js
文件
input.map(item => item + 1)
// es2015转码规则 npm install --save-dev babel-preset-es2015 // 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
- 在
babelTest
创建.babelrc
文件
{ "presets": [ "es2015", "react", "stage-0" ], "plugins": [] }
- 执行转码命令
babel aaa.js
在我们平时的项目中,执行F:\babelTest>babel aaa.js "use strict"; input.map(function (item) { return item + 1; });
npm run build
命令就会进行转码 -
babel-node
babel-cli 工具自带一个babel-node命令,提供一个支持ES6的REPL环境(Read-eval-print-loop:交互式解析器)。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。F:\babelTest>babel-node > (x => x * 2)(3) 6 >
-
babel-register
babel-register 模块改写了require命令,为它加上一个钩子。此后,每当使用require加载后缀为.js .jsx .es .es6
的文件时,就会先用Babel进行转码。
使用时,必须首先加载babel-registernpm install --save-dev babel-register
这样就不需要手动对index.js进行转码了。require('babel-register'); require('./index.js');
注意:babel-register只会对require命令加载和文件进行转码,而不会对当前文件进行转码。另外,由于它是实时转码,所有只适合在开发环境中使用。
babel-core
let和const命令
let命令
1. 基本用法
- let声明的变量只在其所在的代码块内有效。
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i)
};
}
a[6](); // 10
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i)
};
}
a[6](); // 6
- for循环的特别之处
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i)
};
// 此处会输出3次abc,因为设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
2. let不存在变量提升
var
可以在声明之前使用,而let
一定要在声明后使用
console.log(foo);
var foo; // 成功运行并输出undefined
console.log(bar);
let bar; // 运行时报错 Uncaught ReferenceError: Cannot access 'bar' before initialization
3. 暂时性死区
只要块级作用域内存在let命令,它所声明的变量就绑定这个区域,不再受外部的影响。
var temp = 123;
if(true){
temp = 'abc';
let temp; // Uncaught ReferenceError: Cannot access 'temp' before initialization
}
es6明确规定,如果区块中存在let
和const
命令,则这个区块对这些命令声明的变量从一开始就形成封闭作用域。只要在声明之前就使用这些变量,就会报错。
所以typeof
运算符不再是个百分之百安全的操作。这也是为了让大家养成良好的变成习惯。
typeof x;
let x;
4. 不允许重复声明
块级作用域
1. 为什么需要块级作用域
var temp = new Date();
function f() {
console.log(temp);
var temp = 'hello world';
}
f(); // 输出undefined
为什么输出结果是undefined呢,原因在于变量提升导致内层的temp变量覆盖了外层的temp变量。块级作用域的出现,使得获得广泛应用的立即执行匿名函数(IIFE)不再必要了。
1. const 命令
基本用法
const 声明一个只读的变量。一旦声明,常量的值就不能改变。所以const 一旦声明常量,就必须立即初始化。
const 的作用域与let命令相同:只在声明所在的块级作用域内有效。
2. 本质
const 实际上保证的并不是变量的值不得改动,而是指向的那个内存地址不得改动。
如果const 声明的变量是复合类型的数据(主要是对象和数组),可以添加、修改等属性的值,对象本身是可变的,但不能重新指向另外一个对象。
{
const foo = {};
foo.aa = 123;
foo.prop = 789;
foo.aa;
}
{
const a = [];
a.push('Hello');
a.length = 0;
a;
}
如果想将对象冻结,应该使用Object.freeze方法。