《趣学JavaScript——教孩子学编程》——2.2 变量

简介:

本节书摘来自异步社区《趣学JavaScript——教孩子学编程》一书中的第2章,第2.2节,作者: 【美】Nick Morgan(摩根)译者: 李强,更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 变量

JavaScript允许你使用变量给值起个名字。你可以把变量想象为一个盒子,可以把一个东西放进去。如果要在其中放其他的东西,就要把之前的东西取出来。

要创建一个新的变量,使用关键字var,后面跟着变量的名称。关键字就是在JavaScript中有特殊意义的单词。在这个例子中,输入var时,JavaScript知道我们即将输入一个新的变量名。例如,定义一个名为nick的变量:screenshot

我们创建了一个名为nick的新变量。控制台输出undefined作为回应。这不是一个错误!只要一条命令没有返回一个值,JavaScript就会做出这样的回应。什么是返回值?例如,当我们输入12345 + 56789;时,控制台会返回69134。在JavaScript中,创建一个新的变量不会有返回值,所以解释器输出undefined。

要给变量赋值,使用等号:screenshot

设置一个值的过程叫作赋值(assignment,我们把值12赋给变量age)。打印出来的还是undefined,因为我们创建了另一个新的变量。(在后面的示例中,当输出是undefined时,我们不再特意显示出来。)

变量age现在在我们的解释器中,将其值设置为12。这意味着如果只输入age,解释器会显示它的值:screenshot

很酷!然而,变量的值并不是一成不变的(之所以称之为变量,是因为它们可以变化),如果想要改变它,只需要再次使用=:screenshot

这次我没有使用关键字var,因为变量age已经存在了。只有创建新的变量时,才需要使用var,修改变量的值时则不需要var。还要注意的是,由于我们没有创建新的变量,这条赋值语句返回的是13,并且在下一行中打印出来。

解决前面提到的糖果问题的一个稍微复杂的示例如下所示,该示例没有使用圆括号:screenshot

首先,创建一个名为numberOfSiblings的变量,把1+3(JavaScript计算结果为4)赋值给它。然后,创建一个numberOfCandies变量,把8赋值给它。最后,写出表达式numberOfCandies/numberOfSiblings。因为numberOfCandies是8,numberOfSiblings是4,JavaScript计算8/4,结果是2。

2.2.1 命名变量
要小心对待变量名称,因为很容易把它们拼写错。即便只是大小写错误,JavaScript的解释器也不会知道我们想表达什么意思!例如,如果不小心把numberOfCandies中的C写成小写c,就会得到一个错误:
screenshot

遗憾的是,JavaScript只会严格地按照你的要求做事情。如果拼写错一个变量的名称,JavaScript就会不明白你的想法,它会显示出一条错误的信息。
screenshot

JavaScript中变量名称的另一个技巧是,它们不能包含空格,这就意味着它们的可读性很差。我也可以把变量命名成没有大写字母的numberofcandies,但这会使它更难阅读,因为不清楚单词的结尾在哪里。变量是“numb erof can dies”还是“numberofcan dies”呢?没有大写字母,就很难识别。

处理这个问题的一种常见方法是将每个单词首字母大写,就像NumberOfCandies一样。(这种惯例叫作骆驼拼写法,因为看上去有点像是骆驼的驼峰。)

标准的做法是变量以小写字母开头,通常除了第一个单词外,其他单词的首字母都大写,就像是numberOfCandies一样。(在本书中,我将遵循骆驼拼写法惯例,但是你可以自由选择想要的方式!)

2.2.2 使用数学创建新的变量
你可以通过对旧的变量做一些数学运算来创建新的变量。例如,可以使用变量来计算一年有多少秒——以及你的年龄是多少秒!我们先来计算一个小时有多少秒。

1小时中的秒数
首先,创建两个新的变量,分别名为secondsInAMinute和minutesInAnHour,让它们都等于60(因为我们知道1分钟有60秒,1个小时有60分钟)。然后,创建一个叫作secondsInAnHour变量,将它的值设置为secondsInAMinute和minutesInAnHour相乘。在①处,输入secondsInAnHour,就像在说“告诉我现在secondsInAnHour是多少!”。JavaScript随后给出答案:3600。

screenshot

1天中的秒数
现在,创建一个叫作hoursInADay的变量,把它设置为24。接下来,创建了secondsInADay变量,将它设置为等于secondsInAnHour乘以hoursInADay。当我们在①处询问secondsInADay的值时,得到86400,这是1天中的秒数。
screenshot

1年中的秒数
最后,创建了变量daysInAYear和secondsInAYear。把365赋值给变量daysInAYear,把secondsInADay乘以daysInAYear的结果赋值给变量secondsInAYear。最后,询问secondsInAYear的值,结果是31536000(超过3100万)。

screenshot

年龄是多少秒
现在,我们已经知道一年有多少秒了,就可以很容易地计算出你的年龄是多少秒(到最近的年)。例如,我29岁,我是这样编写代码的:
screenshot

要计算你自己的年龄的秒数,输入相同的代码,但是把age的值改为自己的年龄。或者不使用age变量,使用一个数字作为你的年龄,就像下面这样:
screenshot

我的年龄是9亿多秒!你的年龄是多少秒呢?

2.2.3 递增和递减
作为一名程序员,经常需要对数字变量加1或减1。例如,可能有一个变量,用来计算今天收到多少个high-five。每次有人给你high-five,就想要把这个变量加1。

加1叫作递增,减1叫作递减。使用操作符++或--来表示增加或减少。
screenshot

当使用++操作符时,highFives的值加1;当使用--操作符时,highFives的值减1。也可以把这些操作符放在变量之后。这么做的话,虽然会做同样的计算,但是返回值是增加或减少之前的值。
screenshot

在这个示例中,我们把highFives设置为0。当调用highFives++时,虽然变量递增,但是打印出来的仍然是增加之前的值。如果查看highFives最终的值(两次增加之后),会得到2。

screenshot

2.2.4 +=(加后赋值)和-=(减后赋值)
变量要增加特定的值,可以使用如下代码:
screenshot

把名为x的变量的初始值设置为10。然后,把x + 5赋值给x。因为x是10,所以x + 5就是15。我们所做的就是用x原来的值,计算出x的新值。因此,x = x + 5实际上表示的就是“x加上5”。

JavaScript给出了一个更为简便的方法,使用+=和-=操作符,将变量增加或减少一定数量。例如,如果我们有一个变量x,那么x += 5和x = x + 5是一样的。-=操作符的使用方式也相同,所以x -= 9和x = x - 9是一样的(“x减9”)。使用这两个操作符记录电子游戏得分的示例,如下所示:
screenshot

在这个示例中,通过把10赋值给变量score,表示最初的分数是10。然后,我们打败了一个怪物,使用+=操作符增加7分(score += 7和score = score + 7是一样的)。在我们打败怪物之前,分数是10,10+7等于17,所以这次操作会将score设置为17。

在成功击败怪物后,我们又撞到一个陨石,分数要减掉3。score-=3和score=score-3是一样的。因为现在score是17,score - 3等于14,所以为score重新赋值为14。

试试看

还有一些其他与+=和-=类似的操作符。例如,*=和/=。如何使用它们呢?试一下:
screenshot

balloons *= 2执行什么操作?再试一下:
screenshot

balloons /= 4又执行什么操作呢?

相关文章
|
23天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
1月前
|
前端开发 JavaScript 开发者
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
25天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
21 2
|
1月前
|
存储 JavaScript 编译器
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!
|
1月前
|
JavaScript 前端开发 容器
javascript中的变量定义
javascript中的变量定义
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式