现代 JavaScript 教程 — 重学变量

什么是变量

大多数状况下，JavaScript 应用须要处理信息。这有两个例子：

1. 一个网上商店 —— 这里的信息可能包含正在售卖的商品和购物车。
2. 一个聊天应用 —— 这里的信息可能包括用户和消息等等。

变量就是用来储存这些信息的。

变量

变量 是数据的“命名存储”。咱们可使用变量来保存商品、访客和其余信息。

在 JavaScript 中建立一个变量，咱们须要用到 let 关键字。

下面的语句建立（也能够称为 声明 或者 定义）了一个名称为 “message” 的变量：

let message;
复制代码

如今，咱们能够经过赋值操做符 = 为变量添加一些数据：

let message;

message = 'Hello'; // 保存字符串
复制代码

如今这个字符串已经保存到与该变量相关联的内存区域了，咱们能够经过使用该变量名称访问它：

let message;
message = 'Hello!';

alert(message); // 显示变量内容
复制代码

简洁一点，咱们能够将变量定义和赋值合并成一行：

let message = 'Hello!'; // 定义变量，而且赋值

alert(message); // Hello!
复制代码

也能够在一行中声明多个变量：

let user = 'John', age = 25, message = 'Hello';
复制代码

看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

多行变量声明有点长，但更容易阅读：

let user = 'John';
let age = 25;
let message = 'Hello';
复制代码

一些程序员采用下面的形式书写多个变量：

let user = 'John',
  age = 25,
  message = 'Hello';
复制代码

……甚至使用“逗号在前”的形式：

let user = 'John'
  , age = 25
  , message = 'Hello';
复制代码

技术上讲，这些变体都有同样的效果。因此，这是个我的品味和审美方面的问题。

使用 var 而不是 let

在较旧的脚本中，你也可能发现另外一个关键字 var，而不是 let：

var message = 'Hello';
复制代码

var 关键字与 let 大致 相同，也用来声明变量，但稍微有些不一样，也有点“老派”。

let 和 var 之间有些微妙的差异，但目前对于咱们来讲并不重要。咱们将会在 古老的 var 这一章节中介绍它们。

一个现实生活的类比

若是将变量想象成一个“数据”的盒子，盒子上有一个惟一的标注盒子名字的贴纸。这样咱们能更轻松地掌握“变量”的概念。

例如，变量 message 能够被想象成一个标有 "message" 的盒子，盒子里面的值为 "Hello!"：

咱们能够在盒子内放入任何值。

而且，这个盒子的值，咱们想改变多少次，就能够改变多少次：

let message;

message = 'Hello!';

message = 'World!'; // 值改变了

alert(message);
复制代码

当值改变的时候，以前的数据就被从变量中删除了：

咱们还能够声明两个变量，而后将其中一个变量的数据拷贝到另外一个变量。

let hello = 'Hello world!';

let message;

// 将字符串 'Hello world' 从变量 hello 拷贝到 message
message = hello;

// 如今两个变量保存着相同的数据
alert(hello); // Hello world!
alert(message); // Hello world!
复制代码

函数式编程语言

有趣的是，也存在禁止更改变量值的 函数式 编程语言。好比 Scala 或 Erlang。

在这种类型的语言中，一旦值保存在盒子中，就永远存在。若是你试图保存其余值，它会强制建立一个新盒子（声明一个新变量），没法重用以前的变量。

虽然第一次看上去有点奇怪，可是这些语言有很大的发展潜力。不只如此，在某些领域，好比并行计算，这个限制有必定的好处。研究这样的一门语言（即便不打算很快就用上它）有助于开阔视野。

变量命名

JavaScript 的变量命名有两个限制：

1. 变量名称必须仅包含字母，数字，符号 $ 和 _。
2. 首字符必须非数字。

有效的命名，例如：

let userName;
let test123;
复制代码

若是命名包括多个单词，一般采用驼峰式命名法（camelCase）。也就是，单词一个接一个，除了第一个单词，其余的每一个单词都以大写字母开头：myVeryLongName。

有趣的是，美圆符号 '$' 和下划线 '_' 也能够用于变量命名。它们是正常的符号，就跟字母同样，没有任何特殊的含义。

下面的命名是有效的：

let $ = 1; // 使用 "$" 声明一个变量
let _ = 2; // 如今用 "_" 声明一个变量

alert($ + _); // 3
复制代码

下面的变量命名不正确：

let 1a; // 不能以数字开始

let my-name; // 连字符 '-' 不容许用于变量命名
复制代码

区分大小写

命名为 apple 和 AppLE 的变量是不一样的两个变量。

容许非英文字母，但不推荐

可使用任何语言，包括西里尔字母（cyrillic letters）甚至是象形文字，就像这样：

let имя = '...';
let 我 = '...';
复制代码

技术上讲，彻底没有错误，这样的命名是彻底容许的，可是用英文进行变量命名是国际传统。哪怕咱们正在写一个很小的脚本，它也有可能有很长的生命周期。某个时候，来自其余国家的人可能会阅读它。

保留字

有一张 保留字列表，这张表中的保留字没法用做变量命名，由于它们被用于编程语言自己了。

好比，let、class、return、function 都被保留了。

下面的代码将会抛出一个语法错误：

let let = 5; // 不能用 "let" 来命名一个变量，错误！
let return = 5; // 一样，不能使用 "return"，错误！
复制代码

未采用 use strict 下的赋值

通常，咱们须要在使用一个变量前定义它。可是在早期，咱们能够不使用 let 进行变量声明，而能够简单地经过赋值来建立一个变量。如今若是咱们不在脚本中使用 use strict 声明启用严格模式，这仍然能够正常工做，这是为了保持对旧脚本的兼容。

// 注意：这个例子中没有 "use strict"

num = 5; // 若是变量 "num" 不存在，就会被建立

alert(num); // 5
复制代码

上面这是个糟糕的作法，严格模式下会报错。

"use strict";

num = 5; // 错误：num 为定义
复制代码

常量

声明一个常数（不变）变量，可使用 const 而非 let：

const myBirthday = '18.04.1982';
复制代码

使用 const 声明的变量称为“常量”。它们不能被修改，若是你尝试修改就会发现报错：

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // 错误，不能对常量从新赋值
复制代码

当程序员能肯定这个变量永远不会改变的时候，就可使用 const 来确保这种行为，而且清楚地向别人传递这一事实。

大写形式的常数

一个广泛的作法是将常量用道别名，以便记住那些在执行以前就已知的难以记住的值。

使用大写字母和下划线来命名这些常量。

例如，让咱们以所谓的“web”（十六进制）格式为颜色声明常量：

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...当咱们须要选择一个颜色
let color = COLOR_ORANGE;
alert(color); // #FF7F00
复制代码

好处：

• COLOR_ORANGE 比 "#FF7F00" 更容易记忆。
• 比起 COLOR_ORANGE 而言，"#FF7F00" 更容易输错。
• 阅读代码时，COLOR_ORANGE 比 #FF7F00 更易懂。

何时该为常量使用大写命名，何时进行常规命名？让咱们弄清楚一点。

做为一个“常数”，意味着值永远不变。可是有些常量在执行以前就已知了（好比红色的十六进制值），还有些在执行期间被“计算”出来，但初始赋值以后就不会改变。

例如：

const pageLoadTime = /* 网页加载所需的时间 */;
复制代码

pageLoadTime 的值在页面加载以前是未知的，因此采用常规命名。可是它仍然是个常量，由于赋值以后不会改变。

换句话说，大写命名的常量仅用做“硬编码（hard-coded）”值的别名。

正确命名变量

谈到变量，还有一件很是重要的事。

一个变量名应该有一个清晰、明显的含义，对其存储的数据进行描述。

变量命名是编程过程当中最重要且最复杂的技能之一。快速地浏览变量的命名就知道代码是一个初学者仍是有经验的开发者写的。

在一个实际项目中，大多数的时间都被用来修改和扩展示有的代码库，而不是从头开始写一些彻底独立的代码。当一段时间后，咱们作完其余事情，从新回到咱们的代码，找到命名良好的信息要容易得多。换句话说，变量要有个好名字。

声明变量以前，多花点时间思考它的更好的命名。你会受益良多。

一些能够遵循的规则

• 使用易读的命名，好比 userName 或者 shoppingCart。
• 离诸如 a、b、c 这种缩写和短名称远一点，除非你真的知道你在干什么。
• 变量名在可以准确描述变量的同时要足够简洁。很差的例子就是 data 和 value，这样的名称等于什么都没说。若是可以很是明显地从上下文知道数据和值所表达的含义，这样使用它们也是能够的。
• 脑海中的术语要和团队保持一致。若是站点的访客称为“用户”，则咱们采用相关的变量命名，好比 currentUser 或者 newUser，而不要使用 currentVisitor 或者一个 newManInTown。

听上去很简单？确实如此，可是在实践中选择一个一目了然的变量名称并不是如此简单。大胆试试吧。

重用仍是新建

最后一点，有一些懒惰的程序员，倾向于重用现有的变量，而不是声明一个新的变量。

结果是，这个变量就像是被扔进不一样东西盒子，但没有改变它的贴纸。如今里面是什么？谁知道呢。咱们须要靠近一点，仔细检查才能知道。

这样的程序员节省了一点变量声明的时间，但却在调试代码的时候损失数十倍时间。

额外声明一个变量绝对是利大于弊的。

现代的 JavaScript 压缩器和浏览器都很够很好地对代码进行优化，因此不会产生性能问题。为不一样的值使用不一样的变量能够帮助引擎对代码进行优化。

总结

咱们可使用 var、let 或 const 声明变量来存储数据。

• let — 现代的变量声明方式。
• var — 老旧的变量声明方式。通常状况下，咱们不会再使用它。可是，咱们会在 info:var 章节介绍 var 和 let 的微妙差异，以防你须要它们。
• const — 相似于 let，可是变量的值没法被修改。

变量应当以一种容易理解变量内部是什么的方式进行命名。

做业题

先本身作题目再看答案。

1. 使用变量

重要程度：⭐️⭐️

1. 声明两个变量：admin 和 name。
2. 将值 "John" 赋给 name。
3. 从 name 变量中拷贝其值给 admin。
4. 使用 alert 显示 admin 的值（必须输出 "John"）。

答案：

下面的代码，每一行都对应着任务列表中的对应项。

let admin, name; // 一次声明两个变量。

name = "John";

admin = name;

alert( admin ); // "John"
复制代码

2. 给出正确的名字

重要程度：⭐️⭐️⭐️

1. 使用咱们的星球的名字建立一个变量。你会怎么命名这个变量？
2. 建立一个变量来存储当前浏览者的名字。你会怎么命名这个变量？

答案：

表明咱们星球的变量，这很简单：

let ourPlanetName = "Earth";
复制代码

注意，咱们也能够用一个更简短的名字 planet，但这样可能并不能表达清楚它指的是哪一个星球。再啰嗦一点也挺好的。至少让这个变量别太长就行。

网站当前访问者的名字：

let currentUserName = "John";
复制代码

一样，若是咱们的确知道用户就是当前的用户的话，咱们可使用更短的变量名 userName。

现代编辑器的自动补全可让长变量名变得容易编写。不要浪费这个特性。一个名字中包含三个词挺好的。

若是你的编辑器没有合适的自动补全功能，换 一个新的吧。

3. 大写的常量？

重要程度：⭐️⭐️⭐️️⭐️

检查下面的代码：

const birthday = '18.04.1982';

const age = someCode(birthday);
复制代码

这里咱们有一个 birthday 日期常量和经过一些代码（为了保持简短这里没有提供，由于这些细节在这可有可无）从 birthday 计算出的 age 常量。

对于 birthday 使用大写方式正确吗？那么 age 呢？或者二者都用？

const BIRTHDAY = '18.04.1982'; // 使用大写？

const AGE = someCode(BIRTHDAY); // 使用大写？
复制代码

答案：

咱们一般用大写字母表示“硬编码（hard-coded）”的常量。或者，换句话说就是，当值在执行以前或在被写入代码的时候，咱们就知道值是什么了。

在这个代码中 birthday 确实是这样的。所以咱们可使用大写。

在对照组中，age 是在程序运行时计算出的。今天咱们有一个年龄，一年之后咱们就会有另外一个。它在某种意义上不会随着代码的执行而改变。但与 birthday 相比，它仍是有必定的可变性：它是计算出来的，所以咱们应该使用小写。

---

现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程。

在线免费阅读：zh.javascript.info/

---

扫描下方二维码，关注微信公众号「技术漫谈」，订阅更多精彩内容。