👑 博主简介:知名前端工程师!
✒️ 出没地点:重庆-沙坪坝
💊 交流扣群:559658154,欢迎您的加入!
———————————————————————————————————————————
版权声明:本文为 CSDN 博主「Lady Marry
」的原创文章,转载请附上原文出处链接及本声明。
ES5 只有两种声明变量的方法:
var
命令和
function
命令。ES6 除了添加
let
和
const
命令,另外两种声明变量的方法:
import
命令和
class
命令。所以,ES6 一共有 6 种声明变量的方法。
一. let 命令
1. 基本用法
ES6 新增了 let
命令,用来声明变量。它的用法类似于 var
,但是所声明的变量,只在 let
命令所在的代码块内有效。
{
let a = 10;
var b = 1;
}
console.log(a); // ReferenceError: a is not defined.
console.log(b); // 1
特点:
- 变量不能重复声明
- 新增块级作用域 es5(全局, 函数, eval)
- 不存在变量提升
- 不影响作用域链:先在本作用域查找,没有的话查找父作用域
for 循环的计数器,就很合适 let
命令。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);// ReferenceError: i is not defined
另外,在 for 循环中使用还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面代码正确运行,输出了 3 次 abc。这表明函数内部的变量 i 与循环变量i不在同一个作用域,有各自单独的作用域(同一个作用域不可使用 let 重复声明同一个变量)。
2. 不存在变量提升
var
命令会发生“变量提升”现象,即变量可以在声明之前使用,值为 undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,let
命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
3. 暂时性死区
只要块级作用域内存在 let
命令,它所声明的变量就绑定这个区域,不再受外部的影响。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp; //绑定了当前if块区,因此上一行赋值会报错,相当于屏蔽了全局区域
}
总之,在代码块内,使用 let
命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。
if (true) {
// TDZ开始
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ结束
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}
4. 不可重复声明
let
不允许在相同作用域内,重复声明同一个变量。
// 报错
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() // 不报错
5. ES6 的块级作用域
ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景
{
let a = 1;
{
let a = 2;
}
console.log(a); // 1
}
如上代码有两个块,都声明了变量 a ,都分别在自己的块级作用域,互不影响。
ES6 允许块级作用域的任意嵌套。
{{{{
{let insane = 'Hello World'}
console.log(insane); // 报错
}}}};
块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE)不再必要了。
// IIFE 写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
二. const 命令
1. 基本用法
const
基础特点 和 let
差不多,关键区别就是:声明一个只读的常量。一旦声明,常量的值就不能改变。
特点:
- 一定要赋初始值
- 一般常量使用大写
- 常量的值不能修改
- 块级作用域
- 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
const PI = 3.1415;
console.log(PI); // 3.1415
PI = 3; // TypeError: Assignment to constant variable.
2. 本质
const
实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const
只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
const foo = {};
// 为 foo 添加一个属性,可以成功
foo.prop = 123;
// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only
对于数组
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
如果真的想将对象冻结,应该使用 Object.freeze 方法。
const foo = Object.freeze({});
// 常规模式时,下面一行不起作用;
// 严格模式时,该行会报错
foo.prop = 123;
除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。
"use strict"
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach((key, i) => {
if (typeof obj[key] === 'object') {
constantize(obj[key]);
}
});
};
let person = { id: 1001, name: "tom" };
constantize(person);//冻结
// Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
person.name = "jack";