Published
Edited
Jul 6, 2019
1 star
md`# ES6 Map and Set`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
md`## Object as map`
{
var map = {};
map['test'] = 'hello world';
return map['test'];
}
md`## Map as map`
{
let map = new Map();
map.set('test', 'hello world');
return map.get('test');
}
output = {
let map = new Map();
let keys = [
{ series: 'The Fantastic Four', issue: 1 }, // An Object
input => input.uppercase(), // A Function
null, // null
true, // boolean
'Gatsby', // string
undefined, // undefined
8675309, // number
Symbol.for('User') // symbol
// 9007199254740993n // bigint - This actually works just fine, but not in an Observable notebook.
];
keys.forEach(key => map.set(key, Math.random()));
return Array.from(map.entries());
}
{
let map = new Map([...output, ...[['key1', 'value1'], ['key2', 'value2']]]);
let values = [];
// for (let [key, val] of map) {
// values.push([key, val]);
// }
map.forEach((value, key) => values.push([key, value]));
return values;
}
{
let stringified = JSON.stringify(output);
let reconstitutedMap = new Map(JSON.parse(stringified));
// Q: Why are there suddenly only five entries?
// A: Because, we cannot put a function into a JSON object as a key. Ditto undefined and the symbol. So all
// all three end up getting translated to null and we end up setting the value for null four times (the fourth
// one ends up being the one we see in our output).
return Array.from(reconstitutedMap.entries());
}
{
let map = {};
map['third'] = 'third';
map['first'] = 'first';
map['second'] = 'second';
// This actually works under ES6 because it preserves the order of key addition to an object. Only something
// like IE11 would get this wrong.
return Object.keys(map);
}
md`## Set`
{
let set = new Set();
// No duplicates!
set.add('rice');
set.add('beans');
set.add('rice');
return Array(...set.values());
}
{
let set = new Set();
set.add({
"Number": 1,
"Year": 1967,
"Album": "Sgt. Pepper's Lonely Hearts Club Band",
"Artist": "The Beatles"
});
set.add({
"Number": 2,
"Year": 1966,
"Album": "Pet Sounds",
"Artist": "The Beach Boys"
});
set.add({
"Number": 3,
"Year": 1966,
"Album": "Revolver",
"Artist": "The Beatles"
});
set.add({
"Number": 4,
"Year": 1965,
"Album": "Highway 61 Revisited",
"Artist": "Bob Dylan"
});
set.add({
"Number": 5,
"Year": 1965,
"Album": "Rubber Soul",
"Artist": "The Beatles"
});
return new Array(...set.values());
}
md`## WeakMap and WeakSet`
{
// Right off the bat I'm going to confess that I have never used this feature. But I understand the need for it.
// If you want to keep additional information about an object, but still allow that object to be garbage
// collected, this two structures are your ticket.
// For example, let's say that every time an object is retrieved from the back-end we want to note when it was
// requested and when it arrived at the front-end. We don't want to do it on the object itself and if we put i
// into a Map, it can't get garbage collected because we will always have a reference to it in our map. But with
// a WeakMap, it can get get garbage collected if no other part of the code still has a reference.
}
html`<h2><a href="https://github.com/zloirock/core-js">core-js for IE11</a></h2>`
html`
<h2>MDN Links</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>
<ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#Implementing_basic_set_operations">Basic Set Operations</a></li></ul></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a></li>
</ul>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
