526互联

【ES6篇】let和const

发布时间 2023-11-05 21:06:59作者: Harley-Chang

一、块级声明

声明那些只能在函数内部、大括号之内才可以访问的变量，拥有以下特点：

  • 函数内部
  • "{"和"}"之间

二、变量提升机制

在全局/函数作用域，使用var声明的变量，不管在哪里声明的变量，都会被当成在当前作用域顶部声明的变量，代码清单如下：

function init(){
    if (false) {
        var food='三明治';
    }
    console.log(food);
}
init();//这里可以访问food，其值为"undefined"

function show(){
    {
        var food='三明治';
    }
    console.log(food);
}
show();//这里可以访问food，其值为"三明治"

function display(){
    for (var index = 0; index < 8; index++) {
        ;
    }
    console.log(index);
}
display();//这里可以访问index，其值为"8"

运行结果如下：

[Running] node "e:\BlogPlan\ES6\block.js"
undefined
三明治
8
[Done] exited with code=0 in 0.095 seconds

三、let声明

有时候变量声明提升会给我们造成很多困扰，代码并没有按照我们预期的那样执行，但是在ES6中，let声明帮助我们解决了这些问题，let用法与var相同，使用let声明的变量不会提升，它会将变量限制在块级作用域中，下面将会介绍let声明带来的一些好处。我们可以将上面代码中的var声明替换为let声明，代码清单如下：

function init(){
    if (false) {
        let food='三明治';
    }
    console.log(food);//这里无法访问food，会报错，food is not defined
}
init();

function show(){
    {
        let food='三明治';
    }
    console.log(food);//这里无法访问food，会报错，food is not defined
}
show();

function display(){
    for (let index = 0; index < 8; index++) {
        ;
    }
    console.log(index);//这里无法访问index，会报错，index is not defined
}
display();

从上面代码可以看出来，let声明的变量只会作用在块中，块外访问时，将会抛出错误。
使用let声明还可以带来一些好处，比如无法在同一个块中，声明重复的变量名，可以在不同的块中，声明重复的变量名，代码清单如下：

{
    var name='Harley';
    var name='Chang';
    let name='Harley'//
}

e:\BlogPlan\ES6\tempCodeRunnerFile.js:2
    var name='Harley';
        ^
SyntaxError: Identifier 'name' has already been declared



{
  let name='Harley';
  console.log(name);
}
{
  let name='Chang';
  console.log(name)
}

[Running] node "e:\BlogPlan\ES6\tempCodeRunnerFile.js"
Harley
Chang

[Done] exited with code=0 in 0.086 seconds

四、const声明

ES6提供了const声明，用来声明常量。const声明有几个特点:

  • const声明的变量必须在初始化时进行赋值
  • const声明的变量，对象本身绑定的值无法修改，但是对象的属性可以进行修改
  • 与let声明类似，无法在同一块级作用域内，声明重复的变量名
    代码清单如下：

1、const声明的变量必须在初始化时进行赋值

{
    const name={
        firstName:'Harley',
        lastName:'Chang'
    };
    const age;
    age=30;
}

e:\BlogPlan\ES6\tempCodeRunnerFile.js:6
    const age;
          ^^^
SyntaxError: Missing initializer in const declaration

2、const声明的变量，对象本身绑定的值无法修改，但是对象的属性可以进行修改

{
    const name={
        firstName:'Harley',
        lastName:'Chang'
    };
    console.log(JSON.stringify(name));
    name.firstName='Harley007'
    console.log(JSON.stringify(name));
}

{"firstName":"Harley","lastName":"Chang"}
{"firstName":"Harley007","lastName":"Chang"}

[Done] exited with code=0 in 0.088 seconds

3、与let声明类似，无法在同一块级作用域内，声明重复的变量名

{
    var name = 'Harley-Chang';
    const name = 'Harley-Chang';
}

var name = 'Harley-Chang';
        ^
SyntaxError: Identifier 'name' has already been declared



{
    let name = 'Harley-Chang';
    const name = 'Harley-Chang';
}

const name = 'Harley-Chang';
          ^
SyntaxError: Identifier 'name' has already been declared

PS：使用的工具以及插件

编辑器：VS Code

js插件：Code Runner