Learn JavaScript Well

MOPCON 2020 分享主題「打造資深實力 - 你該學好的 JavaScript」

Transcript

1. ޒഒላӃ .01$0/ ଧ଄ࢿਂመྗ
   你該學好的 JavaScript
   ҝ㟬ࣗݾላ
   
2. a.k.a Eddie 愛現! 喜歡冷門的玩具 Ruby/Rails 開發者、講師 Ruby 技術推廣、教育、諮詢 台灣、日本等國內外 Ruby 技術研討會講者 部落格：https://kaochenlong.com 高見龍@eddiekao
3. ޒഒላӃ .01$0/ 第18刷 發售中 發售中 發售中
4. ޒഒላӃ .01$0/ Git 小教室
5. ޒഒላӃ .01$0/ 已絕版
6. ޒഒላӃ .01$0/ 敬請 期待
7. ޒഒላӃ .01$0/ ༗ᘋ㐸౴ 電子書
8. ޒഒላӃ .01$0/ ʮላशෆधཁҝެ࢘ɺҝ௕׭ɼ
   ෆधཁҝผਓɼ୞ҝ你ࣗݾʯ 
   ߴݟཾ
9. ޒഒላӃ .01$0/ ᫚৬ೈᱪ޻ఔࢣʁ
10. ޒഒላӃ .01$0/ ೖ໳Ҏ্ɼதڃະᕝ
11. ޒഒላӃ .01$0/ େߝ
12. ޒഒላӃ .01$0/ େߝ w+BWB4DSJQU
    త޷ᢛෆ޷
    wಹࠣ༗झత
    +BWB4DSJQU
    ޠ๏എޙతނࣄ
    w你֘೺ٕೳᴍᏐᴍࡏṜࠣ஍ํʂ
    wኺ৽ख্࿏౸࿝അ్ࣝ
13. ޒഒላӃ .01$0/ DISCLAIMER 本次分享內容可能隱含部份商業或課程置入訊 息，請謹慎評估！
14. ޒഒላӃ .01$0/ ޷᪑ෆ޷
15. ޒഒላӃ .01$0/ ʮՖऒᚙɼ+BWB4DSJQU
    ಹॄኄᗞઃܭʂʯ ޷ᢛෆ޷
16. ޒഒላӃ .01$0/ ʮੈք্୞༗ၷछఔࣜޠݴɼ
    Ұछඃഃ౸ष಄ɼ另Ұछᔒਓ༻ʯ 
    $
    ೭෕
    #KBSOF
    4USPVTUSVQ ޷ᢛෆ޷
17. ޒഒላӃ .01$0/ +4-JOU ޷ᢛෆ޷
18. ޒഒላӃ .01$0/ +4-JOU
    
    Մೳ။ᩋ你᧷ಘࣗݾෆ။ሜఔࣜʂ ޷ᢛෆ޷
19. ޒഒላӃ .01$0/ function hello() { return "world"; } function hello() { return "world"; } ޷ᢛෆ޷
20. ޒഒላӃ .01$0/ 㑌छఔࣜޠݴ౎༗޷ᢛෆ޷తҰ໘ ޷ᢛෆ޷
21. ޒഒላӃ .01$0/ ෆཁ୞ੋ᪑ஶ鄉ຽҰىഃ ޷ᢛෆ޷
22. ޒഒላӃ .01$0/ ༗झޠ๏എޙతނࣄ
23. ޒഒላӃ .01$0/ 你஌ಓએࠂੋዎኄҰճࣄ嗎ʁ ༗झޠ๏
24. ޒഒላӃ .01$0/ ᏓᏐએࠂ ༗झޠ๏
25. ޒഒላӃ .01$0/ var a = 1; console.log(a); // 會印出什什麼？ ༗झޠ๏ 1
26. ޒഒላӃ .01$0/ console.log(a); // 會印出？ var a = 1; ༗झޠ๏ undefined
27. ޒഒላӃ .01$0/ ᏓᏐఏঢ
    7BSJBCMF
    )PJTUJOH ༗झޠ๏
28. ޒഒላӃ .01$0/ var a; console.log(a); // 所以印出 undefined a = 1; ༗झޠ๏ 被拉到上面？
29. ޒഒላӃ .01$0/ ฤᩄ
    WT
    ௚ᩄ
    $PNQJMBUJPO
    WT
    *OUFSQSFUBUJPO ༗झޠ๏
30. ޒഒላӃ .01$0/ ݐཱظ
    WT
    ࣥߦظ
    $SFBUJPO
    1IBTF
    WT
    &YFDVUJPO
    1IBTF ༗झޠ๏
31. ޒഒላӃ .01$0/ ݐཱظ
    Ḽ࡭໊᜝ʢ*EFOUJpFSʣ
    ਐߦॳ࢝Խ 1A 1B ༗झޠ๏
32. ޒഒላӃ .01$0/ ࣥߦظ
    ࣥߦവᏐ
    
    ො值 2 ༗झޠ๏
33. ޒഒላӃ .01$0/ var a = 1; console.log(a); ༗झޠ๏ ݐཱظ var a; console.log(a); undefined 1A 1B
34. ޒഒላӃ .01$0/ var a = 1; console.log(a); ༗झޠ๏ ࣥߦظ a = 1; console.log(a); 1 2 2
35. ޒഒላӃ .01$0/ ၷ֊ஈ ༗झޠ๏
36. ޒഒላӃ .01$0/ console.log(a); var a = 1; ༗झޠ๏ ݐཱظ console.log(a); var a; undefined 1A 1B
37. ޒഒላӃ .01$0/ console.log(a); var a = 1; ༗झޠ๏ ࣥߦظ console.log(a); a = 1; undefined 1 2 2
38. ޒഒላӃ .01$0/ খଌᱛ ༗झޠ๏
39. ޒഒላӃ .01$0/ var a = 1; var a; console.log(a); // 會印出什什麼？ ༗झޠ๏ 1
40. ޒഒላӃ .01$0/ if (false) { var a = 1; } console.log(a); // 會印出什什麼？ ༗झޠ๏ undefined
41. ޒഒላӃ .01$0/ 另ҰछᏓᏐએࠂ ༗झޠ๏
42. ޒഒላӃ .01$0/ console.log(a); // 會印出什什麼？ let a = 1; ༗झޠ๏ Reference Error
43. ޒഒላӃ .01$0/ Ҽҝ
    MFU
    ෆ။ᏓᏐఏঢʁ ༗झޠ๏
44. ޒഒላӃ .01$0/ console.log(a); let a = 1; ༗झޠ๏ ݐཱظ console.log(a); let a; 1A TDZ
45. ޒഒላӃ .01$0/ console.log(a); let a = 1; ༗झޠ๏ ࣥߦظ console.log(a); a = 1; Reference Error 2
46. ޒഒላӃ .01$0/ ࢑࣌ࢮე
    5%;
    
    5FNQPSBM
    %FBE
    ;POF ༗झޠ๏
47. ޒഒላӃ .01$0/ let a = 1; console.log(a); // 會印出什什麼？ ༗झޠ๏
48. ޒഒላӃ .01$0/ let a = 1; console.log(a); ༗झޠ๏ ݐཱظ let a; console.log(a); 1A TDZ
49. ޒഒላӃ .01$0/ let a = 1; console.log(a); ༗झޠ๏ ࣥߦظ a = 1; console.log(a); 1 2 2
50. ޒഒላӃ .01$0/ MFU
    
    ৽൛త
    WBS
    Ҏޙ౎༻
    MFU
    ब޷ྃʁ ༗झޠ๏
51. ޒഒላӃ .01$0/ വᏐએࠂ ༗झޠ๏
52. ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ ？
53. ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ ݐཱظ 1A 1B sayHello(); function sayHello() { console.log('hello'); } 2
54. ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ sayHello(); function sayHello() { console.log('hello'); } 2 ࣥߦظ hello
55. ޒഒላӃ .01$0/ { } ༗झޠ๏ 物件？ Block？
56. ޒഒላӃ .01$0/ { hello: '哈囉' } ༗झޠ๏ 物件
57. ޒഒላӃ .01$0/ { hello: for (var i = 0; i < 10; i++ ) { if (i % 2 === 0) { continue hello; } console.log(i); } } ༗झޠ๏ label label Block
58. ޒഒላӃ .01$0/ + 加號？ 十字架？ ༗झޠ๏
59. ޒഒላӃ .01$0/ DPFSDJPO
    <ˋkoʊˈɝː.ʃən>
    5IF
    VTF
    PG
    GPSDF
    UP
    QFSTVBEF
    TPNFPOF
    UP
    EP
    TPNFUIJOH
    UIBU
    UIFZ
    BSF
    VOXJMMJOH
    UP
    EP ༗झޠ๏
60. ޒഒላӃ .01$0/ +'' // 0 +[] // 0 +{} // NaN +-1 // -1 +true // 1 +false // 0 +undefined // NaN +null // 0 ༗झޠ๏
61. ޒഒላӃ .01$0/ [] + [] // ? [] + {} // ? {} + [] // ? ༗झޠ๏
62. ޒഒላӃ .01$0/ [] + [] ༗झޠ๏
63. ޒഒላӃ .01$0/ ༗झޠ๏
64. ޒഒላӃ .01$0/ [] + [] [].toString() + [].toString() ༗झޠ๏ 空字串 空字串
65. ޒഒላӃ .01$0/ [] + {} ༗झޠ๏
66. ޒഒላӃ .01$0/ [] + {} [].toString() + {}.toString() ༗झޠ๏ '[object Object]' 字串串 空字串
67. ޒഒላӃ .01$0/ {} + [] ༗झޠ๏ Block
68. ޒഒላӃ .01$0/ [] + {} Block 後⾯面跟了了 +[] ༗झޠ๏ 0
69. ޒഒላӃ .01$0/ [] + [] // '' [] + {} // '[object Object]' {} + [] // 0 ༗झޠ๏
70. ޒഒላӃ .01$0/ /B/
    
    /PU
    "
    /VNCFS ༗झޠ๏
71. ޒഒላӃ .01$0/ console.log(typeof NaN); // 會印出什什麼？ number ༗झޠ๏
72. ޒഒላӃ .01$0/ /B/
    ੋҰछᏐࣈ
    ୠሏ༻ိදࣔʮෆੋᏐࣈʯ ༗झޠ๏
73. ޒഒላӃ .01$0/ ʮ
    ݸ౳ᥒʯ᪑ʮ
    ݸ౳ᥒʯతࠩผʁ ༗झޠ๏
74. ޒഒላӃ .01$0/ ʮ
    ݸ౳ᥒෆ။ൺֱܕผʁʯ ༗झޠ๏
75. ޒഒላӃ .01$0/ 
    ݸ౳ᥒ
    ᪑
    
    ݸ౳ᥒతࠩผʁ ༗झޠ๏
76. ޒഒላӃ .01$0/ ཧղࡉઅ ༗झޠ๏
77. ޒഒላӃ .01$0/ 你֘೺ٕೳᴍᏐᴍࡏṜࠣ஍ํʂ ਓੜۤ୹
78. ޒഒላӃ .01$0/ ಓཧେՈ౎஌ಓɼୠೳ၏౸తᔒଟগ ਓੜᴍᏐ
79. ޒഒላӃ .01$0/ ٕೳᴍᏐ༗ݶ ਓੜᴍᏐ
80. ޒഒላӃ .01$0/ ೗Ռཁ౤ࢿࡏ
    +BWB4DSJQU
    త࿩ ਓੜᴍᏐ
81. ޒഒላӃ .01$0/ ਂೖ
    +BWB4DSJQU
    w෺݅ಋ޲
    wവᏐ
    
    $MPTVSF
    wUIJT
    wඇಉ㑊႔ཧ
    w&4
    
    .PEVMF
82. ޒഒላӃ .01$0/ ֘ላલ୺ᐽՍ嗎ʁ֘ላ哪Ұݸʁ ਓੜᴍᏐ "
83. ޒഒላӃ .01$0/ 
    ೥ؐཁෆཁላ
    K2VFSZʁ ਓੜᴍᏐ
84. ޒഒላӃ .01$0/ ֘ላࢿྉ݁ߏɺԋࢉ๏嗎ʁ ਓੜᴍᏐ
85. ޒഒላӃ .01$0/ ؐ༗ॄኄʁ ਓੜᴍᏐ
86. ޒഒላӃ .01$0/ ൛ຊ߇੍ ਓੜᴍᏐ 非業配
87. ޒഒላӃ .01$0/ "TTFU
    ଧแ޻۩ ਓੜᴍᏐ
88. ޒഒላӃ .01$0/ ཆ੒؃จ݅తश׳ ਓੜᴍᏐ
89. ޒഒላӃ .01$0/ ӳจ ਓੜᴍᏐ
90. ޒഒላӃ .01$0/ ౤ࢿҰఆ༗෩ᯃɼٕज़౤ࢿ༗ᩲ༗ഛɼ
    ਃߪલጯৄ閱ެ։說໌ॻɻ ਓੜᴍᏐ
91. ޒഒላӃ .01$0/ ኺ৽ख্࿏౸࿝അ్ࣝ
92. ޒഒላӃ .01$0/ ૉਓ᫚৬੒ޭతՄೳੑʁ ৽खᢛ࿝അ
93. ޒഒላӃ .01$0/ զෆੋՊ൝ඟۀత ৽खᢛ࿝അ
94. ޒഒላӃ .01$0/ զཁઌላ哪Ұ׺ఔࣜޠݴʁ ৽खᢛ࿝അ
95. ޒഒላӃ .01$0/ ઌ૝辦๏፤౸໳ථʂ ৽खᢛ࿝അ
96. ޒഒላӃ .01$0/ ઌᏓ੒ʮ৽खʯ ৽खᢛ࿝അ
97. ޒഒላӃ .01$0/ ၏ላ໰తํࣜ ৽खᢛ࿝അ
98. ޒഒላӃ .01$0/ େ෦份తٕज़ඃᚙ໌ग़ိ
    ੋཁղܾಛఆ໰୊త ৽खᢛ࿝അ
99. ޒഒላӃ .01$0/ ࿝അ్ࣝ೭༌ೖἫ ৽खᢛ࿝അ
100. ޒഒላӃ .01$0/ ॏᴍɿ׭໢จ݅
     
     ن֨ख࡭
     ࣗզ੒௕ ৽खᢛ࿝അ
101. ޒഒላӃ .01$0/ ৽खᢛ࿝അ
102. ޒഒላӃ .01$0/ ৽खᢛ࿝അ
103. ޒഒላӃ .01$0/ ཧղࡉઅ ৽खᢛ࿝അ
104. ޒഒላӃ .01$0/ อ࣋޷ح৺ ৽खᢛ࿝അ
105. ޒഒላӃ .01$0/ ෆཁ࠶૬৴ᔒ༗ࠜᎦత說๏ྃ ৽खᢛ࿝അ
106. ޒഒላӃ .01$0/ ؁҆፻ʁ ৽खᢛ࿝അ
107. ޒഒላӃ .01$0/ ᩇॻʂ ৽खᢛ࿝അ
108. ޒഒላӃ .01$0/ ਪનॻ໨ ৽खᢛ࿝അ
109. ޒഒላӃ .01$0/ ਪનॻ໨ w:PV
     %POU
     ,OPX
     +4
     ܥྻ
     w
     ᮷阱ʂ
     ޡղʂ
     ఱॏ৽ೝࣝ
     +BWB4DSJQUʂ
     w&MPRVFOU
     +BWB4DSJQU
     w&GGFDUJWF
     +BWB4DSJQU
110. ޒഒላӃ .01$0/ 閱ᩇݪ࢝ᛰ ৽खᢛ࿝അ
111. ޒഒላӃ .01$0/ ( function( global, factory ) { "use strict"; // 略略 } )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { // 略略 IIFE ৽खᢛ࿝അ
112. ޒഒላӃ .01$0/ ࿝അ్ࣝ೭༌ग़Ἣ ৽खᢛ࿝അ
113. ޒഒላӃ .01$0/ ࢪൺडߋ༗ಘ ৽खᢛ࿝അ
114. ޒഒላӃ .01$0/ ʮ೗Ռ你ߨ౸࿈你Ѩ嫲౎ᡒత懂త࿩ʯ ৽खᢛ࿝അ
115. ޒഒላӃ .01$0/ 㑚Ө
     
     ࣗݴࣗޠʂ ৽खᢛ࿝അ
116. ޒഒላӃ .01$0/ ሜจষ ৽खᢛ࿝അ
117. ޒഒላӃ .01$0/ ሜจষෆੋҝྃ૝ߚɺ
     ࣕੋҝྃࢥߟᢛࣗզሣ࿩ ৽खᢛ࿝അ
118. ޒഒላӃ .01$0/ J5)PNF
     ᭿ਓᩱ ৽खᢛ࿝അ
119. ޒഒላӃ .01$0/ 4JEF
     1SPKFDU ৽खᢛ࿝അ
120. ޒഒላӃ .01$0/ ৽ख্࿏ ৽खᢛ࿝അ
121. ޒഒላӃ .01$0/ ෆཁযྀɺෆཁᛇ๩
122. ޒഒላӃ .01$0/ photo by redjar
123. ޒഒላӃ .01$0/ photo by Quality & Style
124. ޒഒላӃ .01$0/ Ҏ্Ͱ͢ʂ
125. ޒഒላӃ .01$0/ 歡迎加 好友