改めて理解するJavaScript Array / Understanding JavaScript Array

2018/5/19 初夏のJavaScript祭 https://javascript-fes.doorkeeper.jp/events/73314 にて発表したものです。

Transcript

1. վΊͯཧղ͢Δ+BWB4DSJQU
   "SSBZ .BZ
   
   
   
   ॳՆͷ+BWB4DSJQUࡇ
 !PLVOPLFOUBSP
2. ୭ w Ԟ໺
   ݡଠ࿠
   !PLVOPLFOUBSP
   w גࣜձࣾϐΫηϧάϦ ο υ
3. ࣥච w $PEF(SJE
   • https://www.codegrid.net/ w 5ZQF4DSJQU
   3Y+4ͳͲ
   w "OHVMBSσϕϩούʔζΨΠ υ
4. OHKBQBO w "OHVMBSͱ8FCٕज़ʹؔ͢Δ
 ೔ຊͷΧϯϑΝϨϯε
   • https://ngjapan.org/ w ݄೔
   ౔
   ౦ژ࿡ຊ໦
5. ࠓ೔ͷ࿩ w +BWB4DSJQU
   "SSBZ
   w ͦͷϥΠ ϒϥ Ϧ͸ຊ౰ʹඞཁ͔ ʁ
   w ਖ਼͍͠ϝ ιο υΛબ୒͢Δ
6. +BWB4DSJQUʹ͓͚Δ഑ྻ w ഑ྻ
   "SSBZ Λѻ͏ʹ͸
 const fruits = ['Apple', 'Banana']; w ഑ྻ͔Β஋ΛऔΓग़͢ʹ͸
 console.log(fruits[0]); // Apple
7. 2
   ഑ྻͷதͷ஋͢΂ͯΛഒ͠ͳ͍͞ w ͜ͷ഑ྻͷதͷ஋Λ͢΂ͯഒͯ͠৽͍͠഑ྻΛ࡞Δ
 const arr = [1, 2, 3, 4, 5]; w Ͳ͏͢Δ͔
   w GPSจΛ࢖͏
   w̹ 2VFSZΛ࢖͏
   w MPEBTIΛ࢖͏
8. ͲΕ΋࢖Θͳ͘ ͍͍ͯ w ഑ྻͷதͷ஋Λͻͱͭͣͭॲཧͯ݁͠ՌΛฦ͚ͩ͢ͳΒ͹ɺ 
 ϥΠ ϒϥ ϦΛ࢖͏ඞཁ΋ͳ͚Ε͹ɺ GPSจ΋ඞཁͳ͍
   w [1, 2, 3, 4, 5].map(v => v * 2);
 
 // [2, 4, 6, 8, 10]
9. "SSBZͷϝιο υ w +BWB4DSJQUͰͷ഑ྻͱ͸ɺ "SSBZΠϯελϯεͰ͋Δ
   w Array.prototype.xxxx()ͱ͍͏ ϝ ιο υΛ਺ଟ࣋ͪ͘
 [0, 1, 2].xxxx()ͷΑ ͏ʹͯ͠࢖͑Δ
   • https://developer.mozilla.org/ja/docs/Web/JavaScript/ Reference/Global_Objects/Array
10. ͦͷϥΠ ϒϥ Ϧɺ ຊ౰ʹඞཁ͔ ʁ
11. ͦͷϥΠ ϒϥ ϦཁΒͳ͍͔΋ w K2VFSZ
    MPEBTI
    6OEFSTDPSFKT
    w ͳΜͱͳ͘ Ͱ࢖͍ͬͯͳ͍͔
12. &$."4DSJQU w +BWB4DSJQUʹ͸ݴޠ࢓༷ͷ൛ ʢόʔδϣϯʣ ͕ଘࡏ͢Δ͜ͱΛҙࣝ͢Δ
    w ೥
    &4
    
    w ೥
    &4
    
    ˠ
    &4
     ʢ͔͜͜Βຖ೥ʣ
    w ೥
    &4
    
    w +BWB4DSJQU͸ຖ೥ਐԽ͍ͯ͠Δ
13. &4
    ʹ͸഑ྻૢ࡞͕๛෋ w &4
    ʹ͸ɺ ഑ྻૢ࡞ʹؔ͢Δϝ ιο υ͕ଟ͘௥Ճ͞Ε͍ͯΔ
    w #map(), #filter(), #forEach(), #some(), #every(), #reduce()ͳͲ
    w *&͕৺഑ ʁ 
 શϒϥ΢βରԠ ʢ೥ʹ͓͍ͯʣ
14. &4
    Ͱ΋഑ྻૢ࡞͕௥Ճ w #find(), #findIndex()ͳͲ
    w *&͕৺഑ ʁ 
 *&͸ແࢹ͢ΔίϯύΠ ϥΛ࢖͏
    #BCFM
    5ZQF4DSJQU
15. ඪ४͕େ൒ΛΧόʔ w K2VFSZ
    MPEBTI
    6OEFSTDPSFKT
    w ͜ΕΒͷϥΠ ϒϥ Ϧ͕࣋ͭ഑ྻॲཧ͸ɺ େ൒͕ඪ४ͰඋΘ͍ͬͯΔ
    w ΄΅&4
    ͷ࣌఺ͰΧόʔͰ͖͍ͯΔ
16. ͨͱ͑͹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']
17. ඪ४Λ࢖͏ ͱ • const arr = ['A', 'B', 'C']; • arr.map(function(v, i) {
 return `${v}${i}`;
 }); • arr.map((v, i) => `${v}${i}`); • // ['A0', 'B1', 'C2']
18. ͳͥϥΠ ϒϥ ϦΛ࢖Θͳ͍΄͏͕Α͍ͷ͔ w ґଘઌ͸গͳ͚Ε͹গͳ͍΄ͲΑ͍
    w ࣗ෼ͷίʔ υ͸෗Δ͕ɺ ଞਓͷίʔ υ΋෗Δ
    w ґଘ͕ଟ͚Ε͹ଟ͍΄Ͳɺ ͦΕͧΕͷϥΠ ϒϥ ϦͷόʔδϣϯΛ
 ߋ৽͢Δख͕ؒൃੜ
    w ϝϯςφϯε͞ΕΔظؒ͸ɺ ϥΠ ϒϥ ϦΑ Γඪ४ͷ΄͏͕ ʢগͳ͘ ͱ΋ʣ ௕͍
19. ύϑΥʔϚϯε্ͷ؍఺ w ඪ४͸ωΠςΟ ϒίʔ υͱͯ͠ಈ࡞
    w ϥΠ ϒϥ Ϧ͸+BWB4DSJQUͱͯ͠ॻ͔Εɺ ϥϯλΠϜͰಈ࡞
    w ϥΠ ϒϥ ϦΛ࢖Θͳ͍͜ͱͰɺ μ΢ϯϩʔ υ ʢ$%/ܦ༝ʣ ͷ࣌ؒͷ୹ॖ΍
 8FCQBDLͰͷόϯ υϧ݁Ռͷ༰ྔ࡟ݮ
20. Ͳ͏ ͯ͠΋࢖͍͍ͨͳΒ w ͦΕͰ΋MPEBTIͷ_.isEqual()͚ͩ͸࢖͍͍ͨΜͩ ʂ 
 Έ͍ͨͳέʔε
    w npm i --save lodash
 Ͱ͸ͳ͘
 npm i --save lodash.isequal
 ͱͯ͠ɺ ඞཁͳ΋ͷ͚ͩΠϯε τʔϧ͢Δͷ͕Α͍
21. ਖ਼͍͠ϝιο υΛબ୒͢Δ
22. ഑ྻ಺͔Β֘౰ͷͻͱͭΛऔΓग़͢ w ࣮ࡍʹ͋ͬͨ࿩
    w const fruits = ['Apple', 'Banana', 'Orange']; w Banana͚ͩऔΓग़͍ͨ͠
 ʢԿݸ໨ʹ͋Δ͔͸෼͔͍ͬͯͳ͍΋ͷͱ͢Δʣ
23. ޡͬͨϝιο υબ୒͸ҙਤ͕఻ΘΓʹ͍͘ w fruits.filter(v => v === 'Banana')[0]; // Banana w #filter()ͯ͠[0]Λ͚ͭΔͱ͍͏΍ΓํͰ͸
 ʮϑΟϧλʔ͍ͨ͠ͷ͔ʯ ɺ ʮͻͱ͚ͭͩऔΓग़͍ͨ͠ͷ͔ʯ 
 ίʔ υΛಡΉਓʹҙਤ͕఻ΘΓʹ͍͘
24. ҙਤͷ఻ΘΔϝιο υબ୒ w fruits.find(v => v === 'Banana'); // Banana w ͜ͷྫͰ͸#filter()͔ͯ͠Β[0]͢ΔͷͰ͸ͳ͘
 #find()ͱ͍͏ద੾ͳϝ ιο υ͕ଘࡏ͢Δ
25. ίʔ υͱ͸ҙਤΛ఻͑Δ΋ͷ w ద੾ͳϝ ιο υͷ࢖༻Ͱɺ ॻ͖खͷҙਤΛద੾ʹಡΈखʹ఻͑Δ
    w ಈ͚͹͍͍΍Ͱ͸ͳ͍
    w ಈ͔͢͜ͱΑ Γɺ ఻͑Δ͜ͱ͕ང͔ʹॏཁ
    w ඪ४"1*ʹͲΜͳϝ ιο υ͕͋Γɺ Ͳ͏͍͏࣌ʹ࢖͑͹࠷ద͔
 ͍͍ͩͨ͸͓͍֮͑ͯͨ΄͏͕Α͍ ʢ͢΂ͯΛ҉ه͢Δඞཁ͸ͳ͍ʣ
26. ద੾ͳϝιο υબ୒Ͱ্ڃऀ΁ w ໭Γ஋͕͋Ε͹#map()Λɺ ͳ͚Ε͹#forEach()Λ࢖͏
    w #forEach()ͷதͰΦϒδΣΫ τΛॻ͖׵͑ΔΑ ͏ͳΒ#reduce()Λ࢖͏
    w #indexOf()ͷ݁Ռͱ-1Λൺֱͤͣʹ#includes()Λ࢖͏ ʢ&4
    ʣ
27. GPSจ͸ෆཁͳͷ͔ w ࢖Θͳ͍͜ͱ͸૿͕͑ͨɺ ෆཁͰ͸ͳ͍
    w ͨͩ͠ ʮύϑ ΥʔϚϯεͷͨΊʹGPSจΛ࢖͑͹Α͍ʯ ͱ͍͏ೝࣝ͸
 ΋͸΍աڈͷ΋ͷ
    w ్தͰϧʔϓΛൈ͚͍ͨ৔߹"SSBZͷϝ ιο υͰ͸ແཧͳͷͰ༗༻
    w ࣮ࡍ͸GPSจΑ ΓGPSPGจͷํָ͕
28. نఆճ਺͚ͩ܁Γฦ͍ͨ͠ͱ͖ w GPSจΛ࢖Θͣʹنఆճ਺͚ͩॲཧΛ܁Γฦ͍ͨ͠ͱ͖
    w [...Array(n)]ͱ͍͏ॻ͖ํ͕࢖͑Δ
    • [...Array(100)].forEach((_, i) => {
 // ԿΒ͔ͷॲཧ
 });
29. ·ͱΊ w &$."4DSJQUͷ࢓༷ͱಈ޲ΛνΣοΫ͢Δ
 ʢ·ͣ͸.%/Λಡ΋͏
    https://developer.mozilla.org/ja/
    ʣ
    w ϒϥ΢βͷ࣮૷ঢ়گΛνΣοΫ͢Δ
    w ϥΠ ϒϥ ϦΛ࢖Θͣʹඪ४ͷ"1*͚ͩͰ࣮ݱͰ͖ͳ͍͔ߟ͑Δ