So what is the difference between this two functions?
They both create new Array object. Only difference I found so far is that Array.from supports ArrayLike parameters. I don't see any reason why they just haven't added ArrayLike support for Array.prototype.map function.
Am I missing something?
The purpose of Array.from() is to take a non-array (but array-like) object and make a copy of it into an actual array. This then allows you to use ALL array methods on the copy including things beyond just iterating it such as .splice(), .sort(), .push(), .pop(), etc... which is obviously much more capable than just make .map() work with array-like things.
Array.map seems to be a bit more performant as well:
var a = () => [{"count": 3},{"count": 4},{"count": 5}].map(item => item.count);
var b = () => Array.from([{"count": 3},{"count": 4},{"count": 5}], x => x.count);
var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
b();
};
console.timeEnd('Function #1')
console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
a();
};
console.timeEnd('Function #2')
Running this code using Chrome (Version 65.0.3325.181) on this page gave me the follow results:
Function #1: 520.591064453125ms
Function #2: 33.622802734375ms
Static method vs instance method
I know a lot of time has passed since the question was asked. A lot of good things have been said. But I would like to add some more. If we try to determine the nature of the two methods we can say that Array.from has no relation to any instance of Array. It is static method like Array.isArray or Array.of. You also have static properties like length for the Array object. As a static method Array.from can not be Called from instance. For example:
var indexes=[0,1,2,3]
index.from()
>>> index.from is not a function
In the other hand if you write
Array.map() you will end up with a Array.map is not a function. It is because Array.prototype.map Exist for the instance of array. In our little example indexes is an instance of Array then we use map on it.
Example
var indexes=[0,1,2,3]
function doubleIt(x){
return 2*x;
}
indexes.map(doubleIt);
With array.from it shoud be something like
Array.from(indexes, doubleIt)
I used quokka plugin on vscode to evaluate performance on vs code in a windows machine. It is not real case of performance benchmarking. But it can help to have an idea. I came up with the same conclusion as @rileynet map seem more performant but only for large array.
var N=10
var tabIndex=[ ...Array(N).keys()]
function doubleIt(x){
return 2*x;
}
tabIndex.map(doubleIt);/*?.*/ 0.040ms
Array.from(tabIndex, doubleIt)/*?.*/ 0.009ms
if N=100
tabIndex.map(doubleIt);/*?.*/ 0.052ms
Array.from(tabIndex, doubleIt)/*?.*/ 0.041ms
if N=1000
tabIndex.map(doubleIt);/*?.*/ 0.228ms
Array.from(tabIndex, doubleIt)/*?.*/ 0.339ms
if N=10000
tabIndex.map(doubleIt);/*?.*/ 2.662ms
Array.from(tabIndex, doubleIt)/*?.*/ 1.847ms
N=100000
tabIndex.map(doubleIt);/*?.*/ 3.538ms
Array.from(tabIndex, doubleIt)/*?.*/ 11.742ms
Making Array.prototype the prototype object for every single array-like "Class" in JS (more importantly, in DOM, where most of the 'array-like' objects live) would be a potential mistake.
What would a .reduce( ) on a list of HTML elements/attributes look like?
Array.from is the official version of [].slice.call(arrayLike); with the added benefit of not having to create an unused array, just to create an array.
So really, Array.from can be polyfilled with function (arrLike) { return [].slice.call(arrLike); }, and minus native-implementation speed/memory improvements, it's the same result.
This has little to do with map|reduce|filter|some|every|find, which are the keys to living a long and happy life, without the need of micromanaging loops to get things done.
