重新認識 JavaScript 之術(六角學院js直播課筆記)


* 本系列篇,筆記摘自於-六角學院:JS 工程師養成直播班- 2022 秋季班與六角js學徒試煉篇與核心篇。
* Udemy-The Complete JavaScript Course 2022: From Zero to Expert!
  • 本週知識點:
    • 學習 JS 環境與除錯
    • 變數:型別、命名規則、資料處理
    • 變數:記憶體存放

基本型別

#型別-undefined

* 定義:尚未被賦予值的狀態
```
let a;  //變數a已宣告,目前沒有被賦予值的狀態
console.log(a)     //undefined
console.log(typeof a)  //undefined >>>檢查型別
```
  • 在開發上,要避免去使用undefined值賦予到變數上。相反的,就是保持原則把undefined留給電腦的系統自己編配使用。

#型別-null

* 定義:有被賦予值,是告知為空值(曾經被宣告過的變數並被賦予過值)   
```
let b = 1
let c = null   //null
console.log(c)  //null

let d = [{name: d}, {name: f}, ......]
d = null
console.log(d) //null
```
  • 另一種情況是,該變數本來有資料/值,利用null將其值清空,but why?
  • 因為有時變數儲存的是陣列與物件組合的資料,非常佔記憶體容量,當我們不再需要使用這些組合資料時,可以將該變數重新賦值為null/空值,而原本的該變數儲存的陣列與物件組合的資料會被記憶體釋放掉(Garbage Collection)。

#補充:undefined v.s not defined

let a;
console.log(a)  //undefined (有宣告變數,尚未賦值)

console.log(aaa)  //aaa is not defined
  • 宣告a變數,表示在記憶體上面,已經有準備一個空間給變數a,但還沒有賦予值給變數a,因此變數a指向undefined
  • aaa並沒有被宣告變數,因此表示在記憶體中並沒有準備空間給這個aaa,所以出現not defined

#補充:記憶體存放與釋放(GC /garbage collection)

  • 定義:Javascript針對記憶體(ram)的回收機制,當沒有任何物件參考它時,就會將這些記憶體回收。當我們在運行函式時,確實會佔用非常多的記憶體空間,因此GC是很重要的機制。


falsy values偽值 和 truthy values真值

#falsy values 偽值

* 定義:falsy values不是真的false,不過當我們遇到偽值並要轉型為boolean判斷情況時,勢必會根據當前的值去判斷真值與假值
* 在JS中,只有五個falsy values假值:
0  ''  undefined  null  NaN
if(0) { 
    console.log('我代表truthy values,我是真值')
} else {
    console.log('我是0,我代表falsy values,我是假值')
};  
//'我是0,我代表falsy values,我是假值'
if('') { 
    console.log('我代表truthy values,我是真值')
} else {
    console.log(`我是''空字串,我代表falsy values,我是假值')
};  
//我是''空字串,我代表falsy values,我是假值'
if(undefined) { 
    console.log('我代表truthy values,我是真值')
} else {
    console.log(`我是undefined,我代表falsy values,我是假值')
};  
//我是undefined,我代表falsy values,我是假值'
if(null) { 
    console.log('我代表truthy values,我是真值')
} else {
    console.log(`我是null,我代表falsy values,我是假值')
};  
//我是null,我代表falsy values,我是假值'
if(NaN) { 
    console.log('我代表truthy values,我是真值')
} else {
    console.log(`我是NaN,我代表falsy values,我是假值')
};  
//我是NaN,我代表falsy values,我是假值'
  • 陷阱題:

    if({}) { 
      console.log('我是空物件{},我代表truthy values,我是真值')
    } else {
      console.log(`我是NaN,我代表falsy values,我是假值')
    };  
    //我是空物件{},我代表truthy values,我是真值
    
      if([]) { 
          console.log('我是空陣列[],我代表truthy values,我是真值')
      } else {
          console.log(`我是NaN,我代表falsy values,我是假值')
      };  
      //我是空陣列[],我代表truthy values,我是真值
    

JS的自動轉型(別)type coercion 與 手動轉型(別) type conversion

#JS的自動轉型(別)type coercion:

* 定義:Js會在不同型別相遇時,幫我們自以為貼心的做自動轉型的動作,JS只能自動轉三種型別:number/string/boolean(可見上述falsy 和truthy values介紹),(JS不能也不會自動轉型為undefined或null,這就更白目了)

  //以下皆為type coercion手動轉型別的例子
  //1-0: 當一串string遇上number相加+時...
console.log('I am' +  30  + 'years old.') //I am 30 years old.
  //1-1:結論是當strings和number有一個+運算符時,number會強制轉型為string

  //2-0: 當string和number相減-時...
console.log('23'- '3' - 10)  //10  >>>型別是number
  //2-1:結論是當strings和number有減號-運算符時,string會強制轉型為number做出運算結果

  //3-0: 當string和number相乘*時...
console.log('23'* 2 - 10)  //36  >>>型別是number
  //3-1:結論是當strings和number有乘號*運算符時,string會強制轉型為number做出運算結果

  //4-0: 陷阱題
let n = '1' + 12    //'112'
n = n - 12      //100
console.log(n)  //100
console.log(2 + 3 + 4 + '1') //'91'
  • 請注意,不是每一個運算符都會發生當strings遇上number會強制轉型為string(只有遇到+ add operator時),其他運算符- * /則是反作用將string轉為number型別並做運算。
  //以下皆為type conversion手動轉型別的例子
  //1-0: 當string與number相加時...
const inputYear = '2023';
console.log(inputYear + 18)   //'202318' (轉型為'字串')

  //1-1: 須先將string轉型為number
const inputYear = '2023';
console.log(Number(inputYear) + 18)   //2041 (number)

  //2-0: 將string轉型為number
console.log(Number('suihsilan'))  //NaN (invalid number)
console.log(typeof NaN) //number   >>>檢查NaN型別

  //3-0: 將number轉型為string
console.log(String(23))  //'23'
console.log(typeof NaN) //number   >>>檢查NaN型別
#JS工程師養成直播班2022 #重新認識javascript #JS綜合筆記 #JS型別 #type coercion






你可能感興趣的文章

MTR04_1104

MTR04_1104

Javascript ES5, ES6 物件導向、原型鍊、this

Javascript ES5, ES6 物件導向、原型鍊、this

「三元運算子」不好嗎?

「三元運算子」不好嗎?






留言討論