JavaScript 变量：初学者指南

您可以在 howtocodejs.com 上访问本课程

如果你曾经有幸（或者不情愿）上过代数1的课，你可能听说过变量。你知道，x + 4 = 6 之类的。别担心。JavaScript 变量没那么可怕。你可以声明它们，这样你就能确切地知道它们是什么。而且，出于对一切神圣事物的热爱，不要把变量命名为 x、y 或 z。给它们起一个容易理解的名字，这样你写完代码后就不会盯着一个二次方程了。 

我们可以将数字、字符串和布尔值想象成 Snapchat 里的照片，它们会在短时间后消失。它们存在的时间太短，不足以发挥作用。如果要使用相同的数据，则必须在 JavaScript 文件中的其他地方重新输入。

想象一下必须一遍又一遍地写下这个公式：1/2(60 * 120);

或者这个很长的字符串："superkalafragilisticespialadocious";。

变量允许我们保存数据，以便我们可以再次使用它。 

让我们声明两个变量

var triangleArea, poppinsQoute;

现在来看看一些要点：

这个var关键字创建了一个全局变量。这就像在公共场合洗澡一样，每个人都能看到你。在 JavaScript 中，我们有区块，就像邻里区块一样。

它们通常看起来像这样：

// brackets enclose the block
{
  //...code goes here
}


if(true){
  // execute code in this block...
}

在 if 语句中，var triangleArea;并且var poppinsQoute;可以在 if 块内访问，因为我们在全局范围内声明了它们。

把范围想象成视角。从外部视角来看，我们无法总是看到某人房子里面的情况。但从内部来看，我们可以看到外面的一切。 

我们不应该能够查看 if 语句内部并查看其局部变量。局部变量是在代码块内声明的变量。

if(3==3){
 var number = 3;
}

注意：在此示例中，我们同时声明并初始化了变量。

还记得我们讨论过的全局变量和局部变量吗？你可能猜到了，如果我们在块之外使用这个变量if，就会报错。

if(3===3){
 var number = 3;
}

console.log(number); // > 3

等等……我们仍然可以访问块外的变量。难道我们刚刚获得了X射线视野？所以所有关于局部变量和全局变量的讨论肯定都是谎言，对吧？ 

好吧，这个关键字的问题var在于它喜欢将自己暴露在全局作用域中。即使它是在块内定义的，它仍然希望被所有人看到。唯一能驯服它的是函数。

function test(){
  var number = 3;
}
console.log(number); // number is not defined

专业提示：能够读懂并理解错误信息对于调试 JavaScript 应用程序至关重要。在我们的例子中，当我们尝试使用未声明的变量时，会发生ReferenceError。如果我们尝试使用超出范围的变量，也会引发 ReferenceError。

我们以后会再讲函数，但现在你只需要知道函数会创建自己的作用域。它们就像戒备森严的豪宅。

函数如此安全，这很好，但是我如何保护 if 语句呢？ 

从 ES6 开始，我们引入了一种新的变量声明方式。Ecma International 时不时地会为我们提出新的 JavaScript 编程方法。他们想出了解决这个问题的方法，那就是let关键字。

我们来使用它吧！

if(3===3){
 let number = 3;
}
console.log(number); // > number is not defined

太棒了！我们得到了一个错误！现在我们真正有了全局变量和局部变量。 

回到我们最初的变量声明，var triangleArea, poppinsQoute;你会发现我们可以同时声明多个变量，只需用逗号分隔即可。另外，注意变量名的第二个单词以大写字母开头。这种约定称为驼峰式命名法。最好遵循这种约定，这样你的代码对你以及将来可能看到你代码的人而言都是清晰易读的。 

任务

您可以通过向变量分配数据来初始化变量。

let poppinsQoute = "superkalafragilisticespialadocious";

console.log(poppinsQoute); // > "superkalafragilisticespialadocious"

您也可以将数据重新分配给同一个变量。这将覆盖之前的数据。

let poppinsQoute = "superkalafragilisticespialadocious";

poppinsQoute = "Mary Poppins, practically perfect in every way.";

console.log(poppinsQoute); // > "Mary Poppins, practically perfect in every way.";

Const：一位永恒的朋友

关键字const是声明变量的另一种方式。如果你想告诉自己和其他开发人员这个变量不应该改变，就可以使用这个关键字。也许我们应该重新声明这个triangleArea变量。

const TRIANGLE_AREA = 1/2(60 * 120);
//If we try to re-assign it, we'll get an error
TRIANGLE_AREA = 1/2(60 * 180); // > Syntax Error
);

您不能将数据重新赋值给常量。惯例是使用全部大写，以便 500 行之后，同一项目上的其他人就能知道您的变量是一个常量。

变量仓库

我们对变量进行了一些尝试，但还没有达到极限。让我们看看变量里能放些什么。

数值语句

const TRIANGLE_AREA = 1/2(60 * 120);

字符串

let poppinsQoute = "superkalafragilisticespialadocious";

布尔值

let true_ = true;

等等。为什么要用下划线？你看，变量名不能和语言设计者已经命名过的名字一样。这些不可更改的名称包括关键字和保留字。另外，确保变量名不要以数字开头：123true。
 

逻辑语句

let check = (2==2&&3==3&&4==4);

括号是为了方便阅读。你可以直接把它插入到 if 语句中，效果会很好。

if(check){
 console.log("true");
}

专业提示：我不需要输入，check === true因为 if 语句会自动检查真实值。

功能

var myFunction = function(){
  return 'hello';
}

函数也可以赋值给变量。这些函数被称为匿名函数，因为它们没有名字。

数组

let myArray = [1,3,4,5];

数组是数据的集合。 

对象

let myObject = {me: "too", save: "me"};

对象也包含数据集合。实际上，JavaScript 中的所有内容都是对象。没错，甚至数据类型也是如此。

无效的

let empty = null;

Null 表示没有任何意义。如果您不希望变量具有类型或值，则可以故意将变量设置为 null。

其他变量

let oldVariable = 25;
let newVariable = oldVariable * 2;

多重变量！

var varOne = varTwo = varThree = 1;

不要在家尝试这种方法，因为它会产生不良副作用。变量赋值是从右到左进行的。因此，为了varOne最终获得值，其他两个变量会被自动推送到全局作用域。这意味着即使是函数也无法将varTwo和识别varThree为局部变量。这被称为泄漏，是绝对不行的。

结束语

变量是永久存在的，所以一定要养成使用它们的习惯。每当你发现自己反复使用同一种数据类型时，试着把它放到变量里。你会很高兴你这么做的。

挑战：编写一个返回变量的函数。不要害怕向 Google 询问任何问题。