ECMAScript 6简介

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

ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996年11月，JavaScript 的创造者Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用 JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是可以互换的。

let 和 const 命令

1. let 命令

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

{let a = 10;var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块内有效。

不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有点奇怪的，按照一般逻辑，变量应该在声明语句之前才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

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

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。

暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。

var tmp = 123;if(true) {tmp = 'abc'; // ReferenceErrorlet tmp;
}

上面的代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

ES6明确规定，如果区块内存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if(true){//TDZ开始tmp = 'abc'; // ReferenceErrorconsole.log(tmp); // ReferenceErrorlet tmp; // TDZ结束console.log(tmp); // undefinedtmp = 123;console.log(tmp); // 123
}

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的“死区”。

暂时性死区也意味着typeof不再是一个百分之百安全的操作。

typeof x; // ReferenceError
let x;

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的死区，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

作为比较，如果一个变量根本没有被声明，使用typeof反而不会被报错。

typeof undeclared_variable // undefined

上面代码中，undeclared_variable是一个不存在的一个变量名，结果返回“undefined”。所以，在没有let之前，typeof运算符是绝对安全的，不会报错。现在这一点不成立了，变量一定要在声明之后使用，否则就报错。

不允许重复声明

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

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

因此，不能在函数内部重新声明参数。

function func(arg) {let arg;
}
func() // 报错function func(arg) {{let arg;}
}
func() // 不报错

2. 块级作用域

为什么需要块级作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();function f() {console.log(tmp);if(false) {var tmp = 'nihao shijie';}
}f(); // undefined

if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。但是，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

第二种场景，用来计数的循环变量泄露为全局变量。

var test = 'rzw';for(var i = 0; i < test.length; i++) {console.log(test[i]);
}console.log(i); // 3

变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

ES6的块级作用域

let实际上为JavaScript新增了块级作用域。

function f1() {let n = 5;if(true) {let n = 10;}console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量a，最后输出的值是10。

ES6允许块级作用域的任意嵌套。

{{{{{let variable = 'qhy';}console.log(variable); // 报错
}}}};

上面代码使用了一个五层的块级作用域，每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。

内层作用域可以定义外层作用域的同名变量。

{{{{let x = 'hello';{let x = 'world';}
}}}};

块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE)不再必要。

// IIFE 写法
(function () {var tmp = ...;...
}());//块级作用域写法
{let tmp = ...;
...
}

块级作用域与函数声明

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似let，在块级作用域之外不可引用。

function f() { console.log('outside'); }
(function () {if(false) {// 重复声明一次函数ffunction f() { console.log('inside'); }}f();
}());

以上代码在ES5中运行，会得到"inside"，因为在if声明的函数f会被提升到函数头部，实际运行的代码如下。

// ES5 环境
fucntion f() { console.log('outside'); }(function () {function f() { console.log('inside'); }if(false) {}f();
}());

ES6 就完全不一样，理论上会得到"outside"。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果真的在ES6浏览器中运行这段代码，是会报错的。

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

允许在块级作用域内声明函数。
函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。上面的例子实际运行的代码如下。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {var f = undefined;if (false) {function f() { console.log('I am inside!'); }}f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 块级作用域内部的函数声明语句，建议不要使用
{let a = 'secret';function f() {return a;}
}// 块级作用域内部，优先使用函数表达式
{let a = 'secret';let f = function () {return a;};
}

另外，还有一个需要注意的地方。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

// 第一种写法，报错
if (true) let x = 1;// 第二种写法，不报错
if (true) {let x = 1;
}

上面代码中，第一种写法没有大括号，所以不存在块级作用域，而let只能出现在当前作用域的顶层，所以报错。第二种写法有大括号，所以块级作用域成立。

函数声明也是如此，严格模式下，函数只能声明在当前作用域的顶层。

// 不报错
'use strict';
if (true) {function f() {}
}// 报错
'use strict';
if (true)function f() {}

3. const 命令

基本用法

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

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

上面代码表明改变常量的值会报错。

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

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

上面代码表示，对于const来说，只声明不赋值，就会报错。

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

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

const命令声明的常量也是不提升，同时存在暂时性死区，只能在声明的位置后面使用。

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

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

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

ES6 声明变量的六种方法

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面还会提到，另外两种声明变量的方法：import命令和class命令。

前端自学笔记（五）ES6 - (1)相关推荐

前端学习笔记之 ES6之Module模块与Babel编译（十三）
文章目录 Module 初识Module Module的基本用法 Module的导入和导出 export default export Module的注意事项 Module的应用总结 Babel和W ...
前端自学笔记_json
本篇博客基于对MDN文档上关于json的学习和总结,侵删描述: 首先先来简单地认识一下json这门语言.json是一种轻量级的语言,而且是浏览器原生支持的,无需额外安装.其全名为"Java ...
Photoshopcs6 自学笔记五字体渐变效果
字体渐变效果快捷键输入完字符后 ctrl+enter键退出输入. 要渐变的字体选中字体 + Ctrl + 鼠标点击图层或者Ctrl+选中图层中带T的地方栅格化文字如果不删格化文字,发现无 ...
【Spring Data JPA自学笔记五】一对多、多对多和级联
文章目录数据库表的关系一对多多对多 Spring Data JPA实现一对多基本配置实现一对多放弃维护权 Spring Data JPA实现多对多基本配置实现多对多级联之前的所有操 ...
前端学习笔记(五)-JavaScript语法基本概念
基本概念语法对大小写敏感采用驼峰命名风格使用C风格的注释 //单行注释 /** 多行注释**/ 复制代码严格模式,一种不同的解析与执行模型启动方式:在顶部添加代码"use str ...
深入理解input中的value、name、id的区别和用法——Web前端自学笔记
value:指该控件显示出来的值,是面向用户的.如<input type="button" value="123">这条语句运行出来时,button ...
前端自学学习笔记——ES5、ES6
前端自学学习笔记--ES5.ES6 文章目录前端自学学习笔记--ES5.ES6 1.面向过程与面向对象 1.1面向过程 1.2面向对象 1.3面向过程与面向对象对比 2.对象与类 2.1对象 2.1 ...
前端自学HTML笔记之二【超链接】
我已加入 1_bit 博主的免费前端站起来学习计划,专栏链接:https://blog.csdn.net/a757291228/category_11609526.html 前端自学HTML笔记二 ...
深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性 display flex-flow justify-content align-items order flex align-self 总结弹性 ...

前端自学笔记（五）ES6 - (1)