ES6中块级绑定let,const

声明变量的问题

使用var声明变量

  1. 允许重复的变量声明:导致数据被覆盖

  2. 变量提升:怪异的数据访问、闭包问题

  3. 全局变量挂载到全局对象:全局对象成员污染问题

// 1. 允许重复的变量声明:导致数据被覆盖
var a = 1;
function print(){
    console.log(a)
}
// 2. 变量提升:怪异的数据访问
if (Math.random() < 0.5) {
    var a = "abc";
    console.log(a);
}
else {
    console.log(a);
}

console.log(a);

// 2. 变量提升:闭包问题
var div = document.getElementById("divButtons")

for (var i = 1; i <= 10; i++) {
    var btn = document.createElement("button");
    btn.innerHTML = "按钮" + i;
    div.appendChild(btn);
    btn.onclick = function () {
        console.log(i); //输出11
    }
}

// 3. 全局变量挂载到全局对象:全局对象成员污染问题

var abc = "123";
console.log(window.abc);

使用let声明变量

ES6不仅引入let关键字用于解决变量声明的问题,同时引入了块级作用域的概念

块级作用域:代码执行时遇到花括号,会创建一个块级作用域,花括号结束,销毁块级作用域

声明变量的问题

  1. 全局变量挂载到全局对象:全局对象成员污染问题

let声明的变量不会挂载到全局对象

  1. 允许重复的变量声明:导致数据被覆盖

let声明的变量,不允许当前作用域范围内重复声明

在块级作用域中用let定义的变量,在作用域外不能访问

  1. 变量提升:怪异的数据访问、闭包问题

使用let不会有变量提升,因此,不能在定义let变量之前使用它

底层实现上,let声明的变量实际上也会有提升,但是,提升后会将其放入到“暂时性死区”,如果访问的变量位于暂时性死区,则会报错:“Cannot access ‘a’ before initialization”。当代码运行到该变量的声明语句时,会将其从暂时性死区中移除。

在循环中,用let声明的循环变量,会特殊处理,每次进入循环体,都会开启一个新的作用域,并且将循环变量绑定到该作用域(每次循环,使用的是一个全新的循环变量)

在循环中使用let声明的循环变量,在循环结束后会销毁

// let定义a不会挂载到全局对象也不对全局对象成员污染
 let a = 123;
 console.log(window.a)

 let a = 123;
 let a = 456; // 检查到,当前作用域(全局作用域)已声明了变量a


 let a = 123; //全局作用域定义a

 {
     let a = 456; //块级作用域定义a
     console.log(a); //使用的是块级作用域中的a
 }


 if (Math.random() < 0.5) {
	    let a = 123; //定义在当前块级作用域
	    console.log(a) //当前块级作用域中的a
 }
 else {
	  //这是另外一个块级作用域,该作用域中找不到a
	  console.log(a)
 }
 console.log(a);

//2. 变量不会进行提升
 console.log(a)
 let a = 123;

使用const声明常量

const和let完全相同,仅在于用const声明的变量,必须在声明时赋值,而且不可以重新赋值。

实际上,在开发中,应该尽量使用const来声明变量,以保证变量的值不会随意篡改,原因如下:

  1. 根据经验,开发中的很多变量,都是不会更改,也不应该更改的。
  2. 后续的很多框架或者是第三方JS库,都要求数据不可变,使用常量可以一定程度上保证这一点。

注意的细节:

  1. 常量不可变,是指声明的常量的内存空间不可变,并不保证内存空间中的地址指向的其他空间不可变。
  2. 常量的命名
    1. 特殊的常量:该常量从字面意义上,一定是不可变的,比如圆周率、月地距地或其他一些绝不可能变化的配置。通常,该常量的名称全部使用大写,多个单词之间用下划线分割
    2. 普通的常量:使用和之前一样的命名即可
    3. 在for循环中,循环变量不可以使用常量

const PI = 3.14;
const MOON_EARTH_DISTANCE = 3245563424; //月地距离

const a = {
    name: "kevin",
    age: 123
};
a.name = "abc";
console.log(a)

var obj = {
    name:"kevin",
    age:1
}
//不推荐
for (const prop in obj) {
    console.log(prop)
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力爬坑的小崔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值