迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

你需要知道的关于Javascript 中的 Let 关键词的一切

作者:迹忆客 最近更新:2021/12/27 浏览次数:

Javascript 中的 let 关键字是在 2015 年随 ES6 引入的。 就像 Javascript 中的 var 一样,let 关键字也用于变量声明。 但唯一的区别是用“let”关键字声明的变量是块作用域和局部变量。 用 let 声明的变量将超出声明它的块之外的范围。

让我们看看这个语法,

let name1 [= val1] [, name2 [= val2]] [, ..., namen [= valn];

要声明的变量的名称如 name1、name2、namen 等,每个变量都必须是合法的 Javascript 标识符。 即使对于那些声明的变量,我们也可以初始化它们的值,尽管这是可选的。

let { bar } = foo; // 其中 foo = { bar:10, baz:12 };

这将创建一个名为“bar”的变量,其值为 10。

我们还可以使用解构赋值:

这通常用于解构数组中的值,或者也可以将变量中的属性表示为不同的变量。

现在让我们看看这是如何实现的:

let x, y, remain;

[x, y] = [10, 20];

console.log(x);

// 期望输出: 10

console.log(y);

// 期望输出: 20

[x, y, ...remain] = [10, 20, 30, 40, 50];

console.log(remain);

// 期望输出一个数组 : [30,40,50]

上面代码的输出结果如下

10
20
[30,40,50]

全局作用域

被全局声明的变量意味着它们可以在任何地方使用,并且所有脚本和函数都可以在网页上访问它们。

let languageName = "Java";

// 这里的代码可以使用 languageName变量

function myFunction() {

// 这里的代码也可以使用 languageName变量

}

现在我们将了解什么是函数作用域:

在 Javascript 函数中声明的变量通常称为局部变量,它们的作用域是局部的。

// 这里不可以使用 languageName 变量

function myFunction() {

    let languageName = "Java";

    // 这里可以访问 languageName 变量

}

// 这里不可以使用 languageName 变量

所有局部变量只能从函数内部访问。

在Javascript中每个函数都有自己的作用域(function scope),在函数内部或者函数作用域内声明的变量,那些变量在函数外是不能访问的。 使用 let、var 和 const 声明的变量在函数内部声明时的行为相同。

function myFunction() {

   var languageName = "Java";   // 函数作用域

}

现在我们将了解 Block 作用域是什么:

在 Javascript ES6 演进之前,Javascript 只有两个作用域,这两个作用域是 Global 和 Function 作用域。

但是随着 2015 年 ES6 的演进,Javascript 引入了另一个作用域,称为“块(Block)作用域”,并在其中引入了两个不同的变量声明关键字,称为“let”和“const”,这两个关键字支持块作用域。

块作用域的概念基本上是说在“{}”块内声明的变量不能在块外访问。

{

    let a = 100;

}

// a 变量不可以在这里使用

现在,我们将看到在 Javascript 中模拟私有成员:

基本上,构造函数生成私有变量。

function Container(param) {

    this.member = param;

    var secret = 3;

    var that = this;

}

在上面的代码中,可以看到构造函数已经创建了三个私有变量实例,这些只有私有方法才能访问。 构造函数的内部函数通常称为私有方法。

function Container(param) {

    function dec() {

        if (secret > 0) {

            secret -= 1;

            return true;

        } else {

            return false;

        }

    }

    this.member = param;

    var secret = 3;

    var that = this;

}

在上面的代码中 dec 是一个私有方法,它用于检查 secret 实例变量。 如果 secret 大于0,那么它会将secret值减1,并返回真。 否则返回 false。

重新声明

如果我们谈论在 Javascript 中重新声明变量,那么我们可以说在 Javascript 中重新声明已用“var”声明的变量在程序或代码中的任何位置都是允许的。

下面是代码实现:

var a = 1;

// a 是 1

var a = 2;

// a 是 2

在 javascript 中,不允许在同一块内重新声明已使用“let”关键字声明的变量。

看一下代码实现:

var a = 2;    // 允许

let a = 3;    // 不允许

{

let a = 2;    // 允许

let a = 3     // 不允许

}

{

let a = 2;    // 允许

var a = 3     // 不允许

}

而在 Javascript 中,允许在另一个块中使用“let”关键字重新声明变量:

let a = 1;    // 允许
{
    let a = 2;    // 允许
}
{
    let a = 3;    // 允许
}

临时死区(TDZ)

术语“临时死区”用于描述变量不可访问的状态,例如它们在范围内但未声明。

使用“let”和“const”声明的变量,这些变量从其封闭作用域的开始一直存在到被声明的临时死区中。

我们可以说存在于“临时死区”中的变量,从它们被绑定到声明的地方。 这意味着,当一个变量被绑定到作用域时,它就在它的内部,而当名称被保留在内存中时,该变量就被绑定了。

{

  // 这是 year 变量的 临时死区!

   let year = 2021;

   console.log(year);

}

在上面,已经定义了临时死区。

TDZ 和 Typeof

// 导致 'ReferenceError'

console.log(typeof a);

let a = 10;

如果我们对使用“let”关键字声明且位于临时死区中的变量使用 typeof 运算符,则会抛出 ReferenceError(当引用不存在的变量时)。

现在,本文将结合词法范围来研究 TDZ:

function test(){

    var foo = 33;

    if(foo) {

       let foo = (foo + 55); // ReferenceError

    }

 }

 test();

上面代码运行报错

javascript ReferenceError 错误

上面给出的代码将给出一个如上所示的 ReferenceError。 只是因为如果外部 foo 有值,则评估 if 块。 但是,由于词法范围,此值在块内不可用。 由于 foo 的初始化没有完成,这就是 foo+55 抛出引用错误的原因。

现在,您将在以下情况中看到该现象可能令人困惑的情况。 代码 let n of n.a 已经存在于 for 循环的私有范围内。

所以,对于属性,n 中的 a,n.a 被解析,它位于指令对象“let n”的第一部分。

在下面的代码中,由于声明语句没有到达并终止,它仍然在临时死区。

function go(n) {

    // n 在这里被定义!

    console.log(n); // Object {a: [1,2,3]}

    for (let n of n.a) { // ReferenceError

      console.log(n);

    }

}

go({a: [1, 2, 3]});

现在您将看看 let 和 var 关键字之间的区别:

在Javascript中,let和var这两个关键字都是用来声明数据变量的,早期的var关键字是声明变量的方式,但是随着Javascript ES6的演进,在变量声明中引入了let关键字。

这两个关键字之间的主要区别在于,var 是函数作用域,而 let 是块作用域。

用 var 声明的变量在整个程序中被定义,这是区别于 let 声明的变量的一个地方。

我们看一个带有 var 关键字的代码实现:


console.log(a);

var a=1;

console.log(a);

上面代码运行结果如下

undefined
1

现在看一下 let 关键字的代码实现:

console.log(a);

let a=1;

console.log(a);

上面代码运行就会报变量未定义的错误了

javascript 代码变量未定义错误

上面代码可以直接在 Node在线编辑器 中直接运行查看结果

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便