ES6 Learning Notes - Built In Objects
New Array Changes
ES6 has added several new functions to Array instances.
find
Find the first member whose value is greater than 8:
var ary = [1, 5, 10];
var match = ary.find(item => item > 8);
match; // 10
findIndex
Returns the index of the first match:
var ary = [1, 5, 10];
var match = ary.findIndex(item => item > 3);
match; // 1
fill
The fill
function will fill the entire array with what you supply:
var ary = [1, 2, 3, 4, 5];
ary.fill('a');
ary; // ['a', 'a', 'a', 'a', 'a']
You can also supply a start and end index to the call:
ary.fill('a', 2, 3) // would change only index 2 to 'a'
copyWithin
Copies portions of existing array on top itself in a different location.
var ary = [1, 2, 3, 4]; // we want [1, 2, 1, 2]
// First parameter as the target (index 2)
// Second parameter is where you copy from (index 0)
// A third parameter would be the stopping point.
ary.copyWithin(2, 0); // [1, 2, 1, 2]
ary.copyWithin(2, 0, 1); // [1, 2, 1, 4]
ary.copyWithin(2, 0, 2); // [1, 2, 1, 2]
// Can also use negative indexes:
ary.copyWithin(0, -2); // [3, 4, 3, 4]
of
This is a way to create an array:
var ary = new Array(3); //[, , ]
var ofAry = Array.of(3); // [3]
ary.length; // 3
ofAry.length; // 1
from
Creates an array when given an array-like object.
Example grabbing all div
s in an HTML document:
var arrayLike = document.querySelectorAll('div');
// arrayLike.forEach is undefined
var fromArray = Array.from(arrayLike);
entries and keys
Returns entries from the entries function
var a = ['Joe', 'Jim', 'John'];
var entries = a.entries();
var firstEntry = entries.next().value;
firstEntry[0]; // 0 (the index)
firstEntry[1]; // 'Joe' (the value)
// `keys` are the indexes
var firstKey = keys.next().value;
firstKey; // 0
Array Comprehensions
Create a list based on an original list. This is easier to read than map
.
var ary = [for (i of [1, 2, 3]) i]; // [1, 2, 3]
var ary2 = [for (i of [1, 2, 3]) i * i]; // [1, 4, 9]
var ary3 = [for (i of [1, 2, 3]) if (i < 3 ) i]; // [1, 2]
// Cartesian product:
var ary4 = [for (first of ['William', 'John', 'Blake'])
for (middle of ['Robert', 'Andrew', 'John'])
if(first != middle) (first + ' ' + middle + ' Smith')]
ary4; // ["William Robert Smith", "William Andrew Smith" ...]
Set
Sets are a new ES6 object that are unique lists.
var set = new Set();
set.size; // 0
set.add("somevalue");
set.size; // 1
Sets convert everything using the toString
. Sets can be initialized with an Array:
var set = new Set([1, 2, 3]);
set.has(1); //true
set.clear();
will empty the set.
set.delete(item);
will delete the item:
var set = new Set();
set.add(1);
set.add(2);
set.delete(1);
set.size; // 1
Sets can be iterated with a forEach
, and will be iterated in insertion order. However, if order is really important, use an Array. for of
can also be used:
var set = new Set();
set.add(['Tom']);
set.add(['Dick']);
set.add(['Harry']);
var iterCount = 0;
set.forEach(item => iterationCount++);
iterationCount; // 3
var set = new Set([1, 2, 3]);
for (var item of set) {
iterationCount++;
}
iterationCount; // 3
Maps
Maps are collections of key-value pairs.
var map = new Map();
map.set("age", 35);
map.size; // 1
map.get("age"); // 35
var ageMap = new Map();
var ralph = {'name': 'Ralph'};
ageMap.set(ralph, 29);
ageMap.get(ralph); // 29
vap map = new Map([['name', 'John'], ['age', 15], ['weight', 155]]);
map.size; // 3
map.has('age'); // true
// Maps do not allow duplicate keys:
var map = new Map();
var key = {};
map.set(key, 'first');
map.set(key, 'second');
map.get(key); // 'second'
Maps have clear
and delete
like Sets.
Iterate Maps:
vap map = new Map([['name', 'John'], ['age', 15], ['weight', 155]]);
var iterationCount = 0;
map.forEach(function(value, key) {
iterationCount++;
// use value & key
});
// Now with `for of`
for(var [key, value] of map) {
// the key and the value are their own variables
iterationCount++;
}
Maps return an iterator of arrays of key-value pairs when entries
is called:
var map = new Map();
map.set('name', 'Joe');
var items = map.entries();
var first = items.next().value;
first[0]; // 'name'
first[1]; // 'Joe'
An iterator of values is returned when calling values
, and iterator of keys when calling keys
:
var map = new Map();
map.set(1, 'a');
var values = map.values();
var first = values.next().value;
first; // 'a'
var keys = map.keys();
var firstKey = keys.next().value;
firstKey; // 1
Maps can be constructed with an iterator.
WeakMap & WeakSet
In a normal Map and Set, pointers to objects are strong. If the object being pointed to is deleted, the Map/Set retains its pointer so the object can't be garbage collected. This is a problem for DOM nodes for example.
Because the garbage collector can happen at any time (and thus could remove items from a WeakSet
at any time), all the functionality that deals with sets as a whole has been removed from the WeakSet
.
For example, there is no size
property, forEach
, etc.
Other than that, they function the same: has
, delete
, clear
, etc.
WeakMap
s are like WeakSet
s, but we can do has
, get
, delete
, clear
, etc.
Since you can't check if a WeakMap
or WeakSet
are empty, you can just check if a specific member is gone.