ES6新语法(let和const)

        在ES5中,我们通常用var声明变量,但是在JavaScript中用’var'来声明变量会出现变量提升的情况,即通过"var"声明的变量,系统都会把声明隐式的升至顶部,这样的特性往往会让刚接触JavaScript及习惯其他语言的开发人员不适应,导致程序出现问题。所以ES6就给我们新增了两种新的声明格式,用于补全ES5标准中var声明变量的不足:即letconst。就来具体看一下:

一、let

(1)let声明的变量只在所处于的块级有效。

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

打印结果为:
在这里插入图片描述
注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。
(2)let声明的变量不存在变量提升。

console.log(a);  
 let a = 20;

打印结果为:
在这里插入图片描述

二、const

作用:声明常量,常量就是值(内存地址)不能变化的量。
(1)具有块级作用域。

if (true) { 
    const a = 10;
 }
 console.log(a) // a is not defined

打印结果为:
在这里插入图片描述
(2)声明常量时必须赋值。

const PI; // Missing initializer in const declaration

打印结果为:
在这里插入图片描述
(3)常量赋值后,值不能修改。

const ary = [100, 200];
 ary[0] = 'a';
 ary[1] = 'b';
 console.log(ary); // ['a', 'b']; 
 ary = ['a', 'b']; // Assignment to constant variable.

在这里插入图片描述

三、临时死区

let和const都是块级标识符,所以let和const都是在当前代码块内有效,常量不存在变量提升的情况。但是通过let和const声明的常量,会放在临时死区(temporal dead zone),如下:

 {
     console.log(typeof a);
     let a = 10
 }

打印结果为:
在这里插入图片描述

即使通过安全的typeof操作符也会报错,原因是JavaScript引擎在扫描代码变量时,要么会把变量提升至顶部,要么会把变量放在临时死区。这里通过let声明的’a'变量会被放在临时死区,所以在声明之前打印就会报错。

四、循环中let和const的使用

(1)在ES5标准中,for循环中的循环变量都是通过var来声明的,由于var没有独立的作用域,导致在循环中创建函数时会出现结果和思路不一致的情况,如下:

 let funArr = []; //该数组中存放的是函数
 for(var i=0;i<5;i++) {
     funArr.push(function(){
         console.log(i)
     })
 }
 funArr.forEach(item=> {
     item()
 })

打印结果为:
在这里插入图片描述
循环结果不是预想的0,1,2,3,4而是5个5,这是因为var声明在循环中作用域共用,并且会把i保存在全局作用域中。要解决循环中保存函数的问题,可以利用闭包创建独立的作用域,代码如下:

 let funArr = [];
 for(var i=0;i<5;i++) {
      (
          function(i) {
              funArr.push(function(){
                  console.log(i)
              })
          }
      )(i) 
  }
  funArr.forEach(item=> {
      item()
  })

打印结果为:
在这里插入图片描述
这样通过自执行函数就可以解决循环中创建函数的问题。但利用ES6中letconst提供的快级作用域可以让代码更简洁:

let funArr = [];
for(let i=0;i<5;i++) {
     funArr.push(function(){
         console.log(i)
     })
 }
 funArr.forEach(item=> {
     item()
 })

for-infor-of循环中使用const时,方法与let一致:

 let obj = {
   name: '张三',
     age: 20
 }
 for(const i in obj){
     console.log(i)  //输出name、age
 }

 let arr = ['张三','李四','王五']
 for(const value of arr){
     console.log(value) //输出张三、李四、王五
 }

打印结果为:
在这里插入图片描述

五、let、const、var 的区别

  1. 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。

  2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。

  3. 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。

在这里插入图片描述

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>