【ES6】变量声明(整理篇)

283 阅读3分钟

前言

想把ES6的所有东西在重新啃一遍,第一篇文章,就从变量声明开始梳理。

let命令

用法于ES5中的var一致。

不存在变量提升

var操作符就存在变量提升现象,你在变量申明之前使用它,变量的值为undefined,并不是报错。

举个例子:

console.log(a); //undefined
var a = 1;
console.log(b); //报错
let b = 2;

避免了变量提升的现象,让我们编码过程更加规范。因为按正常逻辑,一个变量需要先申明,后使用。

块级作用域

举个例子:

if(true) {
    let i = 1;
    console.log(i); // 1
}
console.log(i); // 报错ReferenceError

let声明的i变量只会在if这个块中有效,对于外部无效。

块级作用域的好处: 1、防止内部变量影响外部变量,造成不必要的影响。 2、避免循环中的变量泄漏出去变成全局变量。

不可以重复申明变量

分为两点:1、不能在相同作用域内申明两次变量。2、不能在函数作用域内申明参数。

  • 重复申明变量引发报错
if(true) {
    let a = 1;
    let a = 2; // 报错SyntaxError
}
  • 函数中申明参数引发报错
function func(arg) {
    let arg = 0; // 报错SyntaxError
}

暂时性死区

  • 什么叫暂时性死区?

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

  • 怎么才会引发暂时性死区?

满足两个条件:

1、用了let或者const指令。

2、在变量申明之前使用。

console.log(a);
let a = 1;

赋值与顶层对象脱钩

这个描述起来很繁琐,但是用一个例子来讲解一下就会很明白。

var a = 1;
window.a  // 1

let b = 2;
window.b  // undefined

在ES6之前,全局变量的赋值和顶层对象的赋值是同一件事情。

而ES6为了改变这一点,在ES6的赋值操作中,都与顶层对象的属性脱钩。比如let、const、class,都不影响顶层对象,而为了兼容ES5,var和function的赋值还是影响顶层对象。

const命令

const也具有let的特性。比如:

  • 块级作用域
  • 暂时性死区
  • 不存在变量提升
  • 不能重复申明

const的申明与赋值

const是用来申明一个只读常量的。申明的时候必须赋值,不然会发生报错。

const a; //报错SyntaxError
  • const赋值的本质

1、const保证的是存储变量的内存地址不会发生改变。而不是变量的值不会发生改变。

2、对于Number,String,Boolean而言,本身的值就保存在自身的内存地址,所以等同于变量。如果改变,会发生报错。

3、而对于对象等复合数据类型来说,确保的是内存地址不发生变化,而数据结构不受控制。

ES6中的变量申明方式

ES5中,变量申明的方式有:

  • var
  • function

ES6中,新增的申明方式有:

  • let
  • const
  • import
  • class

总结

梳理这些主要是扎实自己的基础,能更好的服务于业务。同时也希望自己的博客有好的东西和大家分享,如果对以上内容有补充或者质疑的地方,请在评论区留言。

下一篇将给大家带来【ES6】解构赋值(整理篇)