12. Array
• You know them, you love them
• maps number ➝ anything
• plus magical length property
13. var arr = new Array();
var arr = [];
// constructing with the from method
var imgs = Array.from( document.querySelectorAll( "IMG" ) );
var args = Array.from( arguments );
// with the spread operator
var imgs = [ ...document.querySelectorAll( "IMG" ) ];
var args = [ ...arguments ];
15. Set
• List of unique values
• no duplicates allowed
• does not map / associate with anything
16. var set = new Set();
set.add( "key" );
set.add( 208 );
set.add( { name: "Schrödinger's Cat", alive: undefined } );
set.add( window.document );
set.add( NaN );
17. var set = new Set();
var ann = { name: "Ann" };
var bob = { name: "Bob" };
set.add( ann );
set.add( bob );
set.has( ann ); // true
set.add( ann );
set.size; // returns 2
set.delete( ann );
set.size; // returns 1
20. var ann = { name: "Ann" };
var bob = { name: "Bob" };
var age = new Map();
age.set( ann, 45 );
age.set( bob, 27 );
age.get( bob ); // returns 27
21. WeakMap
• Similar to Map
• References to keys are weakly held
• Maps objects ➝ anything
• Does not have a determined size
22. var handlers = new Map();
[ "ryanseddon", "paul_irish" ].forEach( function( name ) {
var node = generateAvatarComponent( name );
handlers.set( node, showProfile );
parent.appendChild( node );
});
parent.remove();
// handlers contains 2 items
// you have a memory leak
23. var handlers = new WeakMap();
[ "ryanseddon", "paul_irish" ].forEach( function( name ) {
var node = generateAvatarComponent( name );
handlers.set( node, showProfile );
parent.appendChild( node );
});
parent.remove();
// handlers is empty
// no leaks!
25. Iterators
• An iterable lets you iterate over a list of values
• An object that contains a next() method
• returns an object containing { done, value }
• Create Iterators from Array, Map and Set
• Can NOT iterator over WeakMap and WeakSet
26. var array = [ "a", "b", "c" ];
var iterator = array.entries();
iterator.next(); // returns { done: false, value: [ 0, "a" ] }
iterator.next(); // returns { done: false, value: [ 1, "b" ] }
iterator.next(); // returns { done: false, value: [ 2, "c" ] }
iterator.next(); // returns { done: true, value: undefined }
// with for of and destructuring
for( var [ index, value ] of array.entries() ) {
console.log( index, value );
}
// compare
for( let index = 0; index < array.length; index++ ) {
console.log( index, array[ index ] );
}
27. new Array( iterable );
new Map( iterable );
new Set( iterable );
array.entries(); // iterator returns [ index, value ]
array.keys(); // iterator returns index
array.values(); // iterator returns value
map.entries(); // iterator returns [ key, value ]
map.keys(); // iterator returns key
map.values(); // iterator returns value
set.entries(); // iterator returns [ key, key ]
set.keys(); // iterator returns key
set.values(); // iterator returns key
29. Firefox IE11 Chrome1 Node2
Map / Set Yes Yes Yes Yes
WeakMap / WeakSet Yes WeakMap only Yes Yes
Iterables Non-conforming No Non-conforming No
Destructuring Yes No No No
Spread Yes No No No
1 requires enabling "experimental features"
2 requires running with the --harmony flag