• 欢迎访问天天编码网站,Java技术、技术书单、开发工具,欢迎加入天天编码
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏天天编码吧
  • 我们的淘宝店铺已经开张了哦,传送门:https://shop145764801.taobao.com/

2.4 变量

JS 教程 tiantian 849次浏览 0个评论 扫描二维码

在绝大多数情况下,JavaScript 应用都需要处理信息或数据。比如,我们看两个例子:

  1. 一个在线商店——需要处理的信息和数据包括待出售的商品和购物车。
  2. 一个聊天应用——需要处理的信息和数据包括用户、消息等等。

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

变量

一个变量就是数据的一个命名的存储地址。使用变量,我们可以存储商品、访问者等等信息。

在 JavaScript 中,为了创建一个变量,我们需要使用 let 关键字。

下面的示例语句创建(也可以说是:声明或者定义)了一个名为 “message” 的变量:

let message;

现在,通过使用赋值操作符: =,可以将某些数据存储到该变量中:

let message;

message = 'Hello'; // store the string

这样以后,字符串”Hello” 就被存储在了与变量”message” 相关联的内存空间中了。通过这个变量”message”,我们可以访问到该字符串数据:

let message;
message = 'Hello!';

alert(message); // shows the variable content

有时,为了代码简洁性,我们可以合并变量定义和变量赋值为一条语句:

let message = 'Hello!'; // define the variable and assign the value

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 vs let

在一些旧代码中,你可以发现一个与 let 功能基本类似的关键词 var:

var message = 'Hello';

var 关键词的功能与 let 基本上是一样。它也可以定义一个变量,但是是以一种老式风格的方式。

虽然 var 和 let 存在着某些微妙的差别,但是并不会对本教程造成较大影响。我们将在本教程的后续章节——老式关键词: “var”,对它们之间的联系与区别进行详细剖析。

一个来自生活的类比

如果我们把变量想象成为一个可以存放数据的盒子,而且这个盒子具有一个独一无二的名字粘贴在上面,那么我们就可以很容易地抓住变量的核心概念。

我们直接来看示例,变量 “message” 可以被看作为一个贴有 “message” 标签的盒子,同时,该盒子中存放了值 “Hello!”:

2.4 变量

实际上,我们将任何值存放到该盒子中。

当然,我们也可以改变盒子中的值。而且改变的次数不受限制,只要业务需要。

let message;

message = 'Hello!';

message = 'World!'; // value changed

alert(message);

当盒子中的数据发生变化的时候,旧的数据就从盒子中被移除了:

2.4 变量

而且,我们还可以定义两个变量,并且将数据在它们之间进行移动。

let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message
message = hello;

// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!

函数式语言 有趣的是,不是所有的函数式语言都支持修改变量的值,比如,Scala 和 Erlang就不能修改变量的值。

在这类语言中,一旦数据(值)被存放在盒子(变量)中,该数据就永远地存放在该盒子中了。如果我们需要存放一些其他的数据,该类数据强迫开发者必须创建新的盒子(定义一个新变量)。开发者不能重用旧的变量。

在接触此类语法特性的初期,开发者可能会感到少许的不习惯和奇怪。但是,这类语言非常适合于进行严密、安全的应用开发。除此之外,在并行开发领域,变量的这种不可修改性同样可以带来非常大的好处,特别是在安全和简单方面。推荐读者学习一门这样的语言(即使并不打算立即投入使用该语言),可以极大地开阔大家的编程思维。

变量的命名

JavaScript 中的变量命名,存在两个主要的主要的限制:

  1. 变量名只能包含字母,数字和美元符号”$”与下划线符号”_”。
  2. 变量名的第一个字符必须不能是数字。

有效的变量名,比如:

let userName;
let test123;

当变量名中包含多个单词的时候,业界普遍采用 驼峰式拼写法。这个拼写法是指:除了首单词之外,其余的每个单词都需要首字符大写,比如,myVeryLongName。

值得注意的是:美元符号”$”与下划线符号”_” 也都可以是变量名的一部分。对于 JavaScript 变量名而言,它们只是普通的字符,并没有什么特殊的含义。

我们看几个有效的变量名:

let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"

alert($ + _); // 3

再来看几个错误的变量名:

let 1a; // cannot start with a digit

let my-name; // a hyphen '-' is not allowed in the name

大小写相关

“apple” 和 “AppLE” 是两个不同的变量名。

允许使用非英文的字符,但是极不推荐

变量名可以使用任何语言的字符,包括西里尔字符,甚至是象形文字,就像如下所示:

let имя = '...';
let  = '...';

就语法的角度而言,上述的两个变量定义都是正确有效的,但是,国际上的通用做法,业界都是只使用英文字符作为变量名。即使我们编写的只是一个非常小的脚本,它还是有可能存活很久,发挥巨大的作用。而且,来自于其他国家的开发者可能需要阅读这个小脚本。

保留字

由于 JavaScript 语言本身使用了一系列的变量名来作为关键字等,这些关键字也成为“保留字”,所以,开发者在命名自建变量的时候,不能与语言的保留字相同。

举了例子,像 letclassreturnfunction 等都是保留字。

如下的代码片段中包含有语法错误:

let let = 5; // can't name a variable "let", error!
let return = 5; // also can't name it "return", error!

非 strict 模式下的赋值操作符

正常情况下,我们在使用一个变量之前,必须首先定义它。但是,在JavaScript的发展初期,在语法上允许只使用一个赋值操作(不使用let关键字),就可以创建出一个新的变量。而且,如果我们不使用 ”use strict“,也就是不使用 strict 模式的话,这种赋值就创建变量的魔法依然存在。这种行为是为了让 JavaScript 引擎兼容就代码。

// note: no "use strict" in this example

num = 5; // the variable "num" is created if didn't exist

alert(num); // 5

其实,这是一个非常差的编程实践,同样的代码工作在 strict 模式时,会产出错误:

"use strict";

num = 5; // error: num is not defined

常量

如果需要在 JavaScript 中定义一个常量(不可修改),开发者应该使用 const 代替 let:

const myBirthday = '18.04.1982';

使用 const 声明的变量被称之为“常量”。常量不能被修改。如果尝试去修改它,对导致一个错误:

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

当开发者认为某个变量不应该被修改时,开发者可以使用 const 去保证该变量的不可修改性,而且其他的开发者也可以发现这个提示。

常量名大写

对于那些在程序执行之前,就可以获知其值,并且难以记忆的那些不可变值,业界的一个通用编程实践是使用常量来代表它们。

对于这种类型的常量,最佳的编程实践是使用大写字符和下划线来命名它们。

比如:

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

// ...when we need to pick a color
let color = COLOR_ORANGE;
alert(color); // #FF7F00

这样命名常量的好处有:

  • COLOR_ORANGE 比 "#FF7F00" 更加便于人类记忆。
  • "#FF7F00" 比 COLOR_ORANGE 更容易让人拼写错误。
  • COLOR_ORANGE 比 "#FF7F00" 的可读性要好。

那么问题来了,对于常量,开发者什么时候应该使用大写常量名呢?什么时候应该使用普通的产量名呢?

作为一个“常量”,这仅仅意味着该变量的值是不可以改变的。但是,存在这样特殊的一类常量:它们的值在脚本运行之前就已经可获知,比如代表红颜色的十六进制值。而其他的一类常量:它们的值是在程序运行过程中计算出来的,并且在赋值之后就不再允许修改。

举个例子:

const pageLoadTime = /* time taken by a webpage to load */;

变量“pageLoadTime”的值在页面被加载(程序被运行)之前是未知的,所以该变量名采取普通的变量名。但是,改变了仍然是一个常量,应为它的值不会被修改。

换句话说,大写的变量名只是那些可以硬编码的值的一个别名。

最佳实践

谈到编程中的变量,有一个非常重要的点值得开发者关注。

请给变量取一个清晰的名字。如有必要,建议多花点时间来命名变量。

命名变量是一个非常重要和复杂的编程技能。通过快速一瞥脚本中变量的命名,就可以大致判断出这个脚本是由一个初学编程的菜鸟所写,还是一个具有多年编程经验的大牛所写。

在实际的项目开发中,开发者的大部分时间都花在了修改或者扩展已有老代码的过程中,而不是从零开始创作出新代码。而且,开发者在做了一些其他事情之后,又回到了自己写的旧代码中。此时,如果这些代码具有良好的变量命名,那么查找信息会变得容易许多。

所以,请开发者在命名一个变量之前,一定要仔细考虑好变量的含义与作用。一个好的变量名,将会让你和你的同事生活的更轻松。

下面是一些好的变量命名实践:

  • 使用人类易读易记的名字,比如 “userName”, “shoppingCart”。
  • 不要使用有歧义和过短的名字,比如 “a”, “b”, “c”, 除非你只是在做一些小测试。
  • 尽最大努力让变量名具有描述性和准确性。不好的变量命名示例有:”data” 和 “value”。这样的变量名含义过于广泛了。可能只适用于那些通过当前的上下文信息就可以准确推断出该变量的正确含义情况。
  • 在保持自己风格的情况下,也请符合所在团队的编码规范。如果把一个网站的访问者成为一个”user“,那么我们应该将相关的变量命名为”currentUser“ 和 “newUser” 等,而不是 ”currentVisitor“ 和 ”newManInTown“。

感觉很简单?实际上也确实如此,但在编程实践中,创建一个充满描述和准确的变量名并不简单。努力吧!

重用 或 新建?

最后一个注意点:有一些比较懒惰的程序员,比起创建一个新的变量,他们更倾向于重用已经存在的变量。

这样操作的结果:变量就像是一个盒子,在不改变盒子的标记的情况先,开发者往里面存放过多种不懂的值。那么,变量的当前值是什么呢?谁知道呢?恐怕需要我们自己查看了。

这样的编程实践减少了变量的定义,但是有可能在调试代码上面花费更多的时间。

有时,一个额外的变量定义是有益的,而不是有害的。

现代的 JavaScript 的压缩工具和浏览器都具有很好的代码压缩和优化功能,所以采用新建变量的编程实践并不会对程序性能造成任何问题。对于不同的值,使用不同的变量,可能有助于引擎优化和执行代码。

总结

在JavaScript 脚本中,我们可以定义变量来存储数据。定义变量的关键字有varletconst

  • let 是现代的变量定义关键字。使用了let关键字的代码,必须运行于 strict 模式,才能正常运行于 Chrome(V8) 中。
  • var 是老式的变量定义关键字。一般地,我们已经不使用该关键字了。当然,如果你需要了解 var, 本教程在老式关键词:”var” 章节 中,对其与let关键词的区别进行了详细讲解。
  • const 与 let 非常相似,只是它用来定义常量,一旦赋值,其值不可修改。

变量最好具有一个”望文生义”的名字,给变量取一个好的名字,很重要。

任务


操作变量

importance:2

  1. 定义两个变量:admin 和 name
  2. 把值 "John" 赋值给 name
  3. 把 name 的值拷贝给 admin
  4. 使用 alert 显示变量 admin 的值。(结果应该是 “John”)

正确命名

importance:3

  1. 创建一个表示我们所在星球的变量,你会如何给这个变量命名呢?
  2. 创建一个表示当前访问者的变量,你会如何给这个变量命名呢?

大写变量?

importance:4

查看如下所示的代码片段:

const birthday = '18.04.1982';

const age = someCode(birthday);

此处,我们有一个日期常量,名为 birthday,然后一个利用 birthday 计算而获得的变量,名为 age。(关于如何通过 birthday 计算得到 age 并没有明确给出,不影响代码的演示。)

那么,可以把 birthday 变成大写变量名吗?age 可以吗?还是两个都可以?

const BIRTHDAY = '18.04.1982'; // make uppercase?

const AGE = someCode(BIRTHDAY); // make uppercase?

欢迎在本文评论中给出你的答案!


天天编码 , 版权所有丨本文标题:2.4 变量
转载请保留页面地址:http://www.tiantianbianma.com/valuables.html/
喜欢 (2)
支付宝[多谢打赏]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址