欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

es6 新增let 、const与块级作用域

程序员文章站 2022-07-16 17:46:42
...

目录

一、块级作用域

(1) 什么是块级作用域

(2)为什么需要块级作用域 

二、let与const 

(1)let与const特性

(2)几种声明变量方法的区别

三、扩展--顶层对象的属性变化

四、练习


ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

一、块级作用域

在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种:

  1. 全局作用域
  2. 函数作用域

ES6,为我们提供了‘块级作用域’,且‘块级作用域’并不影响var声明的变量。var声明的变量的性质和原来一样,还是具有‘变量提升’的特性。而‘块级作用域’通过新增命令let和const来体现。

接下来,我们来看一下什么是块级作用域?

(1) 什么是块级作用域

什么是块作用域?

JS中作用域有:全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。

块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。使用块级作用域,外层作用域无法获取到内层作用域,非常安全明了。即使外层和内层都使用相同变量名,也都互不干扰。

注意:ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域 

(2)为什么需要块级作用域 

为什么需要块级作用域?

ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

  1. 内层变量可能会覆盖外层变量。
  2. 用来计数的循环变量泄露为全局变量。

二、let与const 

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

const声明的变量不能重新赋值,也因为正是这个规则,const变量声明时一定要先初始化,不能留到以后再赋值,不然就会报错。

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

(1)let与const特性

let和const两个变量声明命令,他们都具有下面这些特性:

  • 只在块级作用域内有效;
  • 不存在变量提升,一定声明后才能使用;
  • 暂时性死区,在代码块内使用let命令声明变量之前,该变量都是不可用的,不受外部变量影响;这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。
  • 在相同作用域范围内不允许重复声明;

(2)几种声明变量方法的区别

几种声明变量方法的区别:

   var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。

   let定义的变量,let不存在变量提升,let不允许重复声明变量:只能在块作用域里访问,不能跨块访问,也不能跨函数访问。

   const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。

   注意:同一个变量只能使用一种方式声明,不然会报错

总结:ES6 规定暂时性死区和letconst语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。

三、扩展--顶层对象的属性变化

var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
window.a // 1

let b = 1;
window.b // undefined

上面代码中,全局变量avar命令声明,所以它是顶层对象的属性;全局变量blet命令声明,所以它不是顶层对象的属性,返回undefined

四、练习

(1)let只在块级作用域{}之间有效

       {
            var a=10;
            let b=100;
            const MAX = 5;
        } 
        console.log(a)//10
        console.log(b)//Uncaught ReferenceError: b is not defined
        console.log(Max)//Uncaught ReferenceError: Max is not defined

(2)不存在变量提升

      // var 的情况
      console.log(a); // 输出undefined
      var a = 1;

      // let 的情况
      console.log(b); // 报错
      let b = 2;

      //const情况
      console.log(c);//报错
      const c=3;

(3)暂时性死区

 if (true) {
            tmp = 'abc'; // 报错
            let tmp;
          }

在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

4、不能重复声明(在使用var 定义变量时,重复声明只会发生变量值的覆盖,不会报错)

  //不能重复声明
          {
            var a=100;
            let a=100;
            //报错 Identifier 'a' has already been declared
            
          }
          {
            let a=100;
            let a=100;
            //报错 Identifier 'a' has already been declared 
          }
          {
            let a=100;
            var a=100;
            //报错 Identifier 'a' has already been declared    
          }