[02] 程式設計簡介 - 強制轉型、註解、變數、範疇


keywords: coercion,comment out,variable,scope

型別之間進行轉換 ( Coercion )

如果今天要把程式碼打印出來,我們通常都會使用 console.log( 2 ),但其實這裡就已經存在一個強制轉型 ( coercion ),程式會先把 2 coerce 為一個 string 型別,然後才把它打印出來。

明確的 ( explicit ) 強制轉型

ex:let b = Number('42')
非常簡單明瞭地知道要把 '42' 轉成 number 42 並儲存進 b

隱含的 ( implicit ) 強制轉型

這是大多數開發人員覺得比較有爭議也比較頭痛的部分,先來看一個例子
ex:'99.99'==99.99 // true
大多數人會覺得它們是相等的,但其實它們的型別並不完全相等,一個是 string 一個是 number。
JavaScript 會介入把左手邊的 '99.99' 隱含地強制轉型為其 number 等效值 99.99,再進行比較,故得 true。

舉幾個面試碰過的例子:

  1. 1+1+'42'+1 // 2421 typeof string
    前兩個 1 都是 number 所以相加後為 2
    但當遇到 '42' 就會被強制轉型為 '2' ,最後一個 1 亦是如此
    故結果會是 '2'+'42'+'1'
    那如果是這樣呢? '42'+2+1 // ?
    結果是 '4221' 似乎是運算子+如果一邊是字串就會把前後強制轉換成字串
    之後會有強制轉型的詳細解說原因
  2. '42' *1 // 42 typeof number

程式碼註解 ( Comment out )

註解應該解釋: 為何如此 ( why do you write this code? or why this solution? ) ,並非做了什麼 ( what )
如果程式碼特別容易讓人混淆,可選擇性地解釋如何進行 ( how )

兩種常見註記方式:// /* ... */

一種自己喜歡用的 #region 收合區塊

region
可以把一個區塊做一個標記,跟 /*...*/ 最大的區別在於 /*...*/ 裡面不能寫 code 而 #region 可以
之前寫 C# 習慣用 #region 所以想說 JavaScript 會不會有,結果真的有 !

變數 ( Variable )

JavaScript 是弱型別 ( weak typing ) 又稱動態型別 ( dynamic typing ) ,表示變數可以持有任何型別的值,不會強制施加任何的型別,而型別指的是變數裡面的值,而不是變數本身,值才有型別

常數變數 ( contants )

指的是程式執行過程中都不會變動的變數,通常以字母大寫且每個字詞間以 _ 隔開
ex:const TAX_RATE = 0.05 5% 營業稅

區塊 ( Block )

將一系列的述句集合在一起,歸成一組稱之為區塊 block ,用一對大括號 {...} 把一或多個述句包裹在裡面。
一個區塊述句不需要一個分號 ( ; ) 作為結尾

迴圈 ( Loop )

一個迴圈包括了測試條件及一個區塊 {...}。迴圈區塊每次執行稱作為一次迭代 ( iteration )

範疇 ( Scope 嚴格來說為語彙範疇 lexical scope )

範疇是一群變數如何透過名稱來存取的規則所成的一個集合,只有在函式內的程式碼能夠存取該函式範疇內 ( scoped ) 的變數
範疇中的程式碼能夠存取該範疇以及其外層任何範疇內的變數

function outer() {
  let a = 1;

  function inner(){
    let b = 2;
    console.log(a+b) // 3 在此 a 及 b 皆能存取
  }

  inner();
  console.log(a); // 1  在此只能存取 a
}
outer();
#coercion #comment out #variable #scope
「你所不知道的 JS 」系列書籍閱讀心得,未閱讀前對於 JavaScript 皆是懵懵懂懂,因面試時發現自己很多觀念都不正確不清楚,所以這次一探 JavaScript 的運作方式。 * 系列一開始會先把大方向簡短的整理,之後會以每個項目做詳細的筆記






Related Posts

Hacktoberfest:一起踏入 open source 的世界吧!

Hacktoberfest:一起踏入 open source 的世界吧!

huli
Day04_Origami學習筆記

Day04_Origami學習筆記

liaoyuxian
Day06 - Flexbox排版

Day06 - Flexbox排版

ding229


Comments