let 、var 、 const

  • var、let、const的区别:
    1. 使用方法
    2. 块级作用域
    3. 不存在变量提升
    4. 暂时性死区
    5. 不可重复声明变量
    6. let、const声明的全局变量不会挂在顶层对象下面

使用方法

  • let已经完全可以取代var，定义变量
  • const一般用来定义：常量、声明匿名函数、箭头函数等
  • 开发时基本默认使用 const，只有当确实需要改变变量的值的时候才使用 let（比如定义一个组件或map遍历时使用const定义后在调用，使代码更结构化、可读性变高）

块级作用域

  • 块级声明用于声明在指定块的作用域之外无法访问的变量。let 和 const 都是块级声明的一种。

  • ECMAScript 6 引入了块级作用域，块级作用域存在于：函数内部和当前块中(字符 { 和 } 之间的区域 =》if(){ xxxxxx 此处也是块级 })

  • 块级作用域可以无限嵌套
  • 块级作用域的真正作用是使代码分割成块（eg：3）
  • 块级作用域声明函数，最好使用匿名函数的形式。
1
2
3
4
5
6
7
8
9
{{{{
  {let test = 'Hello World'}
  console.log(test); // 报错  拿不到子作用域的变量
}}}};
Eg3：for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

此处的let是一个单独的作用域，因此结果是 abc 输出了三次，每次迭代循环时都创建一个新变量，并以之前迭代中同名变量的值将其初始化，此时的let作用类似于闭包。

不存在变量提升

变量提升的现象：在同一作用域下，变量可以在声明之前使用，值为 undefined，（ES5时 var 会出现变量提升，ES6 使用直接console一个未声明的值会报错Uncaught ReferenceError: xxxxxx is not defined）

暂时性死区

  • 只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

  • 暂时性死区和不能变量提升的意义：为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。

    不允许重复声明变量

  • let、const不允许在相同作用域内，重复声明同一个变量

let、const声明的全局变量不会挂在顶层对象下面

  • 浏览器环境顶层对象是: window
  • node环境顶层对象是: global
  • var声明的全局变量（会创建一个新的全局变量作为全局对象的属性）会挂在顶层对象下面，而let、const不会挂在顶层对象下面。
1
2
3
4
5
var value = 535;
console.log(window.value); // 535
let value = 535;
console.log(window.value); // undefined
  • const 一旦声明，必须马上赋值,并且给了值之后就不能改变（变量指向的那个内存地址所保存的数据不得改动）
    • 简单类型(number、string、boolean)：内存地址就是值,即常量(一变就报错).
    • 复杂类型(obj、arr等)：地址保存的是一个指针，const只能保证指针是固定的(总是指向同一个地址),它内部的值是可以改变的

      总结

  • let可以先声明稍后再赋值,而const在 声明之后必须马上赋值，否则会报错
  • const 简单类型一旦声明就不能再更改，复杂类型(数组、对象等)指针指向的地址不能更改，内部数据可以更改。