[JS101] JavaScript - 變數

Variable 變數

• 裝東西的箱子，用來存放資訊
• var <變數名稱> = 數值或字串
• var total = 3; var expense = 4; console.log(total + expense) = 7
• = 是賦值的意思
• 在 JavaScript 大小寫有區別
• underfined：有宣告變數，但沒有給值
• is not defined：沒宣告變數
• 變數名稱不能用數字開頭、不能取保留字，例如：var var = 1
• 變數名稱通常用底線 (underscore)：var this_is_a_box = 13 或 駝峰式 (camel case) var apiRespose

介紹運算值

+ -

• var a = 0
  a = a + 5 （等同於 a += 5）
  console.log(a) = 5
• a -= 5 等同於 a = a - 5
• a += 1 等同於 a++ 等同於 a = a + 1
• a -= 1 等同於 a-- 等同於 a = a - 1
• console.log(a++ && 30) =>
  console.log(a && 30)
  a++
  • ++ 放後面，先執行 a 再執行 a++
    console.log(++a && 30) =>
    a++
    console.log(a && 30)
  • ++ 放前面，先執行 a++ 再執行 a

變數的型態

• console.log(typeof <想看的東西>) 用來判斷變數的 type
• 範例：var age = 18
  console.log(typeof age) 會得到 number

Primitive 最原始的類型

• boolean 布林值：true or false
• number 所有數字
• string 字串

  具有 immutable 特性

object

• typeof [1] object
• typeof {a: 1} object
• typeof null object

  null 被認為是一個設計錯誤

undefined

function

Array 陣列

概念

• 很多差不多類型的箱子
• 存性質相似的東西
• [] 索引值
  • 索引可以快速找到自己想要的東西
  • 陣列的第一個元素為 0

    用變數沒辦法用索引去取得資料

• 陣列也可以放不同的東西，唯這樣用不同的變數即可
  

用法：

• var index = 10
  var score = []
  score[0] = 10
  score[1] = 30
  score[2] = 50
  score[3] = 100
  **score[index]**
  

  => var score = [10, 30, 50, 100]

• console.log(score.length): 4

  • length 可以查看陣列的長度，會顯示 4，因為有四個元素
  • console.log(score[score.length]: undefined，因為陣列的元素是從 0 開始
  • console.log(score[score.length - 1]: 100

    可以用來讀取陣列

• • score.push() 或 score[score.length] 把東西放到陣列裡面
  • 舉例：
    var score = [20, 30]
score.push(40)
    => var score = [20, 30, 40]
    *
    var score = [20, 30]
score[score.lenght] = 40
console.log(score) = [20, 30, 40]

Object 物件

{key, value}

var peter = {
  name: "peter"
  score: 100
  address: "Taiepi"
  phone: "092095"
  }
console.log(peter)

和 array 一起用

• var students = []
  var peter = {
     name: "peter"
     score: 100
     address: "Taiepi"
     phone: "092095"
      }
   students.push[peter]
  console.log(students[0])
  

  => 顯示 peter 的資料

拿出物件裡想要的資料

• var students = []
  var peter = {
     name: "peter"
     score: 100
     address: "Taiepi"
     phone: "092095"
  }
  students.push[peter]
  console.log(students[0].name)
  

  =>顯示 peter
  • console.log(peter.name)
  • console.log(peter["name"]: peter
    var key = "name"
console.log(peter[key]): peter

    用 [] 號時，裡面放變數

value 可以放陣列、物件、功能

• var students = []
  var peter = {
   name: "peter"
   score: 100
   address: "Taiepi"
   phone: "092095"
   father: {
     name: "Nick"
     phone: "0977888"
    } 
  }
  console.log(peter.father.name)
  

  => Nick

5/31 補充

• 會印出 value

let object = {}
object['1'] = 'value'
console.log(object[1])

property MDN

變數的運算

須注意型態

• var a = '10'
var b = 20
console.log(a + b): 1020

  數字加字串，會被自動理解成字串相加

  • 用 number(a) 將它變成 10
    console.log(number(a) + b): 30
  • 用 parseInt(a, <進位>)
console.log(parseInt(a, 10) + b): 30
    console.log(parseInt(a, 2) + b): 22

浮點數誤差

• var a = 0.1 + 0.2
console.log(a == 0.3): false
  console.log(a): 0.300000000000000004

  電腦存小數時沒辦法存的那麼精準，有的可以存的精準有的無法，可參考初心者計概
  使用小數需特別注意，盡量不要使用小數

== 與 ====

=

• 賦值
• var a = 10
console.log(a = 1): 1

==

• 判斷兩個值是否相同，但不考慮型態
• var a = 10
console.log(a == 1): false

• var a = 10 == 10
console.log(a): true

  會先執行 10 == 10，在執行 var a = ture
  通常為右執行到左，用括號可自己決定執行順序

===

• 將型態也納入判斷兩值是否相同的考量
• 建議永遠用三個等號，這樣比較不會出錯
• console.log(0 == '0'): true
• console.log(0 === '0'): false
• console.log(0 == ''): true
• console.log(0 == null): false
• console.log(0 === null): false

從 Object (excluding primitive) 的等號真正理解變數

• var obj = { a:1`}
console.log(obj === {a:1}) false

  想像成：當宣告 obj 等於一個物件時，會把物件放在某個地方，而 obj 實際存的是某個記憶體位置，而 JavaScript 沒辦法知道記憶體位置是在哪，故判斷時不會相等，因為記憶體位置不同。

• var obj = { a:1`}
var obj2 = obj

  代表宣變數 obj2 的記憶體位置和 obj 相同，所以 console.log(obj2 === obj: true

obj2.a = 2

會改到此記憶體位置裡面的 a，為改記憶體裡的某一個值

obj2 = {b:1}

給變數一個新的物件，會指向新的記憶體位置