本節書摘來自異步社群《趣學javascript——教孩子學程式設計》一書中的第2章,第2.2節,作者: 【美】nick morgan(摩根)譯者: 李強,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
javascript允許你使用變量給值起個名字。你可以把變量想象為一個盒子,可以把一個東西放進去。如果要在其中放其他的東西,就要把之前的東西取出來。
要建立一個新的變量,使用關鍵字var,後面跟着變量的名稱。關鍵字就是在javascript中有特殊意義的單詞。在這個例子中,輸入var時,javascript知道我們即将輸入一個新的變量名。例如,定義一個名為nick的變量:

我們建立了一個名為nick的新變量。控制台輸出undefined作為回應。這不是一個錯誤!隻要一條指令沒有傳回一個值,javascript就會做出這樣的回應。什麼是傳回值?例如,當我們輸入12345 + 56789;時,控制台會傳回69134。在javascript中,建立一個新的變量不會有傳回值,是以解釋器輸出undefined。
要給變量指派,使用等号:
設定一個值的過程叫作指派(assignment,我們把值12賦給變量age)。列印出來的還是undefined,因為我們建立了另一個新的變量。(在後面的示例中,當輸出是undefined時,我們不再特意顯示出來。)
變量age現在在我們的解釋器中,将其值設定為12。這意味着如果隻輸入age,解釋器會顯示它的值:
很酷!然而,變量的值并不是一成不變的(之是以稱之為變量,是因為它們可以變化),如果想要改變它,隻需要再次使用=:
這次我沒有使用關鍵字var,因為變量age已經存在了。隻有建立新的變量時,才需要使用var,修改變量的值時則不需要var。還要注意的是,由于我們沒有建立新的變量,這條指派語句傳回的是13,并且在下一行中列印出來。
解決前面提到的糖果問題的一個稍微複雜的示例如下所示,該示例沒有使用圓括号:
首先,建立一個名為numberofsiblings的變量,把1+3(javascript計算結果為4)指派給它。然後,建立一個numberofcandies變量,把8指派給它。最後,寫出表達式numberofcandies/numberofsiblings。因為numberofcandies是8,numberofsiblings是4,javascript計算8/4,結果是2。
2.2.1 命名變量
要小心對待變量名稱,因為很容易把它們拼寫錯。即便隻是大小寫錯誤,javascript的解釋器也不會知道我們想表達什麼意思!例如,如果不小心把numberofcandies中的c寫成小寫c,就會得到一個錯誤:
遺憾的是,javascript隻會嚴格地按照你的要求做事情。如果拼寫錯一個變量的名稱,javascript就會不明白你的想法,它會顯示出一條錯誤的資訊。
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。
1天中的秒數
現在,建立一個叫作hoursinaday的變量,把它設定為24。接下來,建立了secondsinaday變量,将它設定為等于secondsinanhour乘以hoursinaday。當我們在①處詢問secondsinaday的值時,得到86400,這是1天中的秒數。
1年中的秒數
最後,建立了變量daysinayear和secondsinayear。把365指派給變量daysinayear,把secondsinaday乘以daysinayear的結果指派給變量secondsinayear。最後,詢問secondsinayear的值,結果是31536000(超過3100萬)。
年齡是多少秒
現在,我們已經知道一年有多少秒了,就可以很容易地計算出你的年齡是多少秒(到最近的年)。例如,我29歲,我是這樣編寫代碼的:
要計算你自己的年齡的秒數,輸入相同的代碼,但是把age的值改為自己的年齡。或者不使用age變量,使用一個數字作為你的年齡,就像下面這樣:
我的年齡是9億多秒!你的年齡是多少秒呢?
2.2.3 遞增和遞減
作為一名程式員,經常需要對數字變量加1或減1。例如,可能有一個變量,用來計算今天收到多少個high-five。每次有人給你high-five,就想要把這個變量加1。
加1叫作遞增,減1叫作遞減。使用操作符++或--來表示增加或減少。
當使用++操作符時,highfives的值加1;當使用--操作符時,highfives的值減1。也可以把這些操作符放在變量之後。這麼做的話,雖然會做同樣的計算,但是傳回值是增加或減少之前的值。
在這個示例中,我們把highfives設定為0。當調用highfives++時,雖然變量遞增,但是列印出來的仍然是增加之前的值。如果檢視highfives最終的值(兩次增加之後),會得到2。
2.2.4 +=(加後指派)和-=(減後指派)
變量要增加特定的值,可以使用如下代碼:
把名為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”)。使用這兩個操作符記錄電子遊戲得分的示例,如下所示:
在這個示例中,通過把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。
試試看
還有一些其他與+=和-=類似的操作符。例如,*=和/=。如何使用它們呢?試一下:
balloons *= 2執行什麼操作?再試一下:
balloons /= 4又執行什麼操作呢?