[學習筆記] 邊學邊寫 JavaScript 30天 (21)：變數 III

2022 iThome 鐵人賽

DAY 21

Modern Web

[學習筆記] 邊學邊寫 JavaScript 30天系列第 21 篇

14th鐵人賽

LeeFang

團隊好想工作室 v6.0

2022-10-06 15:33:36

458 瀏覽

分享至

前言

真的不知道在寫什麼之都看完了還母雞抖。
原來昨天是 [FE102] 前端必備：JavaScript 這堂課的最後一篇啊？！
今天回頭看這兩天寫的文發現一看就很灌水啊，我到底在寫什麼 ~~放放code就想結束這一回合？~~ 不講解？覺得看完課還沒有很理解，不知道怎麼寫講解這部分。
那是不是再看完最後一堂的 [JS201] 進階 JavaScript：那些你一直搞不懂的地方我就會懂了？
我猜跟數學一樣(~~不會就是不會~~)，但不會還是要看QQ，一樣老樣子詳細簡介請連結服用，今天就開始吧。

今天內容

Array.isArray()
Object.prototype.toString()
typeof
=賦值行為
const的宣告
NaN

筆記

在之前提到的變數，使用typeof來檢測型態，已知Primitive Type以外的都是objects Type。再來看{a:1}和[1,2,3]都是回傳object，不像functionu會回傳function，所以要想知道是不是陣列可以用Arrar Methods的Array.isArray()來判斷是不是陣列。
```
console.log(typeof {a:1})     //object
console.log(typeof [1,2,3])   //object -> 只回傳object，不知道是不是Array
console.log(Array.isArray([1,2,3]))   //true
console.log(typeof function(){})   //function
```

另一種檢測的方法Object.prototype.toString.call()
在一些較老的瀏覽器可能會沒有支援Array.isArray()，這時候就可以用這種方式來判斷。

console.log(Object.prototype.toString.call("123"))  //[object String]
console.log(Object.prototype.toString.call([]))     //[object Array]
console.log(Object.prototype.toString.call(new Date()))  //[object Date]

typeof補充：通常在宣告一個變數時沒有賦值會undefined，沒宣告的話會直接報錯(程式也會被中斷)，所以要預防這件事發生會先做判斷。在不知道有沒有這個變數的情況下可以先用typeof來判斷。
```
if (a !== undefined) {
  console.log(a)  //找不到a會直接報錯
}

if (typeof a !== "undefined") {
    console.log(a)    //有a會印出，沒有不會印出也不會報錯。
}
```
這樣即使沒有a這個變數也不會報錯，typeof的判斷會回傳字串，所以這裡的"undefined"需用字串包住。
讓人搞不懂的賦值：來看看=這個行為
基本型別：
```
var a = 10
var b = a
console.log(a, b)  // 10 10
b = 20
console.log(a, b)  // 10 20
```
來個圖感覺比較好懂，先假設電腦是這樣存放資料的：

a 和 b 有各自的記憶體位置
b = a 時，將a的值10複製一份到 b
b = 20 時，值就變成20，不會影響到 a

物件型別：Object
```
var obj = {
  number:10
}
var obj2 = obj
console.log(obj,obj2) // { number: 10 } { number: 10 }

obj2.number = 20
console.log(obj,obj2)  //{ number: 20 } { number: 20 }
console.log(obj === obj2)  // true
```
obj、obj2、{number:10}三個都有各自的記憶體位置
obj2 = obj 會讓obj2指向和obj同一個位置。
obj2.number = 20透過obj2的操作改到{number:10}(本體)也會連帶影響到有指向它的變數obj。

再讓obj2 = {number:20}
```
obj2 = {
  number:20
}
console.log(obj,obj2)  //{ number: 20 } { number: 20 }
console.log(obj === obj2)  //false
console.log(obj.number,obj2.number)  // 20 20
console.log(obj.number === obj2.number)  // true
```
會再產生一個新的記憶體位置{number:20}並讓obj2指向它，所以obj不會等於obj2，但裡面的value都是20所以會相等。

以上圖示中存放資料的位置和記憶體位置名稱都不代表電腦的實際位置和名稱，只是用畫圖來幫助理解。
const的宣告：const在宣告時需要給初始值，且不能重覆宣告。
```
//基本型別
const a = 10
a = 20    //重新賦值，會報錯。

//物件型別
const arr = []
arr.push(1,2,3)
console.log(arr)

arr = [1,2,3,4]  //這樣是重新賦值，會報錯。
```
延續上面的=行為，const在物件型別對陣列內放進1,2,3沒有改到原本arr的記憶體位置所以不算重新賦值，但對arr = [1,2,3,4]這個行為就會重新賦值，所以會報錯。

特殊的存在 NaN
NaN：Not-A-Number不是數字，但還是數字的一種。

console.log(typeof NaN)  //number

var a = Number("10")
console.log(a, typeof a)  //10 number

var b = Number("hello") 
console.log(b, typeof b)  //NaN number -> 無法將"hello"轉乘數字，回傳NaN
console.log(b === b)      //false -> NaN不會等於自己
console.log(NaN === NaN)  //false

//使用typeof判斷不出是不是NaN，可以用`isNaN()`來判斷。
console.log(isNaN(a))     //false
console.log(isNaN(b))     //true