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

2. 型態、變數與運算子

198 views

Published on

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

Published in: Technology
no profile picture user

  • Login to see the comments

  • 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

×