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

2.
使用 REPL
3

3.
4

4.
5

5.
6

6.
撰寫 JavaScript 原始碼
7

7.
8

8.
哈囉！世界！
9

9.
10
UTF-8

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

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

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

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

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

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

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

17.
18

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

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

20.
21

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

40.
變數
41

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

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

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

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

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

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

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

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

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

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

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

52.
嚴格模式
• ES5增加了嚴格模式（Strict mode）
• 啟用嚴格模式以後，若誤用了不好或早期
規範模糊不清的特性，會發生直譯或執行
等相關錯誤
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.
• ES7新增了**指數運算子（Exponentiation
Operator）
55

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

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

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

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

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

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

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

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

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

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

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

66.
邏輯運算
67

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

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

69.
位元運算
70

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

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

72.
• 條件運算子
73

73.
74

74.
• 遞增1或遞減1
75

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