Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement Javascript ECMA 5's array.map() for sparse array?

Tags:

javascript

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)

like image 324
nonopolarity Avatar asked Oct 10 '12 02:10

nonopolarity


People also ask

What is JavaScript array map () method?

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.

How do you map an array with one less element?

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].

How to include all the values of a map into array?

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.

What are the array methods in ES5?

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.


1 Answers

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.

like image 128
Samuel Edwin Ward Avatar answered Oct 22 '22 15:10

Samuel Edwin Ward