《ES6标准入门》--读书笔记

第一章 ECMAScript 6简介

• Node是JavaScript语言的服务器运行环境。

• Babel转码器

  Babel是个广为使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。

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

  Babel将其转为普通函数，这样就能在不支持箭头函数的JavaScript环境中执行了。

  我们来试验一下是不是这样的：

  • 安装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进行转码。

  npm install --save-dev babel-register
  

  使用时，必须首先加载babel-register

  require('babel-register');
  require('./index.js');
  

  这样就不需要手动对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方法。