[Week2] 給自己看的 JavaScript 筆記-變數


Posted by 生菜 on 2020-07-01

前言

雖然時間已經來到第三週了,不過這篇的內容都是第二週的進度。先求有再求好,因此目標是記錄學習過程中重要概念,以及自己覺得新或之後方便回來的資料。
更新紀錄:
2020/06/30 時間不夠,兩小時寫完筆記挑戰。

上篇沒提到的運算子

其他運算子可以參考上一篇:[Week2] JavaScript 基礎 -運算

都是'=',有什麼差

符號 功能 例子
= 賦值 var a = 2
== 等於 2 + 3 == 5 > true
=== 等於(含型態相等) 3 === '3' > false
!== 不等於 2 * 2 !== 3 > true

小技巧: 為了避免奇怪的 Bug ,判斷等式時盡量使用 ===

指派運算子

符號 例子 實際上在做什麼
+= a += b a = a + b
-= a -= b a = a - b
* = a * = b a = a * b
/= a /= b a = a / b
%= a %= b a = a % b
++ a++ a = a + 1
-- a-- a = a - 1

另外 ++a 也代表 a += 1--a 也代表 a -= 1 。放前後的差別如下:

var a = 0
console.log(a++ && 30)
> false
console.log(a)
> 1

上面例子中, console.log(a++ && 30) 可以解讀成 console.log(a && 30) 然後再 a+=1

var a = 0
console.log(++a && 30)  //先執行 a+=1 再 console.log(a && 30)
> true
console.log(a)
> 1

通常一句話中只會有一個 a++a-- ,才不會有判斷先後順序的問題。

變數

JavaScripts 中,宣告變數的方法如下

var 變數名稱 = 變數內容

可以先將變數想像成一個箱子,裝著內容(的記憶體位置)。

變數命名

記得培養好好命名的習慣,如果每個變數都只叫 a 或 b ,事後回來看會很難辨別,連自己都搞不清楚。

  • 變數名稱大小寫有差別
  • 不能用數字開頭,保留字和特殊符號也盡量避免
  • undefine 代表有宣告變數,但沒有內容; not define 代表該變數沒有被宣告過。
  • 常見的變數命名方法,用哪種都沒關係,但記得要統一比較好閱讀。
    1. 用底線分格,如 this_is_a_box
    2. 用大小寫區分,如 thisIsABox

變數的型態

輸入 type (變數名稱) 可以得到變數的型態,型態可以分為以下幾種:

型態 例子
boolean true, false
number 1, 2, 999, -3.2
string '字串', '30', 'hello'
object [1, 2, 'a'], {a: 1}, null
undefine undefine
function 所有 function

陣列

陣列可適用於重複性高的事務,例如老師希望你輸入全班成績,只用變數的話會變成:

var number1 = 90
var number2 = 33
var number3 = 82
...

不如包成一個陣列:

var scores = [90, 33, 82, ...]

陣列的形式是:

陣列名稱 = [ 第 0 個內容, 第 1 個內容, 第 2 個內容, ...]

JavaScript 中,所有索引值(位置)都是 0 開始。

以下是基礎的陣列用法:

var 陣列名稱 = [ 第 0 個內容, 第 1 個內容, 第 2 個內容, ...]
陣列名稱[索引值] = 內容  //增加或改變陣列內容
陣列名稱.push(內容) //將內容增新到陣列尾端
陣列名稱.length //得到陣列長度(有幾個元素)

物件

如果只是登記同學成績,陣列好像就夠了。但老師看你好像很熟悉 JaveScript ,進一步拜託你登記每位同學的名字、電話和成績。如果每種類別都用一個陣列好像太冗了,此時就可以使用物件:

var 物件名稱 = {
  key0 : value0;
  key1 : value1;
  ...
}

以上 value 的部分可以放值、字串、陣列、物件或甚至一個函式。當然物件也能和陣列一同使用,例如以下每位學生就是一個物件:

var students = [ peter, mary, ...]
var peter = {
  name: 'Peter'
  phone: '0922'
  score: 100
}

叫出 value 的方法有兩種: 物件名稱['key']物件名稱.key

var peter = {
  name: 'Peter'
  phone: '0922'
  score: 100
}
console.log(peter[name])
> Peter

peter[score] = 88
console.log(peter)
> {
  name: 'Peter'
  phone: '0922'
  score: 88
}

變數運算

  1. 字串 + 字串,會將字串拼接起來。例如 'hello' + 'world' > 'helloworld'
  2. 數字 + 字串,會將數字轉成字串接起來。例如 10 + '20' > '1020'
  3. 浮點數誤差。因為 JavaScript 儲存小數時並不精準,可能 0.2 其實是 0.2000000004 ,因此小數相加要用其他方法。例如 0.2 + 0.3 === 0.5 > false

判斷式

判斷式的形式如下:

if (條件) {  //如果條件為 true 則執行下方內容
  執行內容
} else if(條件) {  //可有可無,也可以有很多個
  執行內容
} else {  //上面都不滿足的話就執行下方內容
  執行內容
}

例如判斷考試成績是否及格:

var score = 79
if (score >= 80){
  console.log('Great!')
} else if (score >= 60){
  console.log('pass')
} else {
  console.log('fail')
}
> pass

若在條件處運算,則會先完成運算後再依照運算結果回傳真假。

太多選擇:switch case

如果今天太多條件要判斷,例如要是變數是 1 ,就回傳 一月2 就是 二月 ,以此類推。這時要是使用 if 判斷式,就要寫 12 次了?這種情況可以用 switch case 解決:

var month = 6
switch(month){
  case 1:    // case + 條件
    console.log('一月')
    break  //如果不加的話滿足 1 就會直接繼續執行下面指令
  case 2:
    console.log('二月')
    break
  ...
  default:  //都不符合的話
    console.log('x')
}
> 六月

當然這種情況也可以用陣列解決:

var monthToChinese = ['一月', '二月', '三月', ...]
console.log(monthToChinese[month - 1]) 
//因為陣列索引值從 0 開始算,但月份是從 1 開始

更簡潔的寫法:三元運算子

相反的,如果只是要判斷是否,就可以使用 ternary :

(條件)? (true回傳值): (false回傳值)
//例子:判斷是否及格
var score = 59
var isPass = (score >= 60)? 'pass': 'fail'
console.log(isPass)
> fail

兩小時挑戰結果

失敗?

本來希望能將迴圈、函式、常用內建函式、物件在電腦中的保存方式及其他觀念一起記錄下來,不過第一次寫到這裡時已經兩個小時了。因此明天會開一小時挑戰把剩下概念筆記完。
很喜歡這種截稿的緊張感,番茄醬工作法屢試不爽(等等)










Related Posts

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段二:專題研討+協作練習專案)

AppWorks School Batch #16 Front-End Class 學習筆記&心得(駐點階段二:專題研討+協作練習專案)

3. java 17  範例目錄

3. java 17 範例目錄

HTML 起手式

HTML 起手式


Comments