let和const

Posted xlj-code

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了let和const相关的知识,希望对你有一定的参考价值。

一、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 中,一个变量保存着一个复合类型(ArrayObjectFunction)的数据,仅仅保存的是该数据的地址,所以只要地址不换,就不会报错:

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
};

 

 


以上是关于let和const的主要内容,如果未能解决你的问题,请参考以下文章

1.let 和 const 命令

如何用“let”和“const”替换此代码中的“var”关键字?

let and const

let and const

let 和 const 命令

let和const命令