ECMAScript6基础学习教程（二）块级作用域

娜姐

发布于 2022-05-13 14:30:22

2680

发布于 2022-05-13 14:30:22

文章被收录于专栏：娜姐聊前端

ES6出现之前，只有函数可以形成作用域。而ES6中新增了块级作用域概念。

let**和**const**命令可以构成一个块级作用域**。

1.let

用法类似var，声明一个块作用域内的变量，注意，块作用域外无法访问该变量。用法如下：

// 在if语句中定义块作用域
var check = true;
if (check) {
  let value = 6;
}
console.log(value); //undefined
// 在循环中定义块作用域
for(let i =0; i < arr.length; i++) {...}

与var不同之处：

不支持“变量提升”；
一旦某个变量声明为let或者const类型，则该变量会绑定该区域，不受外界影响。例如：

var temp = 1;
if (true) {
    console.log(temp); //ReferenceError: 用let声明的temp变量会绑定该块作用域
    let temp = 2;
}

在同一个作用域内，不允许重复声明同一个变量。例如：

if (true) {
    let a = 1;
    let a = 2; //throw error: Duplicate declaration "a"
}

有了块级作用域，可以避免内层变量覆盖外层变量，可以让变量应用到更小范围内。

下面让我们看一道经典的闭包问题，思考如何用let解决？例题如下：

var a = [];
for (var i =0; i <10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[6](); // 10

由于变量i是全局变量，所有每一次循环，新的i值都会覆盖老的i值，导致最后数组a的每个元素运行结果都是10。

如果使用let，i变量的作用域范围只限于块作用域，即每次循环的代码块，如此一来，最后a[6]()可以返回期望值：6。修改如下：

var a = [];
for (let i =0; i <10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[6](); // 10

2.const

const用来声明常量，一旦定义，就不能修改。

这里需要注意，如果const声明的是对象，那么，变量名指向的是对象地址。所以，对象地址不允许修改，但是，对象的值，是可以修改的。

例如：

const foo = {a: 1};
foo.b = 3; // 正确
foo = {b: 6}; // throw error: "foo" is read-only

3.小结

块级作用域的出现，帮助解决了很多和变量作用域相关的问题！让我们好好享受这个新特性吧！

下一节：ECMAScript6基础学习教程（三）变量的解构赋值

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-13，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

ecmascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

ecmascript

登录后参与评论

0 条评论

热度