let和const

Posted 2021-02-07 xlj-code

一、let命令

 

1、块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域，因此会出现下面这样的问题:

for(var i = 0; i < 10; i ++){

}
console.log(i);

代码块内声明的变量，代码块外一样可以访问。这种情况很多时候是不合理的。

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

进行 10 次循环，第一次全局声明变量 i，之后每次更新 i 的值，数组 arr 保存着 10 个函数，每个函数等到运行时访问全局变量 i ，当然每次调用函数都是输出 10。这个问题下面的介绍就能解决。

 

2、基本使用

ES6新增了 let 命令，和 var 一样，也是用来声明变量的。但它所声明的变量，只在代码块内有效。

for(let i = 0; i < 10; i ++){

}
console.log(i);   // error


if(true){
    let a = 10;
}
console.log(a);   // error

 

3、不存在变量提升

ES5中使用 var 是会发生变量提升的:

console.log(i);
var i = 0;   // undefined

// 等同于

var i;
console.log(i);
i = 0;

ES6中使用 let 不会:

console.log(i);   // error
let i = 10;

 

4、暂时性死区

代码块内的变量不论是ES5还是ES6都可以往上查找值的:

var a = 10;
if(true){
    console.log(a);   // 10
}

let a = 10;
if(true){
    console.log(a);   // 10
}

但是只要块级作用域内使用了 let 命令，它所声明的变量，就绑定了这个区域，不再受外部的影响，下面这种情况会报错:

let a = 10;
if(true){
    console.log(a);   // error
    let a;
}

因为let命令没有变量提升,所以你在变量声明之前使用该变量就是不行，不管你代码块外部做了什么操作，所以如果你决定使用ES6语法规则，还是老老实实先定义后使用吧。

 

5、不允许在同一个作用域内重复声明变量

ES5中重复声明变量是没有问题的:

var a = 10;
var a = 20;
console.log(a);   // 20

ES6很较真，你敢这样做，我就敢报错:

let a = 10;
let a = 20;   // error

别忘了，ES6是有块级作用域的，所以下面这样还是完全可以的:

let a = 10;
if(true){
    let a = 20;
    console.log(a);
}
console.log(a);
// 20
// 10

现在解决上面那个问题，就很简单了:

let arr = [];
for(let i = 0; i < 10; i ++){
    arr[i] = () => {
        console.log(i);
    }
}
arr[3]();   // 3

 

二、const命令

 

 1、基本使用

ES6中声明一个只读的变量是用 const，它与 let 大部分都相同:

• 不允许重复声明
• 拥有块级作用域
• 声明的常量不会变量提升
• 存在暂时性死区

但有俩点不同。

1、一旦声明，就要初始化(按照规定，常量最好使用大写):

const A;   // error

所以还是声明就立即赋值吧:

const A = 10;

2、第二点不同就是，不可后面更改它的值:

const A = 10;
A = 20;   // error

 

注意:

由于在 js 中，一个变量保存着一个复合类型（Array、Object、Function）的数据，仅仅保存的是该数据的地址，所以只要地址不换，就不会报错:

const MYARRAY = [‘apple‘, ‘banana‘];
MYARRAY.push(‘orange‘);
console.log(MYARRAY);   // [ "apple", "banana", "orange" ]

const MYOBJECT =  {
    username: ‘tom‘
};
MYOBJECT.age = 24;
console.log(MYOBJECT);   // { username: "tom", age: 24 }

只有把地址都换了，才报错:

const MYOBJECT = {
    username: ‘tom‘
};
MYOBJECT = {   // error
    username: ‘tom‘,
    age: 24
};