Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
jjaavvaassccrriipptt DDaattaa SSttrruuccttuurreess
: @brn ( a.k.a )
: 
: Cyberagent RightSegment AI Messenger
: http://abcdef.gets.b6n.ch/
Twitter: https://twitter.com/brn22...
Why?




javascript 
•  
•  
• 
•  => Array
•  => Object
•  => Object
•  Set => Object
•  Object Map Set => Map Set
•  Iterator => Object.keys
•  Object =...
Array


PPrrooss

•  
•  

CCoonnss

•  
• 
Array
javascript 




•  
•  
• 
Object




PPrrooss

•  
•  
•  
•  

CCoonnss

• 
Object


var	likeArray	=	{length:	1,	0:	'a'}	

length
Object



•  
•  length
ArrayBuffer ArrayBufferView
ArrayBuffer 
TypedArray DataView view 

TypedArray 
Uint**Array
Int**Array
Unsigned Signed 8 32 
...
const u32Arr = new Uint32Array(new ArrayBuffer(1024));!
// ArrayBufferの第一引数はバイト数、実際の要素数はViewのバイト数で割った数	
// 32bitなら1024 / 4...
ArrayBuffer ArrayBufferView


•  
•  ( )
Map
Java Map 



PPrrooss

•  
•  iterator 

CCoonnss

•  
• 
Map



•  
• 
Set
Java Set 

Map 

PPrrooss

•  
•  iterator 

CCoonnss

•  
• 
Set



•  
• 
WeakMap

GC 

PPrrooss

•  
•  

CCoonnss

•  
• 
WeakMap


• 
WeakSet
WeakMap Set
Be better …
Javascript Object 




Object javascript
// より防御的なデータ構造	
Object.freeze({}); // webのマナーではないれども...	
Object.defineProperty(arr, 'length', {!
writable: false,!
value: ...
Abstraction
☓	data.something	=	100;	//	
	

○	data.setSomething(100);	//	 	

○	interface	Data	{something:	number}	//	typesc...
Performance
javascript
Performance
TypedArray 



Firefox 

Safari Chrome IE/Edge
0	
10	
20	
30	
40	
50	
60	
70	
80	
90	
100	
Chrom	
Safari	
Firefox	
Edge	
Performance
100% (2017/06/06)
http://jsben.ch/#/...
Performance
•  Map 
•  Map WeakMap 
•  
•  Safari 
•  Edge
Result
•  => Array
•  => Object
•  => Object
•  Set => Object
•  Object Map Set => Map Set
•  Iterator => Object.keys
•  O...
Summary
…
javascriptのデータ構造の話
Upcoming SlideShare
Loading in …5
×

javascriptのデータ構造の話

2,738 views

Published on

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

Published in: Engineering
  • Be the first to comment

javascriptのデータ構造の話

  1. 1. jjaavvaassccrriipptt DDaattaa SSttrruuccttuurreess
  2. 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. 3. Why? javascript •  •  • 
  4. 4. •  => Array •  => Object •  => Object •  Set => Object •  Object Map Set => Map Set •  Iterator => Object.keys •  Object => WeakMap •  Object => WeakMap •  => TypedArray •  => DataSet
  5. 5. Array PPrrooss •  •  CCoonnss •  • 
  6. 6. Array javascript •  •  • 
  7. 7. Object PPrrooss •  •  •  •  CCoonnss • 
  8. 8. Object var likeArray = {length: 1, 0: 'a'} length
  9. 9. Object •  •  length
  10. 10. ArrayBuffer ArrayBufferView ArrayBuffer TypedArray DataView view TypedArray Uint**Array Int**Array Unsigned Signed 8 32 DataView View
  11. 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. 12. ArrayBuffer ArrayBufferView •  •  ( )
  13. 13. Map Java Map PPrrooss •  •  iterator CCoonnss •  • 
  14. 14. Map •  • 
  15. 15. Set Java Set Map PPrrooss •  •  iterator CCoonnss •  • 
  16. 16. Set •  • 
  17. 17. WeakMap GC PPrrooss •  •  CCoonnss •  • 
  18. 18. WeakMap • 
  19. 19. WeakSet WeakMap Set
  20. 20. Be better … Javascript Object Object javascript
  21. 21. // より防御的なデータ構造 Object.freeze({}); // webのマナーではないれども... Object.defineProperty(arr, 'length', {! writable: false,! value: arr.length! }); // lengthを固定!
  22. 22. Abstraction ☓ data.something = 100; // ○ data.setSomething(100); // ○ interface Data {something: number} // typescript
  23. 23. Performance javascript
  24. 24. Performance TypedArray Firefox Safari Chrome IE/Edge
  25. 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. 26. Performance •  Map •  Map WeakMap •  •  Safari •  Edge
  27. 27. Result •  => Array •  => Object •  => Object •  Set => Object •  Object Map Set => Map Set •  Iterator => Object.keys •  Object => WeakMap •  Object => WeakMap •  => TypedArray •  => DataSet
  28. 28. Summary …

×