ECMAScript6新特性(一)-全面详解（学习总结---从入门到深化）-CFANZ编程社区

命令行工具

在正式讲解ES6新特性之前，我们需要了解一些命令行工具，在日后的课程中，我们会经常用到命令行

实时效果反馈

1. 如何快速打开 CMD 命令行工具：

A win+R

B win+E

C win+P

D win+L

2. CMD 命令行中进入文件夹或目录：

A win+R

B mkdir 文件夹名称

C cd ../

D cd 文件夹名称

ECMAScript 6 简介

ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现，常场合，这两个词是可以互换的。

名称详解

ECMAScript 6（以下简称 ES6）是 JavaScript 语言的标准，在 2015 年 6 月发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等

语法提案的批准流程

任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

一个提案只要能进入 Stage 2，就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案，可以在 TC39 的官方网站 GitHub.com/tc39/ecma262查看。

Babel转码器

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持

浏览器支持性查看 https://caniuse.com/

转码示例

原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了

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

Babel安装流程

第一步：安装 Babel

npm install --save-dev @babel/core

第二步：配置文件 .babelrc

Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下

{
  "presets": [],
  "plugins": []
}

第三步：转码规则

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装

npm install --save-dev @babel/preset-env

第四步：将规则加入 .babelrc

{
    "presets": [
      "@babel/env"
   ],
    "plugins": []
}

Babel命令行转码

Babel 提供命令行工具 @babel/cli ，用于命令行转码

npm install --save-dev @babel/cli

基本用法如下

# 转码结果输出到标准输出
$ npx babel example.js

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

# 或者
$ npx babel example.js -o compiled.js

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

# 或者
$ npx babel src -d lib

实时效果反馈

1. Babel的作用是什么：

A Babel是ES6的一部分，是ES6的新特性

B Babel是ES6的转码器，可以将 ES6 代码转为 ES5 代码

C Babel是配置文件，配置ES6环境

D Babel是ES5的基础知识

2. 下列哪个是安装Babel命令转码工具：

A npm install --save-dev @babel/core

B npm install --save-dev @babel/preset-env

C npm install --save-dev @babel/cli

D npx babel example.js

Let 命令

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

let块级作用域

{
  let itxiaotong = 10;
  var sxt = 1;
}
itxiaotong // ReferenceError: itxiaotong is not
defined.
sxt // 1

for 循环的计数器，就很合适使用 let 命令

for (let i = 0; i < 10; i++) {
  // ...
}
console.log(i);
// ReferenceError: i is not defined

对比 var 和 let 在循环中的应用

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
 };
}
a[6](); // 10

上面代码，输出的 10 ,而我们期待的是 6

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
 };
}
a[6](); // 6

上面代码，输出的 6

let不存在变量提升

var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined 。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用为了纠正这种现象， let 命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

let不允许重复声明

let 不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}
// 报错
function func() {
  let a = 10;
  let a = 1;
}

实时效果反馈

1. 下列那个不是Let的特性：

A Let是块级作用域

B Let不存在变量提升

C Let不允许重复声明

D Let和Var一样并没有区别

Let命令应用场景

let 明显更加方便和更好理解

for(var i = 0;i<lis.length;i++){
   (function(i){
        lis[i].onmouseenter = function(){
            for(var j = 0;j<lis.length;j++){
              lis[j].removeAttribute("class");
              divs[j].removeAttribute("class")
           }
          lis[i].setAttribute("class","select")
          divs[i].setAttribute("class","div-select")
       }
   }(i))
}

改之后

for(let i = 0;i<lis.length;i++){
    lis[i].onmouseenter = function(){
        for(var j = 0;j<lis.length;j++){
            lis[j].removeAttribute("class");
            divs[j].removeAttribute("class")
       }
        lis[i].setAttribute("class","select")
        divs[i].setAttribute("class","div-select")
   }
}

Const 命令

const 声明一个只读的常量。一旦声明，常量的值就不能改变

const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.

const 声明的变量不得改变值，这意味着， const 一旦声明变量，就必须立即初始化，不能留到以后赋值

const foo;
// SyntaxError: Missing initializer in const declaration

const 的作用域与let命令相同：只在声明所在的块级作用域内有效

if (true) {
  const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

const 命令声明的常量也是不提升

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

const 声明的常量，也与 let 一样不可重复声明

var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

实时效果反馈

1. 下列 const 特性描述错误的是：

A const 命令声明的常量不提升

B const 命令不可重复声明

C const 命令是块级作用域

D const 命令声明可以改变