Sparse array sub-class
Extending the Array.prototype with ES6
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="jumbotron">
<h1>Sparse array sub-class</h1>
<p class="lead">An ES6 sparse array sub-class</p>
</div>
<div class="row">
<h4>[1, 2, , 4, ].map(x=>x+1)</h4>
<p>Result: <span id="result"></span></p>
</div>
<div class="row">
<a class="btn btn-lg btn-primary col-md-6" id="sparse">Evaluate with a sparse array</a>
<a class="btn btn-lg btn-primary col-md-6" id="dense">Evaluate with a dense array</a>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
#result {
margin: 1.5em 0em;
font-family: courier;
}
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
JavaScript
class SparseArray extends Array {
constructor(...args) {
super(...args);
}
// return keys of dense array
denseKeys() {
return [...this.keys()].filter((v) => v in this)
}
// return keys of the ghosts in sparse array
sparseKeys() {
return [...this.keys()].filter((v) => !(v in this))
}
// convert sparse array to dense array
dense() {
this.sparseKeys().forEach((v) => {
this[v] = undefined;
});
return this;
}
// convert dense array to sparse array
sparse() {
this.forEach((v,i)=>{
if (v === undefined) {
delete this[i];
}
});
return this;
}
}
var documentElements = {
result: document.getElementById('result'),
sparse: document.getElementById('sparse'),
dense: document.getElementById('dense')
}
var magicArray = new SparseArray(1, 2, undefined ,4 ,undefined);
documentElements.sparse.addEventListener('click', ()=> {
result.innerHTML = '[' + magicArray.sparse().map(x=>x+1).join(', ') +']';
});
documentElements.dense.addEventListener('click', ()=> {
result.innerHTML = '[' + magicArray.dense().map(x=>x+1).join(', ') + ']';
});