It should be quite easy to implement array.map()
that is defined in ECMA-262, which takes a function and this function will be called by 3 arguments: element value, index, the array.
But what about for sparse array? Obviously we don't want to iterate from index 0 to 100,000 if only index 0, 1, 2, and 100,000 has an element and otherwise is sparse from index 3 to 99,999. I can think of using arr.slice(0)
or arr.concat()
to clone the array, and then put in the replaced values, but what if we don't use slice
or concat
, is there another way to do it?
The solution I came up with using slice()
is:
Array.prototype.collect = Array.prototype.collect || function(fn) {
var result = this.slice(0);
for (var i in this) {
if (this.hasOwnProperty(i))
result[i] = fn(this[i], i, this); // 3 arguments according to ECMA specs
}
return result;
};
(collect
is used to try out the code, as that's another name for map
in some language)
How JavaScript Array map () Method works? Map Method is one of the utilities present in the JavaScript libraries that helps to store the result of an operation performed on each element of the array to a new array at the corresponding index. This method has specifications in ECMAScript (ECMA-262) in Array libraries.
We’ve now mapped the array’s first element. Alongside it is map (fn, tail) which calls map again, this time with one less element. Since map returns an array, we use ES6’s spread syntax to concatenate it with [head].
We used the spread operator (...) to include all of the values of the Map into a new array. This is the most commonly used approach when converting the values of a Map into an array. You can also do this with multiple Map s.
Let's have a look at the Array methods introduced in ES5. This wont be an in-depth look exploring the ins and outs of every method, but more a quick summary over them. The first is indexOf. As you might suspect, it searches the array to find the index of the passed in element: If the element doesn't exist, -1 is returned.
It should be easy, but there are a few peculiar points.
The callback function is allowed to modify the array in question. Any elements it adds or removes are not visited. So it seems we should use something like Object.keys to determine which elements to visit.
Also, the result is defined to be a new array "created as if by" the array constructor taking the length of the old array, so we might as well use that constructor to create it.
Here's an implementation taking these things into account, but probably missing some other subtleties:
function map(callbackfn, thisArg) {
var keys = Object.keys(this),
result = new Array(this.length);
keys.forEach(function(key) {
if (key >= 0 && this.hasOwnProperty(key)) {
result[key] = callbackfn.call(thisArg, this[key], key, this);
}
}, this);
return result;
}
I am assuming Object.keys returns the keys of the array in numerical order, which I think is implementation defined. If it doesn't, you could sort them.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With