一项新技术的出现肯定是为了解决一些问题,那么ES6的出现主要是解决了哪些问题?它的出现给我们带来了什么便利?当它没有出现的时候,某些问题怎么处理?ES6的方法和以前的方法比较又有什么不同呢?根据提出的这些问题,我开始了ES6学习之旅。
ES6是在ES5的基础上对语法进行了修正以及添加了一些新的功能, 具体修正了哪些语法与添加了哪些新的功能,那就开始学习吧。
let
ES6新增加了let命令,用于变量声明,与var的用法类似,不同的是所声明的变量只在let命令所在的代码块内有效。
{ let a = 10; let b = 1; } a // ReferenceError b // 1
以下代码会输出10,因为 i 是var声明的,在全局范围内都有效。所以每一次循环,新的 i 值都会覆盖旧值,导致最后输出的是最后一轮的 i 的值。如果 i 是let声明的,该变量仅在块级作用域内有效,最后输出的会是 6。
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10
我们都知道ES5中的变量会提升到顶部,所以可以先调用后声明,之所以可以是因为是var声明的,而let声明的变量不会提升,所以必须先声明才可以调用。还有,只要let命令存在于块级作用域内,它所声明的变量就"绑定"了这个区域,不再受外部的影响。例如如下代码:
var tmp = 123; if (true) { tmp = ‘abc‘; // ReferenceError let tmp; }
在块级作用域内使用let又声明变量tmp,那么这个变量就不会再受外部变量的影响,而let声明的变量无法提升,所以在没有声明前调用就会出错。
总之,在代码块内,在没有使用let声明变量之前,该变量都是不可用的,这在ES6的语法上称为"暂时性死区","暂时性死区"的出现意味着typeof不再是一个百分之百安全的操作。
typeof x; // ReferenceError let x; typeof y // "undefined"
在没有声明x前,使用typeof检测x的类型就会报错,而检测一个没有被声明的变量反而不会报错。
let还不允许在相同作用域内,重复声明同一个变量,如下情况都会报错:
// 报错 function () { let a = 10; var a = 1; } // 报错 function () { let a = 10; let a = 1; }
所以,在函数内重新声明变量也是会报错的:
function func(arg) { let arg; // 报错 }
在不同的作用域里重新声明变量是可以的:
function func(arg) { { let arg; // 不报错 } }
const
const声明一个只读的常量,一旦声明,常量的值就不能改变,因为无法改变,所以声明变量的时候就需要立即初始化变量,不能留到以后赋值。const的作用域与let命令相同:只在声明所在的块级作用域内有效,而且变量也是无法提升的,也存在"暂时性死区",只能声明后再调用,也不可以重复声明。
对于复杂类型的变量,变量名不指向数据,而是指向数据所在的地址,const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。
const foo = {}; foo.prop = 123; foo.prop // 123 foo = {}; // TypeError: "foo" is read-only
常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。
如果想将对象冻结,可以使用Object.freeze方法,一旦冻结,就无法为其添加新的属性,严格模式下会报错
const foo = Object.freeze({}); // 常规模式时,下面一行不起作用; // 严格模式时,该行会报错 foo.prop = 123;
ES5 只有两种声明变量的方法:var命令和function命令。 ES6 除了添加let和const命令,还有另外两种声明变量的方法:import命令和class命令,以后再学习这两种声明变量的方法。