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
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
170
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
650
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.3k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1k
Other Decks in Technology
See All in Technology
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
530
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
550
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
380
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
150
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.1k
Windows の新しい管理者保護モード
murachiakira
0
200
Active Directory攻防
cryptopeg
PRO
8
5.3k
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
310
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Being A Developer After 40
akosma
89
590k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Facilitating Awesome Meetings
lara
52
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Into the Great Unknown - MozCon
thekraken
35
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
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*͚ͩͰ࣮ݱͰ͖ͳ͍͔ߟ͑Δ