2. 2.型態、變數與運算子
• 學習目標
– 使用REPL
– 認識內建型態
– 使用 let、const、var
宣告變數
– 掌握型態轉換
2

3. 使用 REPL
3

4. 4

5. 5

6. 6

7. 撰寫 JavaScript 原始碼
7

8. 8

9. 哈囉！世界！
9

10. 10
UTF-8

11. • ECMAScript並沒有規定原始碼檔案必須採
用何種編碼儲存
• 現今Web應用程式開發也建議，在HTML、
JavaScript等檔案儲存時採用UTF-8編碼
11

12. UCS-2/UTF-16
• JavaScript字串最初採用的內部編碼是
UCS-2
• 兩個位元組為一個碼元（Code unit）
• ISO/IEC與Unicode Consortium兩個團隊
都打算統一字元集
• 合併之後才發佈了Unicode 1.0
12

13. • 越來越多的字元被納入Unicode字元集，超
出碼點U+0000至U+FFFF可容納的範圍
• 1996年公佈了UTF-16，除了沿用UCS-2兩
個位元組的編碼部份之外，也採用四個位
元組來編碼更多的字元
• UTF-16編碼可能是兩個或四個位元組
• JavaScript後來才支援UTF-16
13

14. 內建型態
• 基本（Primitive）型態
• 複合（Composite）型態
• 兩個特殊的值null與undefined
14

15. 基本型態
• 數字（number）
• 字串（string）
• 布林（boolean）
• ES6增加了符號（symbol）
15

16. 數字
• 都是〈IEEE 754〉標準64位元浮點數
16

17. • 字串剖析為數字，可以使用Number()函式
17

18. 18

19. • 想知道資料型態，方法之一是使用typeof
19

20. 字串
• 可以使用''或""包括文字
20

21. 21

22. • 沒有字元型態，以單引號或雙引號來包括
單一Unicode字元，也是字串型態
22

23. • 處理U+0000至U+FFFF以外的字元，以字
元在UTF-16編碼時的高低位元組來表示，
也就是使用兩個碼元
• 例如高音譜記號 的Unicode碼點為
U+1D11E，必須撰寫為'uD834uDD1E'
來表示，這稱為代理對（Surrogate pair）
• ES6增加了u{…}表示法
23

24. • 早期UCS-2就存在的API或索引，在處理字
串時是以碼元為處理單位
• 支援UTF-16後為了兼顧相容性，
ECMAScript規定使用UTF-16碼元作為字
串的元素（Element）單位
24

25. • 例如字串的length可以用來得知字串的
「元素」數量
25

26. • 字串的charAt()方法，索引由0開始，元素
是以碼元為單位
– 'u{1D11E}'.charAt(0)方法取得的元素
是碼元'uD834'，而不是Unicode字元
'u{1D11E}‘
• JavaScript中的uhhhh，其實是碼元表示
方式
• 如果環境允許，在指定碼點時，建議使用
u{…}來取代uhhhh
26

27. • ES6增強了對Unicode的支援
27

28. 布林
• 布林值只有兩個值，true與false
• 使用typeof， 結果會是'boolean'
28

29. 複合型態
• 就是指物件（Object）
• 帶有額外的特性或方法
• typeof都會傳回'object‘
• 物件實字（Object literal）
29

30. • 在撰寫物件實字的同時，指定物件的特性
30

31. • 物件的特性名稱其實是個字串
• 可以隨時為物件新增特性，或者使用
delete運算子來刪除特性
31

32. • 基本型態數字、字串與布林，會在必要的
時候，自動建立對應的包裹物件
• 分別為Number、String與Boolean實例
32

33. • 可以直接建立包裹物件
33

34. 使用陣列
• 可以使用陣列實字（Array literal）
• 每個陣列都是Array的實例
34

35. • 索引若超出陣列範圍，不會發生錯誤
35

36. • 雖然可以直接改變length的值，然而極度
不建議這麼做
• 操作陣列時，應避免陣列產生空項目
36

37. 類陣列
• 陣列並不是記憶體中開設連續的線性空間
像是個使用數字作為特性名稱的物件
37

38. • 使用物件來模擬陣列
38

39. • 在ES6中新增的Array.from()函式可以指
定類陣列
• 從ES5開始，字串也是類陣列
39

40. • 雖然字串是類陣列，不過字串內容無法變
動（Immutable）
• 字串元素是以碼元為單位，指定索引取得
的元素是一個碼元，而不是字元
40

41. 變數
41

42. • let與const是ES6新增語法，在環境允許
的情況下，建立變數或常數應該優先使用
• 程式語言可分靜態定型（Statically-
typed）、動態定型（Dynamically-typed）
• JavaScript屬於動態定型語言
42

43. 鴨子定型
• 若想透過變數操作物件的某特性或方法，
只要確認該物件上確實有該特性或方法
• 如果它走路像個鴨子，游泳像個鴨子，叫
聲像個鴨子，那它就是鴨子。
43

44. • 對基本型態來說，變數儲存了被指定的值，
• 對複合型態來說，變數始終是個參考（對
應）至物件的名稱，指定運算只是改變了
變數的參考對象
44

45. • 對於const宣告的常數，只是指不能重新
設定該名稱參考的物件
45

46. • 如果沒有使用let或const來宣告變數或常
數，會發生ReferenceError，表示「變
數未定義」
• 使用let宣告變數時，若該變數已經存在，
會引發SyntaxError
• 如果let宣告了變數，然而沒有指定值，執
行完宣告後，會給予undefined
46

47. • 在ES5或更早版本中，並沒有let、const
可以使用，宣告變數其實是使用var
• var宣告的變數，在其宣告所在地前後範圍
內都是有效的，稱為提昇（Hoisting）
47

48. • 絕大多數情況，不會希望變數有提昇行為
• 使用let也是會有提昇行為，只不過存在著
暫時死區（Temporal dead zone）
– 在正式執行let該行前，變數不會被給予值
（連undefined都不給）
• 使用var宣告變數時，若該變數已經存在，
並不會有任何錯誤，這不是好的特性
48

49. undefined與null
• 無論是使用let或var，若宣告變數時未指
定值，變數會被給予特殊值undefined
• 試圖取得物件上不存在的特性時，也會傳
回undefined
• undefined是JavaScript中的特殊值，表
示值沒有定義
49

50. • 對undefined使用typeof的結果是
'undefined'
• undefined本身等於undefined
50

51. • undefined在JavaScript中不是保留字
• void運算子放在任何值或運算式前，都會
產生undefined
51

52. • null用來表示沒有物件
• 對null使用typeof會得到'object'
• null並非是Object的實例
• 試圖存取null的特性或呼叫方法，會引發
TypeError
52

53. 嚴格模式
• ES5增加了嚴格模式（Strict mode）
• 啟用嚴格模式以後，若誤用了不好或早期
規範模糊不清的特性，會發生直譯或執行
等相關錯誤
53

54. 加減乘除運算
• 浮點數誤差
• 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

55. • ES7新增了**指數運算子（Exponentiation
Operator）
55

56. • 使用a % b時會進行除法運算，並取餘數
作為結果
• 若被除數不為0，而除數為0的話，會產生
無限值
56

57. • 使用+運算子可以串接字串
• 字串不可變動，+串接字串時會產生新字串，
• 字串是基本型態，可以直接比較相等性
57

58. • 程式語言有所謂的強型別（Strong type）
與弱型別（Weak type）語言
• 強弱之分是相對而言，JavaScript極度偏向
弱型別
58

59. • 有些轉換在其他程式語言是少見的行為，
這時就不建議依賴在這類型態轉換上
• 請不要在字串上使用-、*、/運算
59

60. • 請不要將+、-、*、/、**運用在數字與字
串外的其他型態
60

61. 比較運算
• >、<、>=、<=運算子
• 對於數字進行>、<、>=、<=，就是比較
數字大小
• 對於字串，會逐字元依Unicode碼點順序來
比較
61

62. ===與!==
• 請不要使用==、!=
• 請使用===、!==進行相等比較
62

63. • ===用於基本型態時，是比較兩個變數儲
存的值是否相同
63

64. • 如果是在操作物件，=是將名稱參考某個物
件，而===是用來比較兩個名稱是否參考
同一物件
64

65. NaN
• 當運算結果無法產生數值時，就會產生NaN
• NaN表示Not a Number
• typeof的結果是'number'
65

66. • NaN不等於任何值，也是唯一不等於自身的
值
• ===與!==用於NaN比較時，遵照IEEE 754
的規範
• 實務開發上應該避免產生NaN，方式之一是
避免非掌握中的自動型態轉換，避開不好
的運算特性
66

67. 邏輯運算
67

68. Falsy Family
• 除了0、NaN、''、null、undefined是
假的之外，其他都是真的
68

69. • 邏輯運算&&、||有捷徑運算的特性
69

70. 位元運算
70

71. • 位元運算是逐位元運算
• 補數運算是將所有位元0變1，1變0
71

72. • 左移（<<）與右移（>>）
• >>>運算子
72

73. • 條件運算子
73

74. 74

75. • 遞增1或遞減1
75

76. • 建議只在單行陳述句中使用遞增、遞減運算
76