Upgrade to Pro — share decks privately, control downloads, hide ads and more …

javascriptのデータ構造について

 javascriptのデータ構造について

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

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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. ׀꫼耮֮׶ָהֲ׀ְׂת׃׋կ