js中let,const,var命令区别浅析

最新推荐文章于 2023-04-18 22:15:03 发布

原创最新推荐文章于 2023-04-18 22:15:03 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#let const

前端基础专栏收录该内容

24 篇文章

订阅专栏

本文深入探讨了JavaScript中let, const和var的使用及区别，重点解析了ES6引入的块级作用域概念，以及let和const命令的特性，如变量提升、重复声明和常量不可变性。

let,const,var都是用来声明变量的命令，其中let和const都是ES6新添加的命令，要理解他们，首先得引入块级作用域这个概念。

块级作用域

在ES5中，还只有全局作用域和函数作用域两个作用域，这会导致很多不合理的地方，具体请看阮一峰大神的讲解

在ES6中引入了块级作用域的概念，用大括号{}来表示，本人对其的理解就是新生成一个独立的块，这其中let和const命令声明的变量和外面的块中的内容是互不影响的，即也可以理解为let和const命令为js新增了块级作用域。

ex:

{
            let ex = 9;
 }
        console.log(ex);  //ReferenceError: ex is not defined

关于块级作用域一些其他的知识点

ES6 允许块级作用域的任意嵌套。
内层作用域可以定义外层作用域的同名变量。
ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。

ps：环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，详细讲解阮一峰ES6

let命令

用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
ex:

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

let 命令不存在变量提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。

let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。也就是“暂时性死区（使用let命令声明变量之前，该变量都是不可用的。）”

ex:

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); //ReferenceError: Cannot access 'bar' before initialization
let bar = 2;

let命令不允许重复声明

ex:

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

const命令

const用法和let用法相似：

const的作用域与let命令相同：只在声明所在的块级作用域内有效。
const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
const声明的常量，也与let一样不可重复声明。

区别

const命令声明一个只读的常量。一旦声明，常量的值就不能改变。

ex:

const PI = 3.1415;
PI // 3.1415

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

const一旦声明变量，就必须立即初始化，不能留到以后赋值。

ex:

const foo;
// SyntaxError: Missing initializer in const declaration

const命令声明常量的本质

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。

对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。

ex：

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

可用冻结（Object.freeze）的方法来纠正。

本文仅方便复习所写，更多细节请查看阮一峰大神ES6