SlideShare a Scribd company logo
1 of 29
Download to read offline
jjaavvaassccrriipptt DDaattaa SSttrruuccttuurreess
: @brn ( a.k.a )
: 
: Cyberagent RightSegment AI Messenger
: http://abcdef.gets.b6n.ch/
Twitter: https://twitter.com/brn227
GitHub: https://github.com/brn
Why?




javascript 
•  
•  
• 
•  => Array
•  => Object
•  => Object
•  Set => Object
•  Object Map Set => Map Set
•  Iterator => Object.keys
•  Object => WeakMap
•  Object => WeakMap
•  => TypedArray
•  => DataSet
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 

DataView View
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オフセットの位置に書き込む
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: arr.length!
}); // lengthを固定!
Abstraction
☓	data.something	=	100;	//	
	

○	data.setSomething(100);	//	 	

○	interface	Data	{something:	number}	//	typescript
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/#/hohWB
Performance
•  Map 
•  Map WeakMap 
•  
•  Safari 
•  Edge
Result
•  => Array
•  => Object
•  => Object
•  Set => Object
•  Object Map Set => Map Set
•  Iterator => Object.keys
•  Object => WeakMap
•  Object => WeakMap
•  => TypedArray
•  => DataSet
Summary
…
javascriptのデータ構造の話

More Related Content

javascriptのデータ構造の話