Java教程

JavaScript let

本文主要是介绍JavaScript let，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript let

1. 全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

var name1 = "yao";//全局作用域
//此处可以使用name1
function myFunction(){
    //此处也可以使用name1
}

全局变量可以在JavaScript程序中的任何位置访问。

2. 函数作用域

局部（函数内）声明的变量拥有函数作用域。

//这里不可以使用carName
function myFunction(){
        var carName = 'porsche';//函数作用域
    //这里可以使用carName
    }
//这里不可以使用carName

局部变量只能在它们被声明的函数内访问。

3. JavaScript 块作用域

通过var关键词声明的变量没有作用域。

在块{ }内声明的变量可以从块之外进行访问。

{
    var x = 10;
}
//此处可以使用 x

可以通过let关键词声明拥有块作用域的变量。

在块{ }内声明的变量无法从块外访问。

{
    let x = 10;
}
//此处不可以使用 x

4. 重新声明变量

使用var关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

var name = 'yao';
{
    var name = 'li';
}
//此处 name 为 li

使用let关键字重新声明变量

在块中重新声明变量不会重新声明块外的变量：

var name = 'yao';
{
    let name = 'li';
}
//此处 name 为 yao

5. 循环作用域

在循环中使用var：

var i = 7;
for (var i = 0; i < 10; i++){
    //一些代码
}
//此处 i 为 7

在循环中使用let：

let i = 7;
for (let i = 0; i < 10; i++){
    //一些代码
}
//此处 i 为 10

在例子中，在循环中使用的变量使用var重新声明了循环之外的变量。

在循环中使用的变量使用let并没有重新声明循环外的变量。

如果在循环中用let声明了变量 i ，那么只有在循环内，变量 i 才是可见的

6. HTML 中的全局变量

在 HTML 中，全局作用域是 window 对象

通过var关键词定义的全局变量属于 window 对象：

var carName = 'poesche';
//此处的代码可使用 window.carName

通过let关键词定义的全局变量不属于 window 对象：

let carName = 'Audi';
//此处的代码不可使用 window.carName

7. 重新声明

允许在程序的任何位置使用var重新声明 JavaScript 变量：

var x = 10;
//现在 x 为 10
var x = 20;
//现在 x 为 20

在相同的作用域，或在相同的块中，不允许通过let重新声明一个var变量

var x = 10;//允许
let x = 20;//不允许
{
    var x = 10;//允许
    let y = 20;//不允许
}

在相同的作用域，或在相同的块中，不允许通过let重新声明一个let变量

let x = 10;//允许
let x = 20;//不允许
{
    let x = 10;//允许
    let x = 20;//不允许
}

在相同的作用域，或在相同的块中，不允许通过var重新声明一个let变量

let x = 10;//允许
var x = 20;//不允许
{
    let x = 10;//允许
    var x = 20;//不允许
}

在不同的作用域或块中，允许通过let重新声明变量、

let x = 20;//允许
{
    let x = 7;//允许
}
{
    let x = 80;//允许
}

8. 提升

通过var声明的变量会提升（Hoisting）到顶端，可以在声明变量之前就使用它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 提升</title>
</head>
<body>
    <h1>JavaScript 提升</h1>
    <p>使用<b>var</b>，可以在声明之前使用变量：</p>
    <p id="demo"></p>//Audi
    <script>
        carName = 'Audi';
        document.getElementById('demo').innerHTML = carName;
        var carName;
    </script>
</body>
</html>

通过let定义的变量不会被提升到顶端

在声明let变量之前就使用它会导致ReferenceError

变量从块的开头一直处于"暂时死区"，直到声明为止

这篇关于JavaScript let的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航