Question

那么这两个函数有什么区别？

他们都创建new Array个对象。到目前为止，我发现的唯一区别是Array.from支持ArrayLike参数。我没有看到他们为ArrayLike函数添加Array.prototype.map支持的原因。

我错过了什么吗？

Answer 1

Array.from()的目的是获取一个非数组（但类似于数组）的对象，并将其复制到一个实际的数组中。然后，这允许您在副本上使用所有数组方法，包括除了迭代之外的其他内容，例如.splice()，.sort()，.push()，.pop()等...这是显然要比让.map()使用类似数组的东西更有能力。

Answer 2

为每个类似数组＆＃34; Class＆＃34;制作Array.prototype原型对象。在JS中（更重要的是，在DOM中，大多数＆＃39;类似阵列的对象都存在）将是一个潜在的错误。

HTML元素/属性列表中的.reduce( )会是什么样的？

Array.from是[].slice.call(arrayLike);的正式版本，其附加好处是无需创建未使用的数组，只需创建一个数组。

所以，Array.from可以使用function (arrLike) { return [].slice.call(arrLike); }进行填充，并减去原生实施速度/内存的改进，这是相同的结果。

Answer 3

Array.map似乎也更高效：

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')

在此页面上使用Chrome（版本65.0.3325.181）运行此代码，为我提供了以下结果：

Function #1: 520.591064453125ms
Function #2: 33.622802734375ms

Answer 4

静态方法与实例方法

我知道自从提出问题以来已经过去了很多时间。人们已经说了很多好话。但我想补充一点。如果我们尝试确定这两种方法的性质，则可以说 Array.from 与Array的任何实例无关。它是静态方法，例如 Array.isArray 或 Array.of 。您还具有Array对象的静态属性，例如 length 。作为静态方法，不能从实例调用 Array.from 。。例如：

var indexes=[0,1,2,3]
index.from()
>>> index.from is not a function

另一方面，如果您写 Array.map()，您将得到一个Array.map is not a function。这是因为数组实例存在 Array.prototype.map 。在我们的小示例中，索引是Array的实例，然后在其上使用map。例子

var indexes=[0,1,2,3]
function doubleIt(x){
    return 2*x;
}
indexes.map(doubleIt);

使用array.from应该是

Array.from(indexes, doubleIt)

我使用quokka plugin上的vscode来评估Windows机器中vs代码的性能。这不是性能基准测试的真实情况。但是，有一个想法会有所帮助。我得出了相同的结论，因为@rileynet map似乎更有效，但仅适用于大型数组。

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

如果N = 100

tabIndex.map(doubleIt);/*?.*/ 0.052ms

Array.from(tabIndex, doubleIt)/*?.*/ 0.041ms

如果N = 1000

tabIndex.map(doubleIt);/*?.*/ 0.228ms

Array.from(tabIndex, doubleIt)/*?.*/ 0.339ms

如果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

Array.from与Array.prototype.map

4 个答案: