ES6精解：let、const、块级作用域

BWrong 发布于2019-08-22 18:20 / 1008人阅读

摘要：命令新增了命令，跟类似，都是用来声明变量的不允许重复声明报错不存在变量提升报错正确写法为既要先定义，后面才能有这个值，否则会报错，如果改成会提示未定义，但是就直接报错了暂时性死区只要在块级作用域里面存在则它所声明的变量就绑定在这个块级作用域

let命令

ES6新增了let命令，跟var类似，都是用来声明变量的

1.不允许重复声明

</>复制代码 
{
    let a = 1;
    let a = 2;//报错
}

2.不存在变量提升

</>复制代码 
    {
       console.log(b);//报错
        let b = 1;
    }

正确写法为：

</>复制代码 
    {
        let b = 1;
        console.log(b);
    }

既要先定义，后面才能有这个值，否则会报错，如果改成var会提示undefined未定义，但是let就直接报错了

3.暂时性死区

只要在块级作用域里面存在let,则它所声明的变量就绑定在这个块级作用域上了，不受外界影响

</>复制代码 
   var a = 2;
   if(true){
       console.log(a); //报错
       let a = 3;
   }

注意：a先是全局变量，但是let声明之后，导致let声明的变量已经绑定在这个块级作用域上了，在块级作用域里面a就变成局部变量，所以在let声明变量前，输出a会报错

简述： let不能重复声明，不存在变量提升，暂时性死区，作用于块级作用域，let声明的变量只有在它所在的区域里面有效

4.let与var的区别

我们知道let和var都是定义变量的，那这两者之间有什么区别呢，以下例子具体说明：

例1：

</>复制代码 
  {
        var a = 1;
        let b = 2;
    }
    console.log(a);//1
    console.log(b);//Uncaught ReferenceError: b is not defined

从这个例1可以看出var定义的是全局变量，而let定义的话只能在当前作用域下有效，如果出了作用域者无效

例2：

</>复制代码 
    {
        console.log(a); //undefined
        var a = 100;
        console.log(b); //Uncaught ReferenceError: b is not defined
        let b = 100;
    }

从例2可以看出let必须得定义后才能生效，否则会报错；而var没定义也是可以的，值为undefined,也就是var存在变量提升

块级作用域

在讲let的时候，我们提到了块级作用域，那么什么是块级作用域呢？

</>复制代码 
 var tmp =12;
    function f() {
        console.log(tmp);
        if (false) {
            var tmp = "hello world";
        }
    }
    f(); // undefined

tmp会被内层覆盖，所以输出undefined，因为var存在变量提升

let实际上就是块级作用域，比如：

</>复制代码 
    {
        var a = 1;
        {
            var a = 2;
        }
        console.log(a);//2
    }

如果用var外部声明的a会被内部声明的给覆盖，但是如果用let

</>复制代码 
    {
        let a = 1;
        {
            let a = 2;
        }
        console.log(a);//1
    }

用上let这个时候就不会被覆盖，外部的a绑定的是外部作用域，内部的a绑定的是内部作用域

还有一个问题我们肯定经常会碰到，如：

</>复制代码 
  var callbacks = [];
    for(var i = 0;i < 5;i++){
        callbacks[i] = function () {
            return i;
        }
    }
    console.log(callbacks[0]()); //5

因为i被后面覆盖，所以一直都是5
在es5中我们是这么解决的：

</>复制代码 
   var callbacks = [];
    for(var i = 0;i < 5;i++){
        (function (i) {
            callbacks[i] = function () {
                return i;
            }
        })(i);
    }
    console.log(callbacks[0]()); //0

然而ES6中我们就可以利用let的块级作用域了

</>复制代码 
var callbacks = [];
for(let i = 0;i < 5;i++){
    callbacks[i] = function () {
         return i;
    }
}
console.log(callbacks[0]()); //0

从这里我们可以看出，块级作用域其实就是立即执行函数(function(){})()

const命令

const跟let类似，只是const是声明常量，而let是声明变量

1.不能重复声明

</>复制代码 
{
    const a = 1;
    const a = 2;//报错
}

2.一旦声明就不能改变

</>复制代码 
{
    const a = 1;
    a = 2;//报错
}

注意： const实际上不是变量不能改变，而是变量声明的地址不能改变，如下：

</>复制代码 
{
    const a = {};
    a.name = "Lily";
    console.log(a); //输出：{name: "Lily"}
}

但是如果改成：

</>复制代码 
{
    const a = {};
    a = {name:"Lily"};
    console.log(a); //报错
}

所以改变变量里面的属性是不会报错的，只有把整个变量都改变即改变变量地址，那就会报错

3.声明一定要有值

</>复制代码 
{
    const a; //报错
}

所以常量声明一定要有初始值

4.暂时性死区

</>复制代码 
const a = 2;
{
    const a = 1;
}
console.log(a);//2

const跟let一样都会产生块级作用域，内部跟外部定义的变量毫不相干

5.不存在变量提升

</>复制代码 
{
    console.log(a);//报错
    const a = 1;
}

const跟let一样，还没有定义都会报错

简述： const必须初始化，声明一定要有值，无法重复声明，是块级作用域

以上个人总结，有什么不对的地方欢迎留言指出！

云服务器 GPU云服务器作用域中作用域作用域规则作用域实例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95746.html

ES6学习第一章 let 和 const 命令

摘要：外层作用域不报错正常输出块级作用域与函数声明规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。规定，块级作用域之中，函数声明语句的行为类似于，在块级作用域之外不可引用。同时，函数声明还会提升到所在的块级作用域的头部。前言：最近开始看阮一峰老师的《ECMAScript 6 入门》(以下简称原...

番茄西红柿 2021-11-24 09:39 评论0 收藏2637
ES6学习摘要（01）（新人学习）

摘要：入门一前言由于最近本人在学习，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于的新人学习摘要吧。的作用域与命令相同只在声明所在的块级作用域内有效。块级作用域新增方式和实际上为新增了块级作用域。同时，函数声明还会提升到所在的块级作用域的头部。 ECMAScript6/ES6 入门一、前言由于最近本人在学习ES6，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于ES6的新人学习摘要吧。...

dmlllll 2019-08-21 17:59 评论0 收藏0
es6块级作用域

摘要：块级作用域存在于两个地方函数内部。如下例应该返回创建数组的构造函数即这是数组返回这是数组从上例，我们可以知道即使全局作用域中已经定义了变量或者已经存在了属性，但我们之后定义的变量则会覆盖之前已经定义好的或者已经存在的变量属性。一.var 声明与变量提升机制在JavaScript中使用var定义一个变量，无论是定义在全局作用域函数函数的局部作用域中，都会被提升到其作用域的顶部，这也是...

cnTomato 2019-08-23 16:19 评论0 收藏0
es6学习之let和const命令

摘要：和命令命令是在它所在的代码块有效，它属于块级作用域，新增。只有全局作用域和函数作用域。 let和const命令 let命令是在它所在的代码块有效，它属于块级作用域，es6新增。es5只有全局作用域和函数作用域。let命令存在暂时性死区（TDZ），即在申明前使用就会报错,不存在变量提升 console.log(a); // 报错 let a = 111; ==let不允许在相同作用域中，...

DrizzleX 2019-08-23 16:49 评论0 收藏0
ES6走走看看—由块级作用域引出的一场变革

摘要：块级声明块级声明是用于声明在指定块的作用域之外无法访问的变量。美元符号可以放到任何一个位置，甚至单独一个美元符号。块级函数从开始，在严格模式下，块里的函数作用域为这个块。持续更新的github笔记，链接地址：Front-End-Basics 此篇文章的笔记地址：字符到底发生了什么变化 ES6走走看看系列，特别鸣谢奇舞读书会~ 块级作用域又称词法作用域，存在于：函数内部（...

荆兆峰 2019-08-23 11:49 评论0 收藏0