【JavaScript 教程】第二章基础知识02—JavaScript 变量

忘是亡心i 2022-08-28 06:43 56阅读 0赞

![a908741d562032dc1068f2d42bc54a67.png][]

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节中，我们学习了JavaScript的语法，错过的小伙伴可以点击文章《[【JavaScript 教程】第二章基础知识01—JavaScript 语法][JavaScript _01_JavaScript]》进行学习。

那么，在今天的内容中，我们将一起来学习 JavaScript 变量以及如何在 JavaScript 中声明变量。

JavaScript 变量是松散类型，也就是说，变量可以保存任何类型数据的值。变量只是值的命名占位符。

## **使用var关键字声明JavaScript变量** ##

要声明变量，请使用var关键字后跟变量名称，如下所示：

var message;

变量名可以是任何有效的标识符。该message变量声明，并举行特别值undefined。

声明变量后，您可以为变量分配一个字符串，如下所示：

message = "Hello";

要同时声明变量并初始化它，请使用以下语法：

var variableName = value;

例如，以下语句声明message变量并为其赋值"Hello"

var message = "Hello";

您可以使用一个语句声明两个或多个变量，每个变量声明用逗号 ( ,)分隔，如下所示：

var message = "Hello",
        counter = 100;

如前所述，您可以在`message`变量中存储一个数字，如下例所示，但不推荐这样做。

message = 100;

## **未定义与未声明的变量** ##

区分未定义和未声明的变量很重要。

未定义变量是已声明的变量。因为我们没有给它赋值，所以变量使用了undefined作为它的初始值。

相反，未声明的变量就是尚未声明的变量。

请参阅以下示例：

var message;
    
    
    console.log(message); // undefined
    console.log(counter); // ReferenceError: counter is not defined

在此示例中，message变量已声明但未初始化，因此其值为undefined，而counter变量尚未声明，因此，访问它会导致ReferenceError。

## **全局和局部变量** ##

在 JavaScript 中，所有变量都存在于一个范围内，该范围决定了变量的生命周期以及代码的哪一部分可以访问它们。

JavaScript 主要有全局作用域和函数作用域。ES6 引入了一个新的作用域，称为块作用域。

如果在函数中声明一个变量，JavaScript 会将变量添加到函数作用域中。如果您在函数外部声明变量，JavaScript 会将其添加到全局作用域。

在 JavaScript 中，您可以按如下方式定义一个函数：

function functionName() {
      // logic
    }

并使用以下语法调用该函数：

functionName();

您将在函数教程中更详细地了解函数。

以下示例定义了一个名为say的函数，该函数具有一个名为message的局部变量。

function say() {
      var message = "Hi";
      return message;
    }

该message变量是一个局部变量。换句话说，它只存在于函数内部。

如果您尝试访问message函数的外部，如下面的示例所示，您将得到 a，ReferenceError因为该message变量未定义：

function say() {
        var message = 'Hi';
    }
    console.log(message); // ReferenceError

## **可变阴影** ##

请参阅以下示例：

// global variable
    var message = "Hello";
    function say() {
        // local variable
        var message = 'Hi';
        console.log(message); // which message?
    }
    say();// Hi
    console.log(message); // Hello

在这个例子中，我们有两个共享相同名称的变量：message。 第一个message变量是全局变量，而第二个变量是局部变量。

在say()函数内部，全局消息变量被隐藏。它不能在say()函数内部访问，但可以在函数外部访问。这称为可变阴影。

## **访问函数内部的全局变量** ##

请参阅以下示例：

// global variable
    var message = "Hello";
    function say() {
        // local variable
        message = 'Hi';
        console.log(message); // which message?
    }
    say();// Hi
    console.log(message); // Hi

在这个例子中，我们定义了一个名为message的全局变量。在say()函数中，我们通过message省略var关键字来引用全局变量，并将其值更改为字符串 Hi。

尽管可以在函数内部引用全局变量，但不建议这样做。这是因为全局变量很难维护并且可能会引起很多混乱。

## **非严格模式** ##

下面的示例定义了一个函数并声明了一个变量message。但是，var不使用关键字。

function say() {
        message = 'Hi'; // what?
        console.log(message);
    }
    say(); // Hi
    console.log(message); // Hi

当您执行脚本时，它会在输出Hi中输出两次字符串。

因为当我们调用say()函数时，JavaScript 引擎会查找message在函数作用域内命名的变量。

结果，它找不到任何使用该名称声明的变量，因此它会进入下一个直接作用域，在这种情况下是全局作用域，并询问message是否已声明该变量。

因为 JavaScript 引擎找不到任何命名的全局变量，所以message它创建了一个具有该名称的新变量并将其添加到全局范围。

## **严格模式** ##

为了避免由于省略var关键字而在函数内部意外创建全局变量，您可以通过使用"use strict";严格模式在 JavaScript 文件（或函数）的开头添加来，如下所示：

"use strict";
    
    
    function say() {
        message = 'Hi'; // ReferenceError
        console.log(message);
    }
    say(); // Hi
    console.log(message); // Hi

从现在开始，您应该始终在 JavaScript 代码中使用严格模式来消除一些 JavaScript 静默错误并使您的代码运行得更快。

## **JavaScript 变量提升** ##

在执行 JavaScript 代码时，JavaScript 引擎会经历两个阶段：

1.  解析
2.  执行

在解析阶段，如果变量是全局变量，JavaScript 引擎会将所有变量声明移至文件顶部，如果变量在函数中声明，则移至函数顶部。

在执行阶段，JavaScript 引擎为变量赋值并执行代码。

提升是一种机制，JavaScript 引擎将所有变量声明移动到其作用域的顶部，无论是函数作用域还是全局作用域。

如果使用var关键字声明变量，则该变量会被提升到其封闭作用域的顶部，无论是全局作用域还是函数作用域。

因此，如果您在声明之前访问变量，则该变量的计算结果为undefined。

请参阅以下示例：

console.log(message); // undefined
    var message;

JavaScript 引擎将message变量的声明移到顶部，因此上面的代码等效于以下内容：

var message;
    console.log(message); // undefined

如果没有提升，你会得到一个ReferenceError，因为你引用了一个未定义的变量。

看另一个例子：

console.log(counter);
    var counter = 100;

JavaScript 引擎仅将变量的声明移至顶部。但是，它保持变量的初始分配保持不变。因此，上面的代码等价于下面的代码：

var counter;
    console.log(counter); // undefined
    counter = 100;

提升使用冗余var声明而没有任何惩罚：

var counter;
    var counter;
    counter = 1;
    console.log(counter); // 1

## **使用let和const关键字** ##

从 ES6 开始，您可以使用let关键字来声明一个或多个变量。该let 关键字是类似的var关键字。但是，使用let关键字声明的变量是块范围的，而不是函数或全局范围的var关键字。

JavaScript 中的块用花括号 ( \{ \} ) 表示。例如，if...else, do...while, 或forloop 语句创建一个块。

下面的示例tmp在由花括号包围的块中声明变量\{\}。

该tmp变量只存在该块的内部。因此，如果您在块外引用它，您将得到一个ReferenceError.

var a = 20, b = 10;
    {
        let tmp = a;
        a = b;
        b = tmp;
    }
    console.log(tmp); // ReferenceError

该const关键字的工作方式类似于let关键字，但你声明变量，必须立即用值初始化，并且该值不能改变之后。

const pi= 3.14;
    pi = 3.141; // TypeError: `code` is read-only

代码语言：JavaScript ( javascript )

现在，您应该对 JavaScript 变量的工作原理有了一个很好的了解。

#  #

**阅读推荐**

[【JavaScript教程】第一章入门01——认识JavaScript][JavaScript_01_JavaScript]

[【JavaScript教程】第一章入门02—JavaScript代码编辑器及网页开发工具][JavaScript_02_JavaScript]

[【JavaScript 教程】第一章入门03— Hello World 示例][JavaScript _03_ Hello World]

[【JavaScript 教程】第二章基础知识01—JavaScript 语法][JavaScript _01_JavaScript]

#  #

**学习更多技能**

**请点击中国公众号**

![d488d02e96ae5c60aa32e61ed34bf041.gif][]

![770678597a9d97a339983be7a6882f9a.png][]

![b418605c0d0d4aed30843e903e4b51f2.png][]

[a908741d562032dc1068f2d42bc54a67.png]: /images/20220828/c3c6d42ab744456e9b43c5f80b7cd3c9.png
[JavaScript _01_JavaScript]: https://blog.csdn.net/dairuyu19971011/article/details/82937156
[JavaScript_01_JavaScript]: https://blog.csdn.net/sysuzjz/article/details/42341589
[JavaScript_02_JavaScript]: https://blog.csdn.net/qq_28849581/article/details/111604130
[JavaScript _03_ Hello World]: https://blog.csdn.net/weixin_43106777/article/details/102609372
[d488d02e96ae5c60aa32e61ed34bf041.gif]: /images/20220828/38d92dc9baf94746a31cfb2c2020990e.png
[770678597a9d97a339983be7a6882f9a.png]: /images/20220828/49219d0cb44f4d56b424a78d0ee0b147.png
[b418605c0d0d4aed30843e903e4b51f2.png]: /images/20220828/8d28e569b9cc4240af1a7504c0029a62.png