JavaScript中ES6规范中let和const的用法和区别

末蓝、 2022-09-08 13:55 145阅读 0赞

ES6—— let 和 const 命令

引言  
本文主要讲解ES6中变量的相关操作，变量的命名， 讲解 var、 let 、 const 三者的区别

正文  
ES6中的 let 和 const 都是用来声明变量的， 他们与 var 有所区别

let 命令  
我们都知道在for循环中，我们命名的变量 i 一般都只是为了在这个循环中使用，才临时命名的， 我们希望循环结束后，这个变量就消失， 但是却相反，用 var 命名的变量，在 for 循环结束后并不会销毁，而会存在于全局中。

1  
2  
3  
4  
for(var i=0; i<5; i++) \{  
console.log('循环'+ i)  
\}  
console.log(i)  
/\* 输出结果 \*/  
循环1  
循环2  
循环3  
循环4  
5 // 这里是循环外输出的i  
但是如果我们在 for 循环中，用到 let 去命名变量会怎么样呢？

1  
2  
3  
4  
for(let i=0; i<5; i++) \{  
console.log('循环'+ i)  
\}  
console.log(i)  
/\* 输出结果 \*/  
循环1  
循环2  
循环3  
循环4  
undefined // 这里是循环外输出的i,显示未定义  
这样的话就解决了因为 var 命名导致的变量泄露的问题了, 其实它的本质就是作用域， let 只作用于他自身所在的代码块内，而 var 是针对全局都有效的。例如这一个简单的例子：

1  
2  
3  
4  
5  
6  
\{  
let i = 1  
var n = 2  
\}  
console.log(i)  
console.log(n)  
/\* 输出结果 \*/  
undefined  
2  
可以看到， let 命名的变量只存在于那个代码块内，到外部就访问不到了，而 var 就是针对全局命名的。

const 命令  
const 和 let 类似，也是命名的变量只能在它所在的代码块内能被访问得到，到外部就无法被访问到，但是 const 与 let 的区别就在于， const 命名的变量是一个只读变量，简而言之就是命名了就无法在后面被修改，例如这个例子：

1  
2  
3  
4  
5  
const a = 'apple'  
let b = 'orange'  
  
a = 'watermelon'  
b = 'banana'  
/\* 输出结果 \*/  
a = 'watermelon'  
^

显而易见， 系统会直接报错， 因为 const 命名的变量 a 是无法改变的， 后续无法对其进行赋值。

其实 const 命名变量以后， 也不是说就真的无法改变了， 因为const命名时其实是把箭头指向了内存中的一个对象， 只要不改变这个对象地址， const 命名的变量还是可以变化的，例如：

1  
2  
3  
4  
5  
6  
7  
const list1 = \[\]  
  
list1.push('变化1')  
  
console.log(list1)  
  
// \['变化1'\]  
可以看到 list1.pish(' 变化1 ') 不会改变 变量 list1在内存中的地址。

但是 list1 = \[ '变化1' \] 就会改变 list1 在内存中的地址，所以会报错

1  
2  
3  
4  
5  
6  
7  
8  
const list1 = \[\]  
  
list1 = \['变化1'\]  
  
console.log(list1)  
  
// 报错：list1 = \['变化1'\]  
^

结束语  
这就是 let 和 const 的简单应用，希望对大家有所帮助， 下一篇ES6（2）将讲解变量的解构赋值

到此这篇关于JavaScript中ES6规范中let和const的用法和区别的文章就介绍到这了