Skip to content

Instantly share code, notes, and snippets.

@Nioub

Nioub/Javascript_basic_data_containers_cheatsheet.html

Last active April 12, 2022 07:58
Show Gist options
  • Save Nioub/db89a99173316f563a53fdc9c31a15d7 to your computer and use it in GitHub Desktop.
Save Nioub/db89a99173316f563a53fdc9c31a15d7 to your computer and use it in GitHub Desktop.
Download ZIP
Javascript basic data containers' cheatsheet
Raw
Javascript_basic_data_containers_cheatsheet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Nioub [email protected]">
<title>Javascript basic data containers' cheatsheet</title>
<style>
table {
border-collapse: collapse;
border: 2px solid black;
}
th {
background-color: darkblue;
}
th, th a {
color: white;
}
td, th {
border: 1px solid black;
}
.last-update {
text-align: right;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Type</th>
<th>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>
</th>
<th>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
used as an associative array</th>
<th>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>
</th>
<th>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Description
</th>
<td>
The basic mutable array, the order is implicit
<br>
Constains a treasure trove of functional programming:
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">reduce</a>, …
</td>
<td>
Historically used as an associative array,
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#objects_vs._maps">but semantics vastly differ</a>:
keys can only be String or Symbol, the order is only recently insertion order, …
</td>
<td>
A dedicated associative array, the order is insertion order
</td>
<td>
A dedicated set array, the order is insertion order
</td>
</tr>
<tr>
<th>
Create
</th>
<td>
<code>
let citiesArr = ['Chicago', 'Kinshasa'];
</code>
<br/>
<code>
let placeholder = new Array(5).fill(null);
</code>
reserve space for 5 items and set them to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>
</td>
<td>
<code>
let citiesObj = {'Chicago': 'USA', 'Kinshasa': 'Congo'};
</code>
</td>
<td>
<code>
let citiesMap = new Map([['Chicago', 'USA'], ['Kinshasa', 'Congo']]);
</code>
the argument must be an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">iterable</a> of [key, value] pairs
</td>
<td>
<code>
let citiesSet = new Set(['Chicago', 'Kinshasa']);
</code>
the argument must be an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol">iterable</a> of keys
</td>
</tr>
<tr>
<th>
Get number of items
</th>
<td>
<code>
const len = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length">length</a>;
</code>
</td>
<td>
<code>
const len = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj).<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length">length</a>;
</code>
<br/>
<code>
const len = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>(citiesObj).<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length">length</a>;
</code>
</td>
<td>
<code>
const len = citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/size">size</a>;
</code>
</td>
<td>
<code>
const len = citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size">size</a>;
</code>
</td>
</tr>
<tr>
<th>
Get
</th>
<td>
<code>
const randomItem = citiesArr[index];
</code>
with index starting from 0 to
<code>
citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length">length</a> - 1
</code>
</td>
<td>
<code>
const country = citiesObj.Kinshasa;
</code>
or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> if not found
<br/>
<code>
const country = citiesObj['Kinshasa'];
</code>
or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> if not found
</td>
<td>
<code>
const country = citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get">get</a>('Kinshasa');
</code>
or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> if not found
</td>
<td>
N/A
</td>
</tr>
<tr>
<th>
Set
</th>
<td>
<code>
citiesArr[index] = 'Ushuaia';
</code>
with index starting from 0 to
<code>
citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length">length</a> - 1
</code>
</td>
<td>
<code>
citiesObj.Kinshasa = 'RDC';
</code>
<br/>
<code>
citiesObj['Kinshasa'] = 'RDC';
</code>
</td>
<td>
<code>
citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set">set</a>('Kyiv', 'Ukraine');
</code>
create if not already present, replace otherwise
</td>
<td>
<code>
citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add">add</a>('Kinshasa');
</code>
do nothing if already present
</td>
</tr>
<tr>
<th>
Add
</th>
<td>
<code>
const newLen = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift">unshift</a>('Toulouse');
</code>
to add to the start
<br/>
<code>
const newLen = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">push</a>('Osaka');
</code>
to add to the end
<br/>
<code>
const removedItems = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">splice</a>(fromIndex, 0,
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>['Toulouse', 'Osaka']);
</code>
to add anywhere; indexes can be negative
</td>
<td>
Same as Set
</td>
<td>
Same as Set
</td>
<td>
Same as Set
</td>
</tr>
<tr>
<th>
Remove
</th>
<td>
<code>
const firstItem = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">shift</a>();
</code>
to remove the first item
<br/>
<code>
const firstItem = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">pop</a>();
</code>
to remove the last item
<br/>
<code>
const removedItems = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">splice</a>(fromIndex, toIndex);
</code>
to remove between indexes [fromIndex, toIndex[; fromIndex and toIndex can be negative
</td>
<td>
<code>
const hasBeenRemoved = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a> citiesObj.Kinshasa;
</code>
<br/>
<code>
const hasBeenRemoved = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a> citiesObj['Kinshasa'];
</code>
</td>
<td>
<code>
const hasBeenRemoved = citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">delete</a>('Toulouse');
</code>
</td>
<td>
<code>
const hasBeenRemoved = citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete">delete</a>('Toulouse');
</code>
</td>
</tr>
<tr>
<th>
Find
</th>
<td>
<code>
const exists = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes</a>('Melbourne');
</code>
<br/>
<code>
const itemIndex = citiesArr.<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a>('Melbourne');
</code>
or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> if not found
<br/>
<code>
const itemIndex = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find">find</a>(value => value === 'Melbourne');
</code>
or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> if not found
</td>
<td>
<code>
const hasKey = citiesObj.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a>('Melbourne');
</code>
<br/>
<code>
const keyForValue = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj).<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find">find</a>((<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">[key, value]</a>) =>
value === 'Tokyo')<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">?.</a>[0];
</code>
</td>
<td>
<code>
const hasKey = citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has">has</a>('Tokyo');
</code>
<br/>
<code>
const keyForValue = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesMap].<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find">find</a>((<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">[key, value]</a>)
=> value === 'Tokyo')<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">?.</a>[0];
</code>
</td>
<td>
<code>
const hasKey = citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has">has</a>('Tokyo');
</code>
</td>
</tr>
<tr>
<th>
Loop
</th>
<td>
<code>
citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a>(value => … );
</code>
<br/>
<code>
for (const value of citiesArr) { … }
</code>
</td>
<td>
<code>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj).<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a>((value, key) => … );
</code>
<br/>
<code>
for (const <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">[key, value]</a>
of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj)) { … }
</code>
<br/>
<code>
for (const key of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>(citiesObj)) { … }
</code>
<br/>
<code>
for (const values of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values">Object.values</a>(citiesObj)) { … }
</code>
</td>
<td>
<code>
citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach">forEach</a>((value, key) => … );
</code>
<br/>
<code>
for (const <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">[key, value]</a> of citiesMap) { … }
</code>
<br/>
<code>
for (const <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">[key, value]</a>
of citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries">entries</a>()) { … }
</code>
<br/>
<code>
for (const key of citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys">keys</a>()) { … }
</code>
<br/>
<code>
for (const value of citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values">values</a>()) { … }
</code>
</td>
<td>
<code>
citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach">forEach</a>(key => … );
</code>
<br/>
<code>
for (const key of citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/keys">keys</a>()) { … }
</code>
</td>
</tr>
<tr>
<th>
Sort
</th>
<td>
<code>
citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a>();
</code>
<br/>
<code>
citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a>((a, b) => a - b);
</code>
<br/>
See below for help on comparison fonctions
</td>
<td>
Sequence:
<br/>
<code>
const tempSortedArray =
[<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj)].<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a>(kvKeyComparatorFn(genericComparatorFn));
</code>
<br/>
<code>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>(citiesObj).<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a>(key =>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a> citiesObj[key]);
</code>
<br/>
<code>
tempSortedArray.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a>((<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">[key, value]</a>)
=> citiesObj[key] = value);
</code>
<br/>
to sort by value, use <code>kvValueComparatorFn</code> instead of <code>kvKeyComparatorFn</code>
</td>
<td>
Sequence:
<br/>
<code>
const tempSortedArray =
[<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries">entries</a>()].<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a>(kvKeyComparatorFn(genericComparatorFn));
</code>
<br/>
<code>
citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear">clear</a>();
</code>
<br/>
<code>
tempSortedArray.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a>(citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/set">set</a>, citiesMap);
</code>
<br/>
to sort by value, use <code>kvValueComparatorFn</code> instead of <code>kvKeyComparatorFn</code>
<br/>
uses a callback version of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">Array's forEach</a>
</td>
<td>
Sequence:
<br/>
<code>
const tempSortedArray =
[<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values">values</a>()].<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort</a>(genericComparatorFn);
</code>
<br/>
<code>
citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear">clear</a>();
</code>
<br/>
<code>
tempSortedArray.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a>(citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add">add</a>,
citiesSet);
</code>
<br/>
uses a callback version of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">Array's forEach</a>
</td>
</tr>
<tr>
<th>
Clear
</th>
<td>
<code>
citiesArr.length = 0;
</code>
<br/>
<code>
citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">splice</a>(0,
citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length">length</a>);
</code>
</td>
<td>
<code>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>(citiesObj).<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a>(key =>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a> citiesObj[key]);
</code>
</td>
<td>
<code>
citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear">clear</a>();
</code>
</td>
<td>
<code>
citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear">clear</a>();
</code>
</td>
</tr>
<tr>
<th>
Shallow convert to Array
</th>
<td>
<code>
const myCopy = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">slice</a>();
</code>
<br/>
<code>
const myExtract = citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">slice</a>(fromIndex, toIndex);
</code>
for a fragment between indexes [fromIndex, toIndex[; fromIndex and toIndex can be negative
</td>
<td>
<code>
const myArray = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj)];
</code>
for [key, value] pairs
<br/>
<code>
const myArray = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>(citiesObj)];
</code>
for keys only
<br/>
<code>
const myArray = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values">Object.values</a>(citiesObj)];
</code>
for values only
</td>
<td>
<code>
const myArray = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesMap];
</code>
for [key, value] pairs
<br/>
<code>
const myArray = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys">keys</a>()];
</code>
for keys only
<br/>
<code>
const myArray = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values">values</a>()];
</code>
for values only
</td>
<td>
<code>
const myArray = [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesSet];
</code>
only keys
</td>
</tr>
<tr>
<th>
Shallow convert to Object
</th>
<td>
<code>
const myObject = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries">Object.fromEntries</a>(citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries">entries</a>());
</code>
keys are index values
</td>
<td>
<code>
let myCopy = { <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">...</a>citiesObj };
</code>
(new in ECMAScript 2018)
<br/>
<code>
let myCopy = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">Object.assign</a>({}, citiesObj);
</code>
<br/>
<code>
let myCopy = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries">Object.fromEntries</a>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj));
</code>
<br/>
<code>
let myCopy = <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">JSON.parse</a>(<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a>(citiesObj));
</code>
slowest method but deep copy
</td>
<td>
<code>
const myObject = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries">Object.fromEntries</a>(citiesMap.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries">entries</a>());
</code>
</td>
<td>
<code>
const myObject = <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries">Object.fromEntries</a>(citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries">entries</a>());
</code>
keys are the same as values
</td>
</tr>
<tr>
<th>
Shallow convert to Map
</th>
<td>
<code>
const myMap = new Map(citiesArr.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries">entries</a>());
</code>
keys are index values
</td>
<td>
<code>
const myMap = new Map(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">Object.entries</a>(citiesObj));
</code>
</td>
<td>
Same as Create
</td>
<td>
<code>
const myMap = new Map(citiesSet.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries">entries</a>());
</code>
keys are the same as values
</td>
</tr>
<tr>
<th>
Shallow convert to Set
</th>
<td>
Same as Create
</td>
<td>
<code>
let mySet = new Set(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a>(cities));
</code>
for keys only
<br/>
<code>
let mySet = new Set(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values">Object.values</a>(cities));
</code>
for values only
otherwise use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a> for only keys
</td>
<td>
<code>
let mySet = new Set(cities.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/keys">keys</a>());
</code>
for keys only
<br/>
<code>
let mySet = new Set(cities.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/values">values</a>());
</code>
for values only
</td>
<td>
Same as Create
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
Help on comparison functions (the subject may be deep, this is just an introduction) :
<ul>
<li>
For generic comparison (anything that can be compared with &lt; and &gt;), use:
<code>const genericComparatorFn = (a, b) => (a &lt; b) ? -1 : ((a &gt; b) ? 1 : 0);</code>
</li>
<li>
For numerical only comparison (when <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a>
and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> are not in the array), use:
<code>const numberComparatorFn = (a, b) => a - b;</code>
</li>
<li>
For locale-sensitive alphanumerical comparison, use (check the docs for locale settings):
<code>const stringComparatorFn = (a, b) => a.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare">localeCompare</a>(b);</code>
</li>
<li>
To reverse the order, use this composition function:
<code>const negateComparatorFn = (otherComparisonFunction) => (a, b) => -otherComparisonFunction(a, b);</code>
</li>
<li>
You can compose all them, specialize to access object property with <code>a.name_of_the_property</code> or <code>a['name_of_the_property']</code>,
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase">uppercase</a> the string, etc.
<br />
For example, to compare the key in [key, value] pairs:
<code>const kvKeyComparatorFn = (otherComparisonFunction) => (a, b) => keyComparisonFunction(a[0], b[0]);</code>
<br />
For example, to compare the value in [key, value] pairs:
<code>const kvValueComparatorFn = (otherComparisonFunction) => (a, b) => otherComparisonFunction(a[1], b[1]);</code>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="5" class="last-update">
By <a href="https://github.com/Nioub">Nioub</a>, under <a href="https://opensource.org/licenses/mit-license.php">MIT licence</a>, last update: 2022-04-12
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment