Arrays in JavaScript are pretty easy to use. However, there's a nuance you should be aware of: some arrays might have holes in them.
In this post, I'm going to describe the difference between sparse and dense arrays in JavaScript. Also, you'll find the common ways to create sparse arrays, just to be aware of.
An array in JavaScript is an object representing an ordered collection of items.
The items in the array have an exact order. You can access the nth item of the array using a special number — the index.
const names = ['Batman', 'Joker', 'Bane'];
console.log(names[0]); // logs 'Batman'
console.log(names[1]); // logs 'Joker'
console.log(names[2]); // logs 'Bane'
console.log(names.length); // logs 3
names[0] accesses the item of the array at index 0 (the first element).
The array also has a property length, which indicates the number of items in the array. In the previous example, names.length is 3 since the number of items in the array is 3.
names array created above is a dense array: meaning that it contains items at each index starting 0 until names.length - 1.
Here's a function isDense(array) that determines whether the array has items at each index:
function isDense(array) {
for (let index = 0; index < array.length; index++) {
if (!(index in array)) {
return false;
}
}
return true;
}
const names = ['Batman', 'Joker', 'Bane'];
console.log(isDense(names)); // logs true
where index in array determines if the array has an item at index position.
Here's an interesting question: are all arrays in JavaScript dense? Or there might be arrays when isDense(array) would return false?
Let's dig more!
Unfortunately... there are situations when JavaScript arrays can have holes in them. Such arrays are named sparse.
For example, if you use the array literal but omit indicating an item, then a hole is created in the place of the missing item. And as result a sparse array is created:
const names = ['Batman', , 'Bane'];
console.log(names[0]); // logs 'Batman'
console.log(names[1]); // logs undefined
console.log(names[2]); // logs 'Bane'
console.log(isDense(names)); // logs false
['Batman', , 'Bane'] array literal creates a sparse array, having a hole at the 1 index. If you access the value of a hole — names[1] — it evaluates to undefined.
To check explicitly whether there's a hole at a specific index you need to use index in names expression:
const names = ['Batman', , 'Bane'];
// No hole
console.log(0 in names); // logs true
// Hole
console.log(1 in names); // logs false
Of course, if you run isDense() on a sparse array it will return false:
const names = ['Batman', , 'Bane'];
console.log(isDense(names)); // logs false
Now you have a clue about the sparse arrays. But what are the common ways to create sparse arrays?
Let's find out in the next section.
Here's a list of the most common ways to create sparse arrays in JavaScript.
As already mentioned, omitting a value when using the array literal creates a sparse array (note the empty word in the logger array):
const names = ['Batman', , 'Bane'];
console.log(names); // logs ['Batman', empty, 'Bane']
Invoking Array(length) or new Array(length) (with a number argument) creates a fully sparse array:
const array = Array(3);
console.log(isDense(array)); // logs false
console.log(array); // logs [empty, empty, empty]
When you use delete array[index] operator on the array:
const names = ['Batman', 'Joker', 'Bane'];
delete names[1];
console.log(isDense(names)); // logs false
console.log(names); // logs ['Batman', empty, 'Bane']
Initially, names array is dense.
But executing delete names[1] deletes the item at index 1 and makes names array sparse.
If you increase length property of an array, then you also create holes in the array:
const names = ['Batman', 'Joker', 'Bane'];
names.length = 5;
console.log(isDense(names)); // logs false
console.log(names); // logs ['Batman', 'Joker', 'Bane', empty, empty]
Initially names array had 3 items, and it was a dense array.
However, increasing the names.length to 5 items creates 2 holes — at 3 and 4 indexes.
On a side note, decreasing the length property doesn't create a sparse array but removes items from the end of the array.
A problem of the sparse arrays is that many array built-in methods just skip the holes in a sparse array.
For example, array.forEach(eachFunc) doesn't not invoke eachFunc on the holes:
const names = ['Batman', , 'Bane'];
names.forEach(name => {
console.log(name);
});
// logs 'Batman'
// logs 'Bane'
Same way array.map(mapperFunc), array.filter(predicateFunc), and more functions do skip the holes. If you've accidentally created a sparse array, you might find a hard time understanding why an array method doesn't work as expected.
Challenge: do you know array functions in JavaScript that don't skip the empty holes?
In JavaScript, an array can be dense or sparse.
An array is dense if there are items at each index starting 0 until array.length - 1 . Otherwise, if at least one item is missing at any index, the array is sparse.
While you won't deal much with sparse arrays, you should be aware of the situations when one can be created:
[1, , 3]Array(length)delete array[index]array.length propertyThe problem with sparse arrays is that some JavaScript functions (like array.forEach(), array.map(), etc.) skip empty holes when iterating over the array items.
What other ways to create sparse arrays in JavaScript do you know?
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。