[ week 2 ] 來打造 JaveScript 的基礎 - 變數 與 型別


Posted by vick12052002 on 2020-06-22

變數

在程式設計中,一個 = 等號 是代表「 賦值 」 的意思,
var box = 123 就是把「 123 」這個值,放入 box 這個東西裡,
所以當我們console.log(box),得到的東西就會是 123

特別注意

  • 在 JaveScript 中,英文的大小寫是不一樣的,
    所以你也可以另外宣告 var BOX = 456console.log(BOX)
    得到的東西就會是 456

  • 而且宣告變數是不能用數字作為開頭,例如:var 1one = 1,是會出錯的

當你已經var big宣告一個東西,但並未賦予它值的話,我們console.log(big),得到的東西就會是 undefined

當你試圖console.log(nothing) 你未曾宣告過的東西,回傳的訊息就會是 nothing is not defined

undefined 與 not defined 差異

undefined : 有宣告過,但未賦予它值
not defined : 未曾宣告的東西

變數的命名方式

有兩種方法,重點是要統一方法,而且不要亂命名,最好是清楚好懂的(語意化的方式)

  1. Underscore _底線_
    例如: var this_is_a_box = 10

  2. Camel-Case 駝峰式命名
    例如: var thisIsABox = 10


簡寫 ++ 與 -- 來了

首先,先提到簡寫算式的部分

var a = 0
a = a + 5
console.log (a) => 得到的值就會是 5

我們其實可以將a = a + 5,簡寫成a += 5是一樣的意思

  • ++
    特別的是在 JavaScript 中,a = a + 1 ,不僅可以寫成 a += 1,也可以直接縮寫成a++

         a = a + 1
    等於    a += 1
    又等於   a++
    
  • --
    相對的 -- ,就是減 1 的意思拉。

會有這樣子的簡寫,是因為在程式語言中,很長會使用到 +1 、 -1 的運算值,所以乾脆就給他一個簡寫的方式

a++ ++a 差異
a++ 先執行完,原本的算式,在進行 a+=1
++a 先執行 a+=1 完,再進行原本的算式


資料結構與型別

在最新的 ECMAScript 公告標準的判定的資料結構與型別共有九種,大致上可分為兩種原始值 primitive 的型別與後來延伸的資料結構,如下資料來源MDN

  • 原始值 primitive ,可以使用 typeof operator 確定型別

    • undefined : typeof instance === "undefined"
    • Boolean : typeof instance === "boolean",true or false
    • Number : typeof instance === "number"
    • String : typeof instance === "string"
    • BigInt : typeof instance === "bigint"
    • Symbol : typeof instance === "symbol"
  • 其他

    • null :蠻特別的是 null ,在使用 typeof instance === "object" ,null 得到型別會是 object
    • Object : typeof instance === "object"
    • Function : non data structure, though it also answers for typeof operator: typeof instance === "function"

Array 陣列

在原始的 JavaScript 並沒有 array 這個型別,陣列內可放字串、數字、物件,就是集合大家聚在一起的方法,如果使用 typeof 判別型別,回傳會是 "object"型態。

陣列的呈現方式,是 [ ] 中括號


Object 物件

物件的呈現方式是 {} 大括號,物件可以搭配陣列做使用,因此陣列中可包含物件,如下

var data = []
var nick = {
    key 屬性名稱 : 'value' 內容 ,
    name: 'nick',  
    birth : '1991/12/13/'
}
data.push(nick)

當我們console.log(data[0]),就會印出 nick 的內容
要印出陣列內,key 的 value 值,表示法有兩種,例如

  1. 點的方式

    data[0].key 
    nick.birth
    
  2. 類似陣列的方式 ,如果要動態更改可以,使用變數,建議使用這種方式

    nick['birth']
    //
    var item = 'name'
    nick[item] 會帶入 item 這個變數,算是就會等同於 nick['name']
    

> 切記每個 key 的間隔一定要有 「 , 」逗號做區隔

真正理解變數

使用 typeof 辨別型別, array 與 object 會回傳 ”object“ ,所以我們可以把物件與陣列理解成相同的作法。

在 JavaScript 中,宣告「 陣列 」與「 物件 」時,可以理解成
變數是對「 暫存位置(電腦中記憶體位置)」,指向同一個物件或陣列,
但若對整個變數「 賦予新的值 」,那就會改變指向新的物件,兩者就不會相同。

var obj = {
    a:1,
    b:2,
}
var obj2 = obj  宣告 obj2 就是 obj 時,電腦就會自動去讀取 obj 的暫存位置並帶入物件的值,
console.log (obj2 === obj)  此時會回傳 true
obj2 = {    我們重新宣告 obj2 並賦予它新的值時,此的 obj2 就已經改變,與 obj
    c:23,   的暫存位置不相同,簡單來說就是 obj2 已經是另一個新的東西
    d:12,
}
console.log (obj2 === obj)  此時會回傳 false

萬年經典題 == vs ===

兩者相差在===是嚴格等於,所以會考量「型別」,強烈建議在寫 JavaScript 都使用三個等於,因為在 debugger 時,會比較快判別出,是哪段程式出錯了。


條件 (三元) 運算子

語法: condition ? A True : B False
若條件成立,會回傳 : 前面的值
若條件不成立,則會回傳 : 後面的值

console.log( 10 > 5 ? 'yes': 'no' )
=> yes
console.log( 5 > 10 ? 'yes': 'no' )
=> no

會建議大家如果要使用三元運算子,條件最好是使用一種條件比較,如果要寫成巢狀結構,function 會變得很難讀,不夠直覺。


參考資料

以上為[JS101] 用 JavaScript 一步步打造程式基礎,課堂筆記使用


#條件 (三元) 運算子 #javascript #Variables #Array #object #資料結構 #變數







Related Posts

【Day02】用pytube測試下載 Youtube 影片

【Day02】用pytube測試下載 Youtube 影片

layer-list 應用 - 愛奇藝和當貝市場的 QR Code 掃描外框

layer-list 應用 - 愛奇藝和當貝市場的 QR Code 掃描外框

人性較量Day02~電腦的靈魂

人性較量Day02~電腦的靈魂

七天學會swift - realm 資料庫 Day3

七天學會swift - realm 資料庫 Day3

如何使用 Python 進行字串格式化

如何使用 Python 進行字串格式化

一起用 Google Calendar 與 D3.js 進行年終回顧吧!

一起用 Google Calendar 與 D3.js 進行年終回顧吧!



Comments