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.7k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
160
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
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
200
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
180
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
450
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
430
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
110
Taming you application's environments
salaboy
0
200
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
640
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
The Role of Developer Relations in AI Product Success.
giftojabu1
1
140
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Optimizing for Happiness
mojombo
376
70k
A better future with KSS
kneath
238
17k
Fireside Chat
paigeccino
34
3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Building an army of robots
kneath
302
43k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
We Have a Design System, Now What?
morganepeng
50
7.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
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*͚ͩͰ࣮ݱͰ͖ͳ͍͔ߟ͑Δ