javascriptのデータ構造の特徴・使い所・パフォーマンスの話

1. jjaavvaassccrriipptt DDaattaa SSttrruuccttuurreess

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
PPrrooss
•
•
CCoonnss
•
•

6. Array
javascript
•
•
•

7. Object
PPrrooss
•
•
•
•
CCoonnss
•

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
PPrrooss
•
• iterator
CCoonnss
•
•

14. Map
•
•

15. Set
Java Set
Map
PPrrooss
•
• iterator
CCoonnss
•
•

16. Set
•
•

17. WeakMap
GC
PPrrooss
•
•
CCoonnss
•
•

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
…