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
改めて理解するJavaScript Array / Understanding JavaScr...
Search
OKUNOKENTARO
May 19, 2018
Technology
10
3.1k
改めて理解するJavaScript Array / Understanding JavaScript Array
2018/5/19 初夏のJavaScript祭
https://javascript-fes.doorkeeper.jp/events/73314
にて発表したものです。
OKUNOKENTARO
May 19, 2018
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
9.1k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
150
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
9.9k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.2k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.4k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
620
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.2k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1k
Other Decks in Technology
See All in Technology
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
630
APIテスト自動化の勘所
yokawasa
7
4.2k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.8k
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
100
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
使えそうで使われないCloudHSM
maikamibayashi
0
170
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.2k
Typedesign – Prime Four
hannesfritz
39
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Become a Pro
speakerdeck
PRO
24
5k
Music & Morning Musume
bryan
46
6.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
A Philosophy of Restraint
colly
203
16k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Bash Introduction
62gerente
608
210k
Automating Front-end Workflow
addyosmani
1365
200k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Transcript
վΊͯཧղ͢Δ+BWB4DSJQU"SSBZ .BZ ॳՆͷ+BWB4DSJQUࡇ !PLVOPLFOUBSP
୭ w Ԟݡଠ!PLVOPLFOUBSP w גࣜձࣾϐΫηϧάϦ ο υ
ࣥච w $PEF(SJE • https://www.codegrid.net/ w 5ZQF4DSJQU 3Y+4ͳͲ w "OHVMBSσϕϩούʔζΨΠ
υ
OHKBQBO w "OHVMBSͱ8FCٕज़ʹؔ͢Δ ຊͷΧϯϑΝϨϯε • https://ngjapan.org/ w ݄ ౦ژຊ
ࠓͷ w +BWB4DSJQU"SSBZ w ͦͷϥΠ ϒϥ Ϧຊʹඞཁ͔ ʁ w
ਖ਼͍͠ϝ ιο υΛબ͢Δ
+BWB4DSJQUʹ͓͚Δྻ w ྻ "SSBZ Λѻ͏ʹ const fruits = ['Apple', 'Banana'];
w ྻ͔ΒΛऔΓग़͢ʹ console.log(fruits[0]); // Apple
2ྻͷதͷͯ͢Λഒ͠ͳ͍͞ w ͜ͷྻͷதͷΛͯ͢ഒͯ͠৽͍͠ྻΛ࡞Δ const arr = [1, 2, 3, 4,
5]; w Ͳ͏͢Δ͔ w GPSจΛ͏ w̹ 2VFSZΛ͏ w MPEBTIΛ͏
ͲΕΘͳ͘ ͍͍ͯ w ྻͷதͷΛͻͱͭͣͭॲཧͯ݁͠ՌΛฦ͚ͩ͢ͳΒɺ ϥΠ ϒϥ ϦΛ͏ඞཁͳ͚Εɺ GPSจඞཁͳ͍ w
[1, 2, 3, 4, 5].map(v => v * 2); // [2, 4, 6, 8, 10]
"SSBZͷϝιο υ w +BWB4DSJQUͰͷྻͱɺ "SSBZΠϯελϯεͰ͋Δ w Array.prototype.xxxx()ͱ͍͏ ϝ ιο υΛଟ࣋ͪ͘
[0, 1, 2].xxxx()ͷΑ ͏ʹͯ͑͠Δ • https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array
ͦͷϥΠ ϒϥ Ϧɺ ຊʹඞཁ͔ ʁ
ͦͷϥΠ ϒϥ ϦཁΒͳ͍͔ w K2VFSZ MPEBTI 6OEFSTDPSFKT w ͳΜͱͳ͘ Ͱ͍ͬͯͳ͍͔
&$."4DSJQU w +BWB4DSJQUʹݴޠ༷ͷ൛ ʢόʔδϣϯʣ ͕ଘࡏ͢Δ͜ͱΛҙࣝ͢Δ w &4 w &4ˠ&4 ʢ͔͜͜Βຖʣ
w &4 w +BWB4DSJQUຖਐԽ͍ͯ͠Δ
&4ʹྻૢ࡞͕๛ w &4ʹɺ ྻૢ࡞ʹؔ͢Δϝ ιο υ͕ଟ͘Ճ͞Ε͍ͯΔ w #map(), #filter(), #forEach(),
#some(), #every(), #reduce()ͳͲ w *&͕৺ ʁ શϒϥβରԠ ʢʹ͓͍ͯʣ
&4Ͱྻૢ࡞͕Ճ w #find(), #findIndex()ͳͲ w *&͕৺ ʁ *&ແࢹ͢ΔίϯύΠ ϥΛ͏
#BCFM 5ZQF4DSJQU
ඪ४͕େΛΧόʔ w K2VFSZ MPEBTI 6OEFSTDPSFKT w ͜ΕΒͷϥΠ ϒϥ Ϧ͕࣋ͭྻॲཧɺ େ͕ඪ४ͰඋΘ͍ͬͯΔ
w ΄΅&4ͷ࣌ͰΧόʔͰ͖͍ͯΔ
ͨͱ͑NBQ • const arr = ['A', 'B', 'C']; •
$.map(arr, function(v, i) { return v + i; }); • _.map(arr, function(v, i) { return v + i; }); • // ['A0', 'B1', 'C2']
ඪ४Λ͏ ͱ • const arr = ['A', 'B', 'C']; •
arr.map(function(v, i) { return `${v}${i}`; }); • arr.map((v, i) => `${v}${i}`); • // ['A0', 'B1', 'C2']
ͳͥϥΠ ϒϥ ϦΛΘͳ͍΄͏͕Α͍ͷ͔ w ґଘઌগͳ͚Εগͳ͍΄ͲΑ͍ w ࣗͷίʔ υΔ͕ɺ ଞਓͷίʔ υΔ
w ґଘ͕ଟ͚Εଟ͍΄Ͳɺ ͦΕͧΕͷϥΠ ϒϥ ϦͷόʔδϣϯΛ ߋ৽͢Δख͕ؒൃੜ w ϝϯςφϯε͞ΕΔظؒɺ ϥΠ ϒϥ ϦΑ Γඪ४ͷ΄͏͕ ʢগͳ͘ ͱʣ ͍
ύϑΥʔϚϯε্ͷ؍ w ඪ४ωΠςΟ ϒίʔ υͱͯ͠ಈ࡞ w ϥΠ ϒϥ Ϧ+BWB4DSJQUͱͯ͠ॻ͔Εɺ ϥϯλΠϜͰಈ࡞
w ϥΠ ϒϥ ϦΛΘͳ͍͜ͱͰɺ μϯϩʔ υ ʢ$%/ܦ༝ʣ ͷ࣌ؒͷॖ 8FCQBDLͰͷόϯ υϧ݁Ռͷ༰ྔݮ
Ͳ͏ ͍͍ͯͨ͠ͳΒ w ͦΕͰMPEBTIͷ_.isEqual()͚͍͍ͩͨΜͩ ʂ Έ͍ͨͳέʔε w npm i
--save lodash Ͱͳ͘ npm i --save lodash.isequal ͱͯ͠ɺ ඞཁͳͷ͚ͩΠϯε τʔϧ͢Δͷ͕Α͍
ਖ਼͍͠ϝιο υΛબ͢Δ
ྻ͔Β֘ͷͻͱͭΛऔΓग़͢ w ࣮ࡍʹ͋ͬͨ w const fruits = ['Apple', 'Banana', 'Orange'];
w Banana͚ͩऔΓग़͍ͨ͠ ʢԿݸʹ͋Δ͔͔͍ͬͯͳ͍ͷͱ͢Δʣ
ޡͬͨϝιο υબҙਤ͕ΘΓʹ͍͘ w fruits.filter(v => v === 'Banana')[0]; // Banana
w #filter()ͯ͠[0]Λ͚ͭΔͱ͍͏ΓํͰ ʮϑΟϧλʔ͍ͨ͠ͷ͔ʯ ɺ ʮͻͱ͚ͭͩऔΓग़͍ͨ͠ͷ͔ʯ ίʔ υΛಡΉਓʹҙਤ͕ΘΓʹ͍͘
ҙਤͷΘΔϝιο υબ w fruits.find(v => v === 'Banana'); // Banana
w ͜ͷྫͰ#filter()͔ͯ͠Β[0]͢ΔͷͰͳ͘ #find()ͱ͍͏దͳϝ ιο υ͕ଘࡏ͢Δ
ίʔ υͱҙਤΛ͑Δͷ w దͳϝ ιο υͷ༻Ͱɺ ॻ͖खͷҙਤΛదʹಡΈखʹ͑Δ w ಈ͚͍͍Ͱͳ͍ w
ಈ͔͢͜ͱΑ Γɺ ͑Δ͜ͱ͕ང͔ʹॏཁ w ඪ४"1*ʹͲΜͳϝ ιο υ͕͋Γɺ Ͳ͏͍͏࣌ʹ͑࠷ద͔ ͍͍͓͍֮ͩͨ͑ͯͨ΄͏͕Α͍ ʢͯ͢Λ҉ه͢Δඞཁͳ͍ʣ
దͳϝιο υબͰ্ڃऀ w Γ͕͋Ε#map()Λɺ ͳ͚Ε#forEach()Λ͏ w #forEach()ͷதͰΦϒδΣΫ τΛॻ͖͑ΔΑ ͏ͳΒ#reduce()Λ͏ w
#indexOf()ͷ݁Ռͱ-1Λൺֱͤͣʹ#includes()Λ͏ ʢ&4ʣ
GPSจෆཁͳͷ͔ w Θͳ͍͜ͱ૿͕͑ͨɺ ෆཁͰͳ͍ w ͨͩ͠ ʮύϑ ΥʔϚϯεͷͨΊʹGPSจΛ͑Α͍ʯ ͱ͍͏ೝࣝ աڈͷͷ
w ్தͰϧʔϓΛൈ͚͍ͨ߹"SSBZͷϝ ιο υͰແཧͳͷͰ༗༻ w ࣮ࡍGPSจΑ ΓGPSPGจͷํָ͕
نఆճ͚ͩ܁Γฦ͍ͨ͠ͱ͖ w GPSจΛΘͣʹنఆճ͚ͩॲཧΛ܁Γฦ͍ͨ͠ͱ͖ w [...Array(n)]ͱ͍͏ॻ͖ํ͕͑Δ • [...Array(100)].forEach((_, i) => {
// ԿΒ͔ͷॲཧ });
·ͱΊ w &$."4DSJQUͷ༷ͱಈΛνΣοΫ͢Δ ʢ·ͣ.%/Λಡ͏https://developer.mozilla.org/ja/ʣ w ϒϥβͷ࣮ঢ়گΛνΣοΫ͢Δ w ϥΠ ϒϥ
ϦΛΘͣʹඪ४ͷ"1*͚ͩͰ࣮ݱͰ͖ͳ͍͔ߟ͑Δ