javascriptのデータ構造について

javascriptのデータ構造の特徴とパフォーマンスについて

Transcript

1. j ja av va as sc cr ri ip pt t D Da at ta a S St tr ru uc ct tu ur re es s
2. せ⵸: @brn (ꫬꅿ⨳ⵃ
   a.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔ
   RightSegment٥AI Messenger ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
3. Why?
   ،ٕ؞ٔؤيכ㢳ֻך㜥さر٦ة圓鸡ח״׏ג寸㹀ׁ׸תׅկ ת׋ػؿؓ٦وٝأךنزٕطحؙחז׷ך׮ ر٦ة圓鸡ך㜥さָ㢳ְדׅկ זךדծjavascriptךر٦ة圓鸡ך •  暴䗙 •  ػؿؓ٦وٝأ •  ⢪ְ䨽 ׾ֶ鑧דֹ׸לה䙼ְתׅկ
   
4. ה׶ִ֮׆鋙ִ׷ֿה
   •  㘗ָずׄ㜥さדꂁ⴨ד葺ְ㜥さ => Array •  㘗ָ麩ֻגꂁ⴨ָ葺ְ㜥さ => Object •  せ⵸ד،ؙإأ׃׋ְ㜥さ => Object •  Set׾⢪ְ׋ְ㜥さ => Object •  Object׾ؗ٦ח׃׋Map٥Setָק׃ְ㜥さ => Map٥Set •  Iterator׾⢪ְ׋ְ㜥さ => Object.keys •  暴㹀ךObjectַ׵׃ַ،ؙإأׇׁ׋ֻזְ㜥さ => WeakMap •  Objectך㼐ㄏהず劍׃׋ְ㜥さ => WeakMap •  غ؎شٔ׾䪔ְ׋ְהֹ => TypedArray •  ؒٝر؍،ٝ׾濼׶׋ְהֹ => DataSet
5. Array
   ת׆כծֶ꼧厩׫ךꂁ⴨דׅկ P Pr ro os s •  ؎ٝرحؙأ穗歋ד،ؙإأׅ׷ֿהדծ넝鸞ח暴㹀ךر٦ة׾《䖤〳腉 •  ꥴ꟦זֻ⚛ץ׷הًٌٔ♳ח鸬竲׃׋걄㚖ד然⥂ׁ׸׷׋׭넝鸞 C Co on ns s •  ر٦ةꆀָ㟓ִ׷ה䯏Ⰵׅ׷׋ןחًٌٔⱄ《䖤
   ծ؝ؾ٦ָ饥׶鹼ְ •  䌢ח侧⦼ד،ؙإأ׃זְהְֽזְկ
6. Array
   ꂁ⴨כ姻׃ֻ⢪ִלծjavascriptךر٦ة圓鸡ך⚥דכ剑鸞דׅկ 姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ •  銲稆ך㘗׾֮׻ׇ׷կ •  鸬竲׃ג䯏Ⰵׅ׷կꥴ꟦׾瑞ֽזְկ •  ؔـآؙؑزה׃ג⢪׻זְկ
7. Object
   ְ׻ײ׷鸬䟝ꂁ⴨ה׃ג⢪ִתׅկ 鸞䏝כꂁ⴨ך如ח傍ְדׅկ P Pr ro os s •  ؗ٦せָ荈歋 •  ⦼׮荈歋 •  知⽃ח䭁䓸דֹ׷ •  ꂁ⴨ה׃ג׮⢪ִ׷ C Co on ns s •  ؗ٦せחכ俑㶵⴨׃ַ⢪ִזְ侧⦼כ荈⹛㢌䳔
8. Object
   ꂁ⴨ה׃ג׮⢪ִ׷կ var likeArray = {length: 1, 0: 'a'} lengthفٗػذ؍׾鏣㹀ׅ׷הꂁ⴨ך״ֲח䮶׷莸ֲ圫חז׶תׅկ
9. Object
   姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ •  鸬䟝ꂁ⴨חׅ׷㜥さכծؗ٦חכ俑㶵⴨׃ַ⢪׻זְկ •  ꂁ⴨ה׃ג⢪ֲ㜥さכlength׾鏣㹀ׅ׷
10. ArrayBuffer٥ArrayBufferView
    ArrayBufferכغ؎شٔךغحؿ؋ד⽃⡤דכ乼⡲דֹזְկ TypedArrayַDataViewדview׾♷ִ׷ֿהד乼⡲〳腉חז׷կ TypedArrayכ㘗➰ֹ侧⦼ꂁ⴨ Uint**Array Int**Array ך״ֲחUnsignedהSignedך✳珏겲ָ8ַ׵32תד֮׷կ DataViewכفٓحزؿؓ٦ي杝甧ךغ؎ز乼⡲欽Viewדծ فٓحزؿؓ٦يךؒٝر؍،ٝ׾搀鋔׃ג乼⡲דֹ׷կ
11. const u32Arr = new Uint32Array(new ArrayBuffer(1024));! // ArrayBufferの第一引数はバイト数、実際の要素数はViewのバイト数で割った数 // 32bitなら1024 / 4で256要素格納可能 u32Arr[0] = 1; // ここでは0byteオフセット byteLength = 0 && length = 0! u32Arr[1] = 1; // ここでは4byteオフセット byteLength = 4 && length = 1! ! const dv = new DataView(new ArrayBuffer(1024));! dv.setUint8(2, 1); // Uint8の値を2byteオフセットの位置に書き込む! dv.setInt32(0, 1); // Int32の値を4byteオフセットの位置に書き込む
12. ArrayBuffer٥ArrayBufferView
    姻׃ֻ⢪ֲ •  غ؎شٔر٦ة׾䪔ֲהֹ •  侧⦼ך׫ךꂁ⴨ (䖓鶢)
13. Map
    Java괏㄂זMapؙٓأדׅկ ֿךؙٓأך剑㣐ך暴䗙כؗ٦חׅץגךؔـآؙؑز ׾⢪ִ׷ֿהדׅկ P Pr ro os s •  ؗ٦ָ荈歋 •  iterator׾㹋鄲׃ג֮׷ C Co on ns s •  ؗ٦ָ⿫撑׾䭯׍竲ֽ׷ •  鹼ְ
14. Map
    姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ •  ؗ٦חؔـآؙؑز׾⢪ֲ㜥さכ⢪׻זֻז׏׋׵׃׏ַ׶嶊ׅկ •  俑㶵⴨׾ؗ٦חׅ׷㜥さכ׉׮׉׮⢪׻זְկ➿׻׶חؔـآؙؑز ׾⢪ֲ
15. Set
    Java괏㄂זSetؙٓأדׅկ Mapהずׄ״ֲחؔـآؙؑز׾ؗ٦חדֹתׅկ P Pr ro os s •  ؗ٦ָ荈歋 •  iterator׾㹋鄲׃ג֮׷ C Co on ns s •  ؗ٦ָ⿫撑׾䭯׍竲ֽ׷ •  鹼ְ
16. Set
    姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ •  ؗ٦חؔـآؙؑز׾⢪ֲ㜥さכ⢪׻זֻז׏׋׵׃׏ַ׶嶊ׅկ •  俑㶵⴨׾ؗ٦חׅ׷㜥さכ׉׮׉׮⢪׻זְկ➿׻׶חؔـآؙؑز ׾⢪ֲ
17. WeakMap
    ؔـآؙؑزך׫׾ؗ٦חה׶ծ׉׸׵׾䓲⿫撑ד䭯׍תׅկ ؔـآؙؑزָGCׁ׸׷הず儗חؗ٦׮嶊徦׃תׅկ P Pr ro os s •  ؔـآؙؑزך㼐ㄏ׾罋ִזֻג葺ְ •  ؔـآؙؑز׾ؗ٦חדֹ׷ C Co on ns s •  ؎ذٖ٦ءّٝדֹזְկ •  鹼ְ
18. WeakMap
    姻׃ֻ⢪ֲ •  فٓ؎ك٦زر٦ة׾⡲׷הֹװٍؗحءُ׾㹋鄲ׅ׷㜥さח⢪ֲկ
19. WeakSet
    WeakMapךSet晛 ⟃♴殛
20. Be better …
    Javascriptחכ醱꧟זر٦ة圓鸡ָזְךדծObject׾㢳欽׃ָ׍կ ׃ַ׃ؔـآؙؑز׾湫䱸鍗׷ךכדֹ׷׌ֽ鼘ֽ׋ְկ ⡦׃׹㘗ָזְךדծ植㖈ך㹋ꥷך圓鸡ָ⡦זךַ✮䟝׃ב׵ְ׋׭կ
    Objectחꣲ׵׆javascriptךر٦ة圓鸡כ腚䓲זךדծفٔىذ؍ـر٦ة 圓鸡ח鍗׸׷הֹכדֹ׷׌ֽծؙٓأ瘝ד䬄韋⻉ׅץֹկ
21. // より防御的なデータ構造 Object.freeze({}); // webのマナーではないれども... Object.defineProperty(arr, 'length', {! writable: false,! value: arr.length! }); // lengthを固定!
22. Abstraction
    ☓ data.something = 100; // ֿ׸ָ鷄⸇זךַծ刿倜זךַׅ׵׻ַ ׵זְ ◦ data.setSomething(100); // ؙٓأך㜥さ ◦ interface Data {something: number} // typescript
23. Performance
    javascriptדכ葿ղ䊨㣗׃גر٦ة圓鸡⡲׷״׶ծ⽃秪זꂁ⴨ך倯ָ넝鸞ז ؛٦أָ㢳ְկ ז׈ז׵⿫撑ך㽷䨽䚍ַָז׶ػؿؓ٦وٝأח갟ַֻ׵կ 鸬穠ٔأز⡲׷ֻ׵ְז׵ꂁ⴨⢪ִ
24. Performance
    TypedArrayכ鹼ְկ 劤勻傍ְכ׆זך׌ָկկկ ת׌ؒٝآٝח״׏ג剑黝⻉ָ׃׏ַ׶ׁ׸גְזְկ Firefoxכ傍ְ Safari٥Chrome٥IE/Edgeכꂁ⴨ךקֲָ傍ְկ
25. 0 10 20 30 40 50 60 70 80 90 100 Chrom Safari Firefox Edge Performance
    剑׮鹼ְ׮ך׾100%ה׃׋הֹךぐر٦ة圓鸡ךػؿؓ٦وٝأ
    (2017/06/06)
    http://jsben.ch/#/hohWB
26. Performance
    •  ؚٓؿ׾鋅׷הMapָ衼׃ֻ鹼ְկ •  MapַWeakMapכػؿؓ٦وٝأؙٔذ؍ٕؕז㜥䨽דכ銲岣䠐 •  ꂁ⴨כהחַֻ傍ְկ如挿דؔـآؙؑزկ •  㘗ָ♧荜׃זְ㜥さך鸞䏝⡚♴׮Safari瘝דכ孡׾אֽ׋ְկ •  Edgeָ穠圓⮚猕
27. Result
    •  㘗ָずׄ㜥さדꂁ⴨ד葺ְ㜥さ => Array •  㘗ָ麩ֻגꂁ⴨ָ葺ְ㜥さ => Object •  せ⵸ד،ؙإأ׃׋ְ㜥さ => Object •  Set׾⢪ְ׋ְ㜥さ => Object •  Object׾ؗ٦ח׃׋Map٥Setָק׃ְ㜥さ => Map٥Set •  Iterator׾⢪ְ׋ְ㜥さ => Object.keys •  暴㹀ךObjectַ׵׃ַ،ؙإأׇׁ׋ֻזְ㜥さ => WeakMap •  Objectך㼐ㄏהず劍׃׋ְ㜥さ => WeakMap •  غ؎شٔ׾䪔ְ׋ְהֹ => TypedArray •  ؒٝر؍،ٝ׾濼׶׋ְהֹ => DataSet
28. Summary
    ꂁ⴨؞ٔ䬃׃项俱חז׏ג׃ת׏׋… ➙㔐鎉ְ׋ַ׏׋ֿהכ ׍ׯ׿ה罋ִגر٦ة圓鸡׾⢪ְת׃׳ֲկ ׏גֿהדׅկ
29. ׀꫼耮֮׶ָהֲ׀ְׂת׃׋կ