1

ES6 中的let 与 const关键字

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

简介

let和const是es6新增加的两个关键字,主要作用是用来声明变量

let关键字

用法

let 声明的变量只在 let 命令所在的代码块内有效,不能重复声明

{ 
    let a = 0;  
    var b = 1;
    a   //此时输出 0 
    b   //此时输出 1
} 
a   // 此时报错 ReferenceError: a is not defined
b   // 此时输出 1

常用环境

在使用for循环时,适合使用let命令

for (let i = 0; i < 10; i++){
    ...
}
i // 此时报错 ReferenceError: i is not defined

在上述代码中,i只在for循环体之中有效,在循环体之外调用就会报错

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

在上述代码中,变量ivar命令声明的,在全局范围内都有效,所以全局只有一个变量i

每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10。

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

如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 8。

不存在变量提升

let不存在变量提升,var存在变量提升

var命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefinedlet命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

console.log(a); //ReferenceError: a is not defined 
let a = "apple"; 

console.log(b); //undefined 
var b = "banana";

上述代码中,b在脚本开始运行时就存在了,但是还没有进行赋值,所以返回undefineda在变量声明之前不存在,所以会报错。

const关键字

用法

const 声明一个只读变量,声明之后不允许改变

const PI = "3.1415926";
PI  // 此时输出3.1415926

PI = 3;
// TypeError: Assignment to constant variable.

const MY_AGE;  // 此时报错SyntaxError: Missing initializer in const declaration    

const一旦声明必须初始化,否则会报错,只声明不赋值也会报错

暂时性死区(TDZ)

只要代码块中包含let或者const,它所声明的变量就会绑定这个区域,不会再受外部的影响

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  const tmp;
}

暂时性死区的范围

在代码块内,使用let或者const命令声明变量之前,该变量都是不可用的。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

感谢

万能的网络

菜鸟教程

阮一峰的es6语法教程

以及勤劳的自己,个人博客GitHub

微信公众号


归子莫
1k 声望1.2k 粉丝

信息安全工程师,现职前端工程师的全栈开发,三年全栈经验。