最近看JavaScript有关es6 let、const关键字的知识分享给大家
前言
Js中var、let、const关键字都是用来声明变量的,但是它们之间是有区别的使用的场景也不一样。
一、let
1. let关键字就是用来声明变量的
let a = 10;
console.log(a);
2. 使用let关键字声明的变量具有块级作用域,在es6之前只有全局作用域和局部作用域。
if (true) {
let b = 20;
console.log(b);
if (true) {
let c = 30;
}
console.log(c);
}
console.log(b);
这里可以看到变量c在外部是访问不到的,最后一个变量b也访问不到,只能在定义变量的大括号中进行访问。
3. 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的。
if (true) {
let a = 100;
var b = 200;
}
console.log(b);
console.log(a);
这里可以看到使用var关键字声明的变量b在外部是可以访问的,而使用let关键字声明的变量a不可以。
4. 防止循环变量变成全局变量
// for (var i = 0; i < 2; i++) {}
// console.log(i);
for (let i = 0; i < 2; i++) {}
console.log(i);
使用var关键字声明变量 i 时这时是全局变量因此在循环外可以访问到,而使用let关键字声明 i 时在外部就访问不到了。
5. 使用let关键字声明的变量没有变量提升
console.log(a);
let a = 100;
可以看到这里会报错警告你不能在变量声明前使用,因为使用let关键字声明的变量没有变量提升。
6. 使用let关键字声明的变量具有暂时性死区特性
var num = 1;
if (true) {
console.log(num);
let num = 2;
}
块级作用域内使用let关键字声明的变量会被整体绑定在这个块级区域不再受外部代码影响,在全局作用域下使用var声明了num,在 if 语句内又使用大括号声明了同名的变量,这里是块级作用域内声明所以不会被外部影响,这种特性就被称为暂时性死区。所以这里在块级作用域内还没声明num就使用会报错。
7. 例子
var arr = [];
for (var i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0]();
arr[1]();
我们看这里的代码,调用函数时函数内部自己的作用域下找不到 i 值,根据作用域链查找规则,要向上一层作用域中查找,函数执行时上一层作用域就是全局作用域,变量 i 在循环时用var关键字创建就是全局变脸 i ,在调用函数时循环早就结束了,所以这里输出的是两个2。
let arr = [];
for (let i = 0; i < 2; i++) {
arr[i] = function () {
console.log(i);
}
}
arr[0]();
arr[1]();
我们再来看把var关键字替换成let关键字后,由于使用let关键字声明的变量具有块级作用域,循环又执行了两次,所以循环结束后产生了两个块级作用域,产生的两个块级作用域中都有自己的变量 i 这两个 i 互不影响。在函数调用时函数内部还是没有变量 i 还是向上一级作用域查找,这里的上一级作用域实际上就是循环产生的作用域,所以数组中的两个函数执行时分别到对应的块级作用域中查找变量 i 的值,所以第一个函数执行时输出的是第一个块级作用域中变量 i 的值就是0 ,第二个就是输出第二个块级作用域中变量 i 的值就是1。
二、const
1. 使用const关键字声明的常量具有块级作用域
if (true) {
const a = 10;
if (true) {
const a = 20;
console.log(a);
}
console.log(a);
}
console.log(a);
这里在 if 语句的外部没有a所以会报错。
2. 声明变量必须赋初始值
const a;
这样会报错说在const声明中缺少初始值,加回初始值后报错消失。
3. 使用const声明的常量值(内存地址)是不能更改的,复杂数据类型内部的值是可以更改的因为不会更改内存地址但是不能重新赋值会更改内存地址。
const a = 3;
a = 4;
const ary = [1, 2];
ary[0] = 3;
// ary = [4, 5];
console.log(ary);
这里可以看到更改常量的值就会更改常量的地址也就会报错,而更改数组内的值可以更改会正常输出,但是如果将注释起来的赋值语句添加上去会立马报错。
总结
以上就是今天要讲的es6 let、const关键字内容。