[JS101] JavaScript - 變數


Posted by yymarlerr on 2021-05-14

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}

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










Related Posts

[IIS] 32位元應用程式,無故異常錯誤合輯

[IIS] 32位元應用程式,無故異常錯誤合輯

[重新理解 C++] Array 和 Pointer 的差異

[重新理解 C++] Array 和 Pointer 的差異

【Day03】CSS選擇器與優先權、Box model以及block、inline element

【Day03】CSS選擇器與優先權、Box model以及block、inline element


Comments