iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
2
Modern Web

有角拾系列 第 1

JS雜拾-01-JavaScript 資料型別 (Data Types)

內文摘要

  • ECMAScript 與 JavaScript? ES6?
  • JavaScript 資料型別(Data Types)
  • 型別判斷
  • 型別轉換

參考資料1:MDN — the Mozilla Developer Network
參考資料2:從ES6開始的JavaScript學習生活


前言

這系列文章預計前十篇會先打穩純JS的基本功並實作一兩個小玩具,接著重點比較更現代的TypeScript與JS之間的差異;最後保留十至十五的篇幅試著深入一門現代的前端框架,看看三十天後我們能一起做出什麼好玩的作品。

希望大家一起玩得開心。
Happy Hacking.


JavaScript與 ECMAScript? ES6?

不曉得各位學習道路上的伙伴有沒有人跟我一樣經常在閱讀JS文章的時候看ECMAScript而感到困惑?ES6又是什麼呢?

JavaScript:一門程式語言
ECMAScript:一份針對JavaScript的國際應用標準規範,雖然ECMAScript不具絕對約束力,但已很高程度能相容於各主流瀏覽器,如:Chrome, Firefox, Safari等;因此當我們按ECMAScript寫出來的一份程式碼可以在各大瀏覽器被順利讀取,不受限用戶偏好使用什麼瀏覽器。

ES6瀏覽器相容表 compatibility table

網路與瀏覽器剛誕生的時代百家爭鳴,大家都想佔有一席之地因而衍生各種標準,如同帶著新台幣100元到隔壁的香港、日本沒辦法使用(各式各樣JS寫法),此時信用卡這種挟帶全球通用標準的支付工具(ECMAScript)便能大大降低差異帶來的不便。

ES6:標準整合總有陣痛期,歷經多年來多次改版,2015年推出的第6版ES6(ES2015)涵蓋許多強大的新功能將JavaScript可用性推到新高點,因此當代前端工程師絕對不能不熟悉ES6標準呢。


JavaScript 資料型別(Data Types)

資料「型別」也有人稱資料「類型」,JavaScript型別就兩大類:基本型別 Primitives物件Object

基本類型(Primitive Data Type),共6種:

  1. 字串 string

    • JavaScript中,字串使用Unicode(變數命名也是,意味著不能用數字開頭來命名)
    • 樣版字串嵌入 template literal:
      let emperor = `Napoleon I`
      let profile = `請問哪位法國皇帝出生於科西嘉島?
      答案:${emperor}`;
      
      console.log(profile) // `請問哪位法國皇帝出生於科西嘉島?
      答案:Napoleon I`
      
      ps. 內嵌運算式也可以喔
  2. 布林值 boolean

    • true, false 嘿嘿如果布林值可沒這麼簡單喔,下段的falsy型別轉換可有些燒腦
    • (Airbnb 23.3) 如果屬性(變數/常數)或方法(函式)是一個布林值,使用像isVal()或hasVal()的命名。
    • JavaScript中驚嘆號(!)是邏輯運算符:
      !代表某值是不是對的、有的:true;
      !!代表某值是不是錯的、沒有:false
        const aBool = true
        const bBool = !aBool //b是不是等於a? false
        const cBool = !!aBool //c是不是不等於a? true
      
  3. 數字number

    • JavaScript只有一種數值型別:number;其中有幾種特別的數字:Infinity、-Infinity、NaN (Not a Number)
    • Number(n) 可以將除了undefined以外的任何資料轉換為number
    • IEEE 754 double-precision 二進位浮點算術標準:
      意味十進位小數無法完美使用二進位處理,若真有數字精準的需求可另尋其他方法解決,此外如果需要非常多計算通常計算邏輯應該會放後端
  4. null

    • 空(null)就是空值,代表的是沒有值
    • 當你對 null 進行運算,null 會自動轉換成數值 0,如果當做布林值運算,會被當成 false,舉例來說:
var n = null;
console.log(n * 32); // Will log 0 to the console
  1. 未定義 undefined

    • 未定義(undefined)即是尚未被定義類型,或根本不存在 (ex. console.log 未賦值的變數會得到 undefined)
  2. 符號 Symbol(ES6新增)

註1: 除了物件以外的所有值,都是原始定義的值(值意味著不能被改變)。例如與 C 不同的地方,就是字串是不變的。我們引用這些類型的值為 primitive values(原始值)。
註2: JavaScript的確是一個物件導向的程式語言。不過,JavaScript的物件導向特性與其他常見的物件導向語言例如Java、C++等有很大的不同。

物件 Object (另寫於JS雜拾-04)

  • 物件 object
  • 陣列 array

判斷資料類型

  1. 其實是判斷數、常數的『值』
  2. 多數時候使用typeof (關鍵字),舉例:
console.log(typeof 37) //'number'
console.log(typeof NaN) //'number'
console.log(typeof '') //'string'
console.log(typeof (typeof 1)) //'string'
console.log(typeof true) //'boolean'
console.log(typeof {}) //'object'
console.log(typeof []) //'object'

console.log(typeof null) //'object'
console.log(typeof function(){}) //'function'
  1. 例外狀況
  • null會回傳'object',可以改用:
const n = null;

if (!n && typeof n === 'object') {
  console.log('我是 null!');
}
  • array會回傳'object',因此改用:
let a = [];
Array.isArray(a) // true
  • object會回傳'object',因此改用:
let b = {};
b instanceof Object // true

  • 檢查變數是否為NaN
isNaN(變數)

資料型別轉換

  1. JavaScript是弱型別語言也稱動態程式語言(dynamic language)",其鬆散資料類型(loosely typed)的特性意思是不需要在定義變數、常數時,就規定資料類型。我們只需要給值,JavaScript就會依照指定值決定變數、常數資料類型<-- TypeScript可以大幅改善這一不可控的問題。舉例:
let foo = 42    // foo現在是Number資料類型
let foo = 'bar' // foo現在是String資料類型
let foo = true // foo現在是Boolean資料類型
  1. falsy與短路求值
  • "false家族成員":
    falsy 包含 0, -0,NaN,null, false, undefined, 空白字串('')與false
    * "falsy"的概念在JavaScript的邏輯運算,以及布林值中都是很重要的概念。除了上述提到的(Logical NOT)(!),還有兩個邏輯運算符也很常用到:與(Logical AND)(&&)、或(Logical OR)(||),在經過邏輯與(&&)與邏輯或(||)的運算後,它的回傳值是最後的值(Last value),而非布林值;也就是說像下面這樣的程式碼,基本上它的回傳值都不是布林值,而是其他資料類型
    console.log('foo' || 'bar') // 'foo' console.log(false || 'bar') // 'bar'
    "falsy"更擴大了這種運算範圍,因此出現了一種常見的簡短寫法:"指定預設值",範例:

          ```
          let a = value || 5 // 5是預設值
          ```
    

不過,這樣的指定預設值的寫法,並不能完全精確判斷value屬於哪一種資料類型與值的方式,在某些情況下會出現意外,例如你可能認為value=0也是合法的值,但value=0時,a會被短路求值成5。所以,只要當value是"falsy"時,變數a就會被指定為預設值5。所以在使用時還是需要特別注意,不然你會得到出乎意料的結果。


題外話

全球資訊網路 World Wide Web,又稱the web、WWW,是由Sir Timothy John Berners-Lee 1989年在位於瑞士的歐洲核子研究組織CERN工作時發明的。以前只知道CERN主要研究核能粒子加速器之類高等物理,沒想到跟呼吸一樣重要的生命第四元素:網路,也發源於CERN。

而負責規範全球資訊網路標準的W3C(World Wide Web Consortium,又稱W3C理事会)不意外地也是由Sir Berners-Lee所創立。

至於跟Java一點關係也沒有的JavaScript爸爸:Brendan Eich,不僅協助創立Mozilla.org也曾任其執行長,所以透過MDN — the Mozilla Developer Network 學習應該是個可靠的好主意。


下一篇
JS雜拾-02-變數作用域& CommonJS Modules
系列文
有角拾30

尚未有邦友留言

立即登入留言