Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2. 型態、變數與運算子

40 views

Published on

使用REPL
認識內建型態
使用 let、const、var 宣告變數
掌握型態轉換

Published in: Technology
  • Be the first to comment

  • Be the first to like this

2. 型態、變數與運算子

  1. 1. 2.型態、變數與運算子 • 學習目標 – 使用REPL – 認識內建型態 – 使用 let、const、var 宣告變數 – 掌握型態轉換 2
  2. 2. 使用 REPL 3
  3. 3. 4
  4. 4. 5
  5. 5. 6
  6. 6. 撰寫 JavaScript 原始碼 7
  7. 7. 8
  8. 8. 哈囉!世界! 9
  9. 9. 10 UTF-8
  10. 10. • ECMAScript並沒有規定原始碼檔案必須採 用何種編碼儲存 • 現今Web應用程式開發也建議,在HTML、 JavaScript等檔案儲存時採用UTF-8編碼 11
  11. 11. UCS-2/UTF-16 • JavaScript字串最初採用的內部編碼是 UCS-2 • 兩個位元組為一個碼元(Code unit) • ISO/IEC與Unicode Consortium兩個團隊 都打算統一字元集 • 合併之後才發佈了Unicode 1.0 12
  12. 12. • 越來越多的字元被納入Unicode字元集,超 出碼點U+0000至U+FFFF可容納的範圍 • 1996年公佈了UTF-16,除了沿用UCS-2兩 個位元組的編碼部份之外,也採用四個位 元組來編碼更多的字元 • UTF-16編碼可能是兩個或四個位元組 • JavaScript後來才支援UTF-16 13
  13. 13. 內建型態 • 基本(Primitive)型態 • 複合(Composite)型態 • 兩個特殊的值null與undefined 14
  14. 14. 基本型態 • 數字(number) • 字串(string) • 布林(boolean) • ES6增加了符號(symbol) 15
  15. 15. 數字 • 都是〈IEEE 754〉標準64位元浮點數 16
  16. 16. • 字串剖析為數字,可以使用Number()函式 17
  17. 17. 18
  18. 18. • 想知道資料型態,方法之一是使用typeof 19
  19. 19. 字串 • 可以使用''或""包括文字 20
  20. 20. 21
  21. 21. • 沒有字元型態,以單引號或雙引號來包括 單一Unicode字元,也是字串型態 22
  22. 22. • 處理U+0000至U+FFFF以外的字元,以字 元在UTF-16編碼時的高低位元組來表示, 也就是使用兩個碼元 • 例如高音譜記號 的Unicode碼點為 U+1D11E,必須撰寫為'uD834uDD1E' 來表示,這稱為代理對(Surrogate pair) • ES6增加了u{…}表示法 23
  23. 23. • 早期UCS-2就存在的API或索引,在處理字 串時是以碼元為處理單位 • 支援UTF-16後為了兼顧相容性, ECMAScript規定使用UTF-16碼元作為字 串的元素(Element)單位 24
  24. 24. • 例如字串的length可以用來得知字串的 「元素」數量 25
  25. 25. • 字串的charAt()方法,索引由0開始,元素 是以碼元為單位 – 'u{1D11E}'.charAt(0)方法取得的元素 是碼元'uD834',而不是Unicode字元 'u{1D11E}‘ • JavaScript中的uhhhh,其實是碼元表示 方式 • 如果環境允許,在指定碼點時,建議使用 u{…}來取代uhhhh 26
  26. 26. • ES6增強了對Unicode的支援 27
  27. 27. 布林 • 布林值只有兩個值,true與false • 使用typeof, 結果會是'boolean' 28
  28. 28. 複合型態 • 就是指物件(Object) • 帶有額外的特性或方法 • typeof都會傳回'object‘ • 物件實字(Object literal) 29
  29. 29. • 在撰寫物件實字的同時,指定物件的特性 30
  30. 30. • 物件的特性名稱其實是個字串 • 可以隨時為物件新增特性,或者使用 delete運算子來刪除特性 31
  31. 31. • 基本型態數字、字串與布林,會在必要的 時候,自動建立對應的包裹物件 • 分別為Number、String與Boolean實例 32
  32. 32. • 可以直接建立包裹物件 33
  33. 33. 使用陣列 • 可以使用陣列實字(Array literal) • 每個陣列都是Array的實例 34
  34. 34. • 索引若超出陣列範圍,不會發生錯誤 35
  35. 35. • 雖然可以直接改變length的值,然而極度 不建議這麼做 • 操作陣列時,應避免陣列產生空項目 36
  36. 36. 類陣列 • 陣列並不是記憶體中開設連續的線性空間 像是個使用數字作為特性名稱的物件 37
  37. 37. • 使用物件來模擬陣列 38
  38. 38. • 在ES6中新增的Array.from()函式可以指 定類陣列 • 從ES5開始,字串也是類陣列 39
  39. 39. • 雖然字串是類陣列,不過字串內容無法變 動(Immutable) • 字串元素是以碼元為單位,指定索引取得 的元素是一個碼元,而不是字元 40
  40. 40. 變數 41
  41. 41. • let與const是ES6新增語法,在環境允許 的情況下,建立變數或常數應該優先使用 • 程式語言可分靜態定型(Statically- typed)、動態定型(Dynamically-typed) • JavaScript屬於動態定型語言 42
  42. 42. 鴨子定型 • 若想透過變數操作物件的某特性或方法, 只要確認該物件上確實有該特性或方法 • 如果它走路像個鴨子,游泳像個鴨子,叫 聲像個鴨子,那它就是鴨子。 43
  43. 43. • 對基本型態來說,變數儲存了被指定的值, • 對複合型態來說,變數始終是個參考(對 應)至物件的名稱,指定運算只是改變了 變數的參考對象 44
  44. 44. • 對於const宣告的常數,只是指不能重新 設定該名稱參考的物件 45
  45. 45. • 如果沒有使用let或const來宣告變數或常 數,會發生ReferenceError,表示「變 數未定義」 • 使用let宣告變數時,若該變數已經存在, 會引發SyntaxError • 如果let宣告了變數,然而沒有指定值,執 行完宣告後,會給予undefined 46
  46. 46. • 在ES5或更早版本中,並沒有let、const 可以使用,宣告變數其實是使用var • var宣告的變數,在其宣告所在地前後範圍 內都是有效的,稱為提昇(Hoisting) 47
  47. 47. • 絕大多數情況,不會希望變數有提昇行為 • 使用let也是會有提昇行為,只不過存在著 暫時死區(Temporal dead zone) – 在正式執行let該行前,變數不會被給予值 (連undefined都不給) • 使用var宣告變數時,若該變數已經存在, 並不會有任何錯誤,這不是好的特性 48
  48. 48. undefined與null • 無論是使用let或var,若宣告變數時未指 定值,變數會被給予特殊值undefined • 試圖取得物件上不存在的特性時,也會傳 回undefined • undefined是JavaScript中的特殊值,表 示值沒有定義 49
  49. 49. • 對undefined使用typeof的結果是 'undefined' • undefined本身等於undefined 50
  50. 50. • undefined在JavaScript中不是保留字 • void運算子放在任何值或運算式前,都會 產生undefined 51
  51. 51. • null用來表示沒有物件 • 對null使用typeof會得到'object' • null並非是Object的實例 • 試圖存取null的特性或呼叫方法,會引發 TypeError 52
  52. 52. 嚴格模式 • ES5增加了嚴格模式(Strict mode) • 啟用嚴格模式以後,若誤用了不好或早期 規範模糊不清的特性,會發生直譯或執行 等相關錯誤 53
  53. 53. 加減乘除運算 • 浮點數誤差 • 0.5  1/2 • 0.75  1/2 + 1/4 • 0.875  1/2 + 1/4 + 1/8 • 0.1  1/16 + 1/32 + 1/256 + 1/512 + 1/4096 + 1/8192 +... 54
  54. 54. • ES7新增了**指數運算子(Exponentiation Operator) 55
  55. 55. • 使用a % b時會進行除法運算,並取餘數 作為結果 • 若被除數不為0,而除數為0的話,會產生 無限值 56
  56. 56. • 使用+運算子可以串接字串 • 字串不可變動,+串接字串時會產生新字串, • 字串是基本型態,可以直接比較相等性 57
  57. 57. • 程式語言有所謂的強型別(Strong type) 與弱型別(Weak type)語言 • 強弱之分是相對而言,JavaScript極度偏向 弱型別 58
  58. 58. • 有些轉換在其他程式語言是少見的行為, 這時就不建議依賴在這類型態轉換上 • 請不要在字串上使用-、*、/運算 59
  59. 59. • 請不要將+、-、*、/、**運用在數字與字 串外的其他型態 60
  60. 60. 比較運算 • >、<、>=、<=運算子 • 對於數字進行>、<、>=、<=,就是比較 數字大小 • 對於字串,會逐字元依Unicode碼點順序來 比較 61
  61. 61. ===與!== • 請不要使用==、!= • 請使用===、!==進行相等比較 62
  62. 62. • ===用於基本型態時,是比較兩個變數儲 存的值是否相同 63
  63. 63. • 如果是在操作物件,=是將名稱參考某個物 件,而===是用來比較兩個名稱是否參考 同一物件 64
  64. 64. NaN • 當運算結果無法產生數值時,就會產生NaN • NaN表示Not a Number • typeof的結果是'number' 65
  65. 65. • NaN不等於任何值,也是唯一不等於自身的 值 • ===與!==用於NaN比較時,遵照IEEE 754 的規範 • 實務開發上應該避免產生NaN,方式之一是 避免非掌握中的自動型態轉換,避開不好 的運算特性 66
  66. 66. 邏輯運算 67
  67. 67. Falsy Family • 除了0、NaN、''、null、undefined是 假的之外,其他都是真的 68
  68. 68. • 邏輯運算&&、||有捷徑運算的特性 69
  69. 69. 位元運算 70
  70. 70. • 位元運算是逐位元運算 • 補數運算是將所有位元0變1,1變0 71
  71. 71. • 左移(<<)與右移(>>) • >>>運算子 72
  72. 72. • 條件運算子 73
  73. 73. 74
  74. 74. • 遞增1或遞減1 75
  75. 75. • 建議只在單行陳述句中使用遞增、遞減運算 76

×