let，const和var的区别_let和const哪个等级高-CSDN博客

本文链接：https://blog.csdn.net/weixin_51889781/article/details/123769401

一文彻底理解let，const和var的区别

在早期JavaScript中声明变量只有var一个关键词，学过其他编程语言的同学可能再来学习它，肯定会感到非常的变扭，它存在变量提升，会让你有一种奇特的感觉
ps：目前声明变量优先级应为cosnt > let > var

var

//index.js

console.log(age)

var age = 18

上面那段console.log输出的是undefined，那么为什么会这样呢，在一个变量声明之前怎么能进行访问了，这就是var的变量提升

它的实际情况是这样的

//index.js
//在顶部声明变量
var age

//打印结果
consoleg.log(age)

//这里才执行赋值语句
age = 18

再看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>var</title>
  <style type='text/css'>
    .div {
      width: 100px;
      height:100px;
      margin: 10px;
      background: red;
      float: left;
    }
  </style>
</head>
<body>
  <div class="div">1</div>
  <div class="div">2</div>
  <div class="div">3</div>
  <div class="div">4</div>
  <div class="div">5</div>
  <div class="div">6</div>
  
  <script>
    const divs = document.querySelectorAll('div')
    for(var i = 0; i < divs.length; i++) {
      divs[i].addEventListener('click', () => {
        console.log(i + 1)
      })
    }
  </script>
</body>
</html>

是不是以为为每个div元素绑定点击事件，然后点击的时候按顺序打印呢？

其实不管你点击哪个div打印的都是6，因为var不存在块级作用域，点击事件不是立马触发的，它是点击的时候才执行，所以那个时候 i 已经等于 6 了，所以不管点击哪个div，打印的都是 6 。

在全局用var声明的变量会挂载到window上面

var age = 18
console.log(age, window.age)

输出结果为 18 18

你见过 age = 18 这样没有声明age的情况下直接使用age的吗，这种情况直接视为声明age为全局变量，如下：

(function () {
      age = 19
})()

console.log(age, window.age)

输出结果为 19 19

当开启严格模式就不会允许这种语法的出现了

'use strict'
;(function () {
      age = 19
})()

console.log(age, window.age)

控制台会报错：
Uncaught ReferenceError: age is not defined

var的特性熟悉差不多了，那么let就比较好理解了

let

没有变量提升
不会挂载到widow上
有块级作用域（就如上面为每个元素绑定点击事件，把var改成let就能解决啦）
暂时性死区

	console.log(age)
	let age = 18

控制台会报错：
Uncaught ReferenceError: Cannot access ‘age’ before initialization

const

const基本上和let差不多，const在其他语言里面也有，表明着不可变，所以const相比于let，就多了一个不可变

声明是必须给定值
如果不给定值

	const age

控制台报错：
Uncaught SyntaxError: Missing initializer in const declaration

你不能尝试去修改一个const定义的变量

	const age = 19
	age = 18

控制台报错：
Uncaught TypeError: Assignment to constant variable.

说到这里，咱们再看一个小例子

	const obj = {name: 'lihua', age: 18}
	obj.age = 19
	console.log(obj)

控制台打印的是{name: ‘lihua’, age: 19}
what？
不是说好的不可变吗？为什么这里它不仅不报错，反而还修改成功了呢？

实际上 obj 的值并没有修改，这里的 obj 保存的是内存地址，将一个对象赋值给 obj ，实际上是将这个对象在堆中的引用地址赋值给了 obj ，你通过 obj.age = 19 这个操作只是把那个内存空间的age改了，但是你并没有修改 obj 的值，它的值还是那个内存地址。

你如果执行 obj = {} ，那就肯定不行了，你不能让 obj 指向另外一个内存地址

本文完