ES6学习笔记之变量声明let,const

Posted 2020-08-19

最近用淘宝的weex做了个项目，最近稍微闲下来了。正好很久没有接触RN了，所以趁这个机会系统的学习一下ES6的相关知识。

孔子说：没有对比就没有伤害。所以我们要拿ES6和ES5好好对比的学习。这样才能明白es6是多少的好，积极的拥抱她！

1.let

用let声明的变量，只会在let命令所在的代码块内有效。

let的块状作用域

我们来看一个简单的例子：

‘use strict‘;
{
    let name = ‘cloud‘;
    var age = 21;
}
name;//ReferenceError: name is not defined
age;//21

我们在let声明变量name的代码块之外去访问这个变量，结果name是没有定义的。如果我们希望在能访问到name应该怎么做呢？

‘use strict‘;
{
    let name = ‘cloud‘;
    var age = 21;
    name;//cloud
}

没错，我们在let声明变量的代码块中去访问name变量。结果也正如我们期望的那样，name的值被访问到了。对于高级oo语言而言，他们都是基于块状作用域的。

所以说,let让我们声明的变量也拥有了块状作用域这样一个概念，而不仅仅是函数作用域了。

既然有了块级作用域，那把let用来声明循环里的变量是极好的。

‘use strict‘;
//死循环
for(var i = 0; i < 5; i++){
    console.log(i);
    for(var i = 0; i < 3; i++){
        console.log(i);
    }
}

for(let i = 0; i < 5; i++){
    console.log(i);
    for(let i = 0; i < 3; i++){
        console.log(i);
    }
}

如果没有let的话，上面代码中的内循环每次都会把var声明的变量i重置为0，所以毫无疑问，这是一个死循环。所以我们必须把内循环中变量i换成变量j，或者其他的名称。但是这也会带来一个副作用，就是循环完成以后的i，被泄露成了全局变量。

‘use strict‘;
for(var i = 0; i < 5; i++){
    i;//0,1,2,3,4
}
i;//5
for(let i = 0; i < 5; i++){
    i;//0,1,2,3,4
}
i;//ReferenceError: i is not defined

 

let声明的变量不存在变量声明提升

‘use strict‘;
name; //undefined
age; //ReferenceError: age is not defined
var name = ‘cloud‘;
let age = 21;

用var声明的变量name，虽然我们在name使用后才声明并给其赋值，但是因为变量声明提升的原因，我们看到name已经声明了，只是其值是undefined而已。但是用let声明的age变量，却没有定义。所以说let是不存在变量声明提升的。

let的暂时性死区（temporal dead zone，简称TDZ）

只要是块级作用域中存在let命令，它所在的区域就成为了暂时性死区，使用let命令声明变量之前，该变量都是不可用的。同时该变量不再受到外部的影响。

var name = ‘new cloud‘;
{
    //TDZ start
    name = ‘cloud‘;
    name;//ReferenceError: name is not defined
    let name;
　　 //TDZ end
    name;//undefined  
    let name = ‘cloud‘;
    name;//cloud  
}

如上代码，在let声明name之前,那么这个变量都是不可用的。所以这也带来一个问题，当我们使用typeof这样的反射机制来检测我们的所需的变量是否按照我们设想的那样，typeof不再是一个坚定不移的忠臣了，它也会报错了。

{
    typeof name;//undefined
    var name = ‘cloud‘;
    typeof name;//ReferenceError: name is not defined
    let name = ‘cloud‘;
}

let块状作用域内声明的变量,不允许重复声明。

1.
‘use strict‘;
var name = ‘cloud‘;
var name = ‘new cloud‘;
name;//new cloud

2.
‘use strict‘;
{
    let name = ‘cloud‘;
    var name = ‘new cloud‘;
    name;
    let name = ‘cloud‘;
    var name = ‘new cloud‘;
    name;
    let name = ‘cloud‘;
    let name = ‘new cloud‘;
    name;   
    //SyntaxError: Identifier ‘name‘ has already been declared 
}

第二段代码中的所有声明方式，都会报错。name已经被声明。

‘use strict‘;
function setName(name){
    let name = name;//SyntaxError: Identifier ‘name‘ has already been declared
    {
        let name = ‘new cloud‘;
        console.log(name);//new cloud
    }
    console.log(name);//cloud
}
setName(‘cloud‘);

同样，在函数中重新声明变量也会报错的。

2.const

const是一个只读的常量。一旦声明，就不可更改。

‘use strict‘;
const PI = 3.14;
PI = 3.1415;//TypeError: Assignment to constant variable

如果用const声明了常量，但是并没有去初始化它。那么，也是会报错的。

‘use strict‘;
const PI;//SyntaxError: Missing initializer in const declaration

同样，const的作用域与let命令相同：只在声明所在的块级作用域内有效。const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。const声明的常量，也与let一样不可重复声明。

如果我们用const来声明一个引用类型的话。const只能保证指针域不变，但是并不能保证数据域是不可变更的。

‘use strict‘;
const employee = {};
employee[‘name‘] = ‘cloud‘;
employee[‘age‘] = 21;

employee = {}; //TypeError: "employee " is read-only
employee[‘name‘] = ‘new cloud‘;
console.log(employee.name);//new cloud

如果想把一个对象完成的冻结的话，应该是用Object.freeze()方法。

const employee = Object.freeze({});
employee.name= ‘cloud‘;//TypeError: Can‘t add property prop, object is not extensible