Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Learn JavaScript Well
Search
高見龍
October 25, 2020
Programming
1
1.2k
Learn JavaScript Well
MOPCON 2020 分享主題「打造資深實力 - 你該學好的 JavaScript」
高見龍
October 25, 2020
Tweet
Share
More Decks by 高見龍
See All by 高見龍
AI 時代的程式語言學習法
eddie
0
32
前端模組解放運動 - importmap
eddie
0
1.1k
Git 和 DevOps - 在混亂的流星群開發流程中找到小確幸
eddie
1
1.1k
模組化前端開發:從亂七八糟到組織有序
eddie
0
1.4k
被 Vue 框架耽誤的建置工具
eddie
1
900
開開心心寫測試,你的程式碼也會微笑
eddie
1
1.2k
Functional Ruby
eddie
0
240
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
730
How to Learn Web Framework Correctly
eddie
4
1.9k
Other Decks in Programming
See All in Programming
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
370
Regular Expressions, REXML, Automata Learning
makenowjust
0
180
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
110
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
210
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
3
1.3k
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜
dora1998
7
2.8k
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
120
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.5k
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
2
210
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
340
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
Testing 201, or: Great Expectations
jmmastey
35
6.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Thoughts on Productivity
jonyablonski
65
4.2k
Faster Mobile Websites
deanohume
304
30k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Building an army of robots
kneath
302
42k
Agile that works and the tools we love
rasmusluckow
327
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Statistics for Hackers
jakevdp
793
220k
Transcript
ޒഒላӃ .01$0/ ଧࢿਂመྗ 你該學好的 JavaScript ҝ㟬ࣗݾላ
a.k.a Eddie 愛現! 喜歡冷門的玩具 Ruby/Rails 開發者、講師 Ruby 技術推廣、教育、諮詢 台灣、日本等國內外 Ruby
技術研討會講者 部落格:https://kaochenlong.com 高見龍@eddiekao
ޒഒላӃ .01$0/ 第18刷 發售中 發售中 發售中
ޒഒላӃ .01$0/ Git 小教室
ޒഒላӃ .01$0/ 已絕版
ޒഒላӃ .01$0/ 敬請 期待
ޒഒላӃ .01$0/ ༗ᘋ㐸 電子書
ޒഒላӃ .01$0/ ʮላशෆधཁҝެ࢘ɺҝɼ ෆधཁҝผਓɼҝ你ࣗݾʯ ߴݟཾ
ޒഒላӃ .01$0/ ৬ೈᱪఔࢣʁ
ޒഒላӃ .01$0/ ೖҎ্ɼதڃະᕝ
ޒഒላӃ .01$0/ େߝ
ޒഒላӃ .01$0/ େߝ w+BWB4DSJQUతᢛෆ wಹࠣ༗झత+BWB4DSJQUޠ๏എޙతނࣄ w你ٕ֘ೳᴍᏐᴍࡏṜࠣํʂ wኺ৽ख্࿏౸അ్ࣝ
ޒഒላӃ .01$0/ DISCLAIMER 本次分享內容可能隱含部份商業或課程置入訊 息,請謹慎評估!
ޒഒላӃ .01$0/ ᪑ෆ
ޒഒላӃ .01$0/ ʮՖऒᚙɼ+BWB4DSJQUಹॄኄᗞઃܭʂʯ ᢛෆ
ޒഒላӃ .01$0/ ʮੈք্༗ၷछఔࣜޠݴɼ Ұछඃഃ౸ष಄ɼ另Ұछᔒਓ༻ʯ $ ೭#KBSOF4USPVTUSVQ ᢛෆ
ޒഒላӃ .01$0/ +4-JOU ᢛෆ
ޒഒላӃ .01$0/ +4-JOU Մೳ။ᩋ你᧷ಘࣗݾෆ။ሜఔࣜʂ ᢛෆ
ޒഒላӃ .01$0/ function hello() { return "world"; } function hello()
{ return "world"; } ᢛෆ
ޒഒላӃ .01$0/ 㑌छఔࣜޠݴ༗ᢛෆతҰ໘ ᢛෆ
ޒഒላӃ .01$0/ ෆཁੋ᪑ஶ鄉ຽҰىഃ ᢛෆ
ޒഒላӃ .01$0/ ༗झޠ๏എޙతނࣄ
ޒഒላӃ .01$0/ 你ಓએࠂੋዎኄҰճࣄ嗎ʁ ༗झޠ๏
ޒഒላӃ .01$0/ ᏓᏐએࠂ ༗झޠ๏
ޒഒላӃ .01$0/ var a = 1; console.log(a); // 會印出什什麼? ༗झޠ๏
1
ޒഒላӃ .01$0/ console.log(a); // 會印出? var a = 1; ༗झޠ๏
undefined
ޒഒላӃ .01$0/ ᏓᏐఏঢ 7BSJBCMF)PJTUJOH ༗झޠ๏
ޒഒላӃ .01$0/ var a; console.log(a); // 所以印出 undefined a =
1; ༗झޠ๏ 被拉到上面?
ޒഒላӃ .01$0/ ฤᩄWTᩄ $PNQJMBUJPOWT*OUFSQSFUBUJPO ༗झޠ๏
ޒഒላӃ .01$0/ ݐཱظWTࣥߦظ $SFBUJPO1IBTFWT&YFDVUJPO1IBTF ༗झޠ๏
ޒഒላӃ .01$0/ ݐཱظ Ḽ໊ʢ*EFOUJpFSʣ ਐߦॳ࢝Խ 1A 1B ༗झޠ๏
ޒഒላӃ .01$0/ ࣥߦظ ࣥߦവᏐො值 2 ༗झޠ๏
ޒഒላӃ .01$0/ var a = 1; console.log(a); ༗झޠ๏ ݐཱظ var
a; console.log(a); undefined 1A 1B
ޒഒላӃ .01$0/ var a = 1; console.log(a); ༗झޠ๏ ࣥߦظ a
= 1; console.log(a); 1 2 2
ޒഒላӃ .01$0/ ၷ֊ஈ ༗झޠ๏
ޒഒላӃ .01$0/ console.log(a); var a = 1; ༗झޠ๏ ݐཱظ console.log(a);
var a; undefined 1A 1B
ޒഒላӃ .01$0/ console.log(a); var a = 1; ༗झޠ๏ ࣥߦظ console.log(a);
a = 1; undefined 1 2 2
ޒഒላӃ .01$0/ খଌᱛ ༗झޠ๏
ޒഒላӃ .01$0/ var a = 1; var a; console.log(a); //
會印出什什麼? ༗झޠ๏ 1
ޒഒላӃ .01$0/ if (false) { var a = 1; }
console.log(a); // 會印出什什麼? ༗झޠ๏ undefined
ޒഒላӃ .01$0/ 另ҰछᏓᏐએࠂ ༗झޠ๏
ޒഒላӃ .01$0/ console.log(a); // 會印出什什麼? let a = 1; ༗झޠ๏
Reference Error
ޒഒላӃ .01$0/ ҼҝMFUෆ။ᏓᏐఏঢʁ ༗झޠ๏
ޒഒላӃ .01$0/ console.log(a); let a = 1; ༗झޠ๏ ݐཱظ console.log(a);
let a; 1A TDZ
ޒഒላӃ .01$0/ console.log(a); let a = 1; ༗झޠ๏ ࣥߦظ console.log(a);
a = 1; Reference Error 2
ޒഒላӃ .01$0/ ࣌ࢮე 5%;5FNQPSBM%FBE;POF ༗झޠ๏
ޒഒላӃ .01$0/ let a = 1; console.log(a); // 會印出什什麼? ༗झޠ๏
ޒഒላӃ .01$0/ let a = 1; console.log(a); ༗झޠ๏ ݐཱظ let
a; console.log(a); 1A TDZ
ޒഒላӃ .01$0/ let a = 1; console.log(a); ༗झޠ๏ ࣥߦظ a
= 1; console.log(a); 1 2 2
ޒഒላӃ .01$0/ MFU৽൛తWBS Ҏޙ༻MFUबྃʁ ༗झޠ๏
ޒഒላӃ .01$0/ വᏐએࠂ ༗झޠ๏
ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ ?
ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ ݐཱظ
1A 1B sayHello(); function sayHello() { console.log('hello'); } 2
ޒഒላӃ .01$0/ sayHello(); function sayHello() { console.log('hello'); } ༗झޠ๏ sayHello();
function sayHello() { console.log('hello'); } 2 ࣥߦظ hello
ޒഒላӃ .01$0/ { } ༗झޠ๏ 物件? Block?
ޒഒላӃ .01$0/ { hello: '哈囉' } ༗झޠ๏ 物件
ޒഒላӃ .01$0/ { hello: for (var i = 0; i
< 10; i++ ) { if (i % 2 === 0) { continue hello; } console.log(i); } } ༗झޠ๏ label label Block
ޒഒላӃ .01$0/ + 加號? 十字架? ༗झޠ๏
ޒഒላӃ .01$0/ DPFSDJPO<ˋkoʊˈɝː.ʃən> 5IFVTFPGGPSDFUPQFSTVBEFTPNFPOFUPEP TPNFUIJOHUIBUUIFZBSFVOXJMMJOHUPEP ༗झޠ๏
ޒഒላӃ .01$0/ +'' // 0 +[] // 0 +{} //
NaN +-1 // -1 +true // 1 +false // 0 +undefined // NaN +null // 0 ༗झޠ๏
ޒഒላӃ .01$0/ [] + [] // ? [] + {}
// ? {} + [] // ? ༗झޠ๏
ޒഒላӃ .01$0/ [] + [] ༗झޠ๏
ޒഒላӃ .01$0/ ༗झޠ๏
ޒഒላӃ .01$0/ [] + [] [].toString() + [].toString() ༗झޠ๏ 空字串
空字串
ޒഒላӃ .01$0/ [] + {} ༗झޠ๏
ޒഒላӃ .01$0/ [] + {} [].toString() + {}.toString() ༗झޠ๏ '[object
Object]' 字串串 空字串
ޒഒላӃ .01$0/ {} + [] ༗झޠ๏ Block
ޒഒላӃ .01$0/ [] + {} Block 後⾯面跟了了 +[] ༗झޠ๏ 0
ޒഒላӃ .01$0/ [] + [] // '' [] + {}
// '[object Object]' {} + [] // 0 ༗झޠ๏
ޒഒላӃ .01$0/ /B//PU"/VNCFS ༗झޠ๏
ޒഒላӃ .01$0/ console.log(typeof NaN); // 會印出什什麼? number ༗झޠ๏
ޒഒላӃ .01$0/ /B/ੋҰछᏐࣈ ୠሏ༻ိදࣔʮෆੋᏐࣈʯ ༗झޠ๏
ޒഒላӃ .01$0/ ʮݸᥒʯ᪑ʮݸᥒʯతࠩผʁ ༗झޠ๏
ޒഒላӃ .01$0/ ʮݸᥒෆ။ൺֱܕผʁʯ ༗झޠ๏
ޒഒላӃ .01$0/ ݸᥒ᪑ݸᥒతࠩผʁ ༗झޠ๏
ޒഒላӃ .01$0/ ཧղࡉઅ ༗झޠ๏
ޒഒላӃ .01$0/ 你ٕ֘ೳᴍᏐᴍࡏṜࠣํʂ ਓੜۤ
ޒഒላӃ .01$0/ ಓཧେՈಓɼୠೳ၏౸తᔒଟগ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ٕೳᴍᏐ༗ݶ ਓੜᴍᏐ
ޒഒላӃ .01$0/ Ռཁࢿࡏ+BWB4DSJQUత ਓੜᴍᏐ
ޒഒላӃ .01$0/ ਂೖ+BWB4DSJQU w݅ಋ wവᏐ$MPTVSF wUIJT wඇಉ㑊႔ཧ w&4.PEVMF
ޒഒላӃ .01$0/ ֘ላલᐽՍ嗎ʁ֘ላ哪Ұݸʁ ਓੜᴍᏐ "
ޒഒላӃ .01$0/ ؐཁෆཁላK2VFSZʁ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ֘ላࢿྉ݁ߏɺԋࢉ๏嗎ʁ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ؐ༗ॄኄʁ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ൛ຊ߇੍ ਓੜᴍᏐ 非業配
ޒഒላӃ .01$0/ "TTFUଧแ۩ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ཆจ݅తश׳ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ӳจ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ࢿҰఆ༗෩ᯃɼٕज़ࢿ༗ᩲ༗ഛɼ ਃߪલጯৄ閱ެ։說໌ॻɻ ਓੜᴍᏐ
ޒഒላӃ .01$0/ ኺ৽ख্࿏౸അ్ࣝ
ޒഒላӃ .01$0/ ૉਓ৬ޭతՄೳੑʁ ৽खᢛഅ
ޒഒላӃ .01$0/ զෆੋՊ൝ඟۀత ৽खᢛഅ
ޒഒላӃ .01$0/ զཁઌላ哪Ұఔࣜޠݴʁ ৽खᢛഅ
ޒഒላӃ .01$0/ ઌ辦๏፤౸ථʂ ৽खᢛഅ
ޒഒላӃ .01$0/ ઌᏓʮ৽खʯ ৽खᢛഅ
ޒഒላӃ .01$0/ ၏ላతํࣜ ৽खᢛഅ
ޒഒላӃ .01$0/ େ෦份తٕज़ඃᚙ໌ग़ိ ੋཁղܾಛఆత ৽खᢛഅ
ޒഒላӃ .01$0/ അ్ࣝ೭༌ೖἫ ৽खᢛഅ
ޒഒላӃ .01$0/ ॏᴍɿจ݅ن֨ख ࣗզ ৽खᢛഅ
ޒഒላӃ .01$0/ ৽खᢛഅ
ޒഒላӃ .01$0/ ৽खᢛഅ
ޒഒላӃ .01$0/ ཧղࡉઅ ৽खᢛഅ
ޒഒላӃ .01$0/ อ࣋ح৺ ৽खᢛഅ
ޒഒላӃ .01$0/ ෆཁ࠶૬৴ᔒ༗ࠜᎦత說๏ྃ ৽खᢛഅ
ޒഒላӃ .01$0/ ҆፻ʁ ৽खᢛഅ
ޒഒላӃ .01$0/ ᩇॻʂ ৽खᢛഅ
ޒഒላӃ .01$0/ ਪનॻ ৽खᢛഅ
ޒഒላӃ .01$0/ ਪનॻ w:PV%POU,OPX+4ܥྻ w᮷阱ʂޡղʂఱॏ৽ೝࣝ+BWB4DSJQUʂ w&MPRVFOU+BWB4DSJQU w&GGFDUJWF+BWB4DSJQU
ޒഒላӃ .01$0/ 閱ᩇݪ࢝ᛰ ৽खᢛഅ
ޒഒላӃ .01$0/ ( function( global, factory ) { "use strict";
// 略略 } )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { // 略略 IIFE ৽खᢛഅ
ޒഒላӃ .01$0/ അ్ࣝ೭༌ग़Ἣ ৽खᢛഅ
ޒഒላӃ .01$0/ ࢪൺडߋ༗ಘ ৽खᢛഅ
ޒഒላӃ .01$0/ ʮՌ你ߨ౸࿈你Ѩ嫲ᡒత懂తʯ ৽खᢛഅ
ޒഒላӃ .01$0/ 㑚Ө ࣗݴࣗޠʂ ৽खᢛഅ
ޒഒላӃ .01$0/ ሜจষ ৽खᢛഅ
ޒഒላӃ .01$0/ ሜจষෆੋҝྃߚɺ ࣕੋҝྃࢥߟᢛࣗզሣ ৽खᢛഅ
ޒഒላӃ .01$0/ J5)PNFਓᩱ ৽खᢛഅ
ޒഒላӃ .01$0/ 4JEF1SPKFDU ৽खᢛഅ
ޒഒላӃ .01$0/ ৽ख্࿏ ৽खᢛഅ
ޒഒላӃ .01$0/ ෆཁযྀɺෆཁᛇ
ޒഒላӃ .01$0/ photo by redjar
ޒഒላӃ .01$0/ photo by Quality & Style
ޒഒላӃ .01$0/ Ҏ্Ͱ͢ʂ
ޒഒላӃ .01$0/ 歡迎加 好友