Array.from() 和 Array.apply() 有什么区别

Java

Array.from() 与 Array.apply()：深入了解两者的区别

在JavaScript中，数组是一种常见的数据结构，而创建数组的方式也有多种。两个常见的方法是Array.from()和Array.apply()。尽管它们在某些情况下可以实现相似的功能，但它们之间存在一些关键的区别，这些区别影响着它们在实际开发中的使用。本文将深入探讨这两个方法的异同，并通过案例代码演示它们的用法。

Array.from()：创建数组的现代方式

首先，让我们来了解一下Array.from()方法。这是在ECMAScript 6（ES6）中引入的一种现代创建数组的方式。该方法允许我们从类数组对象或可迭代对象中创建一个新的数组实例。其基本语法如下：

Javascript
Array.from(iterable[, mapFn[, thisArg]])

- iterable：要转换为数组的对象，可以是类数组对象或可迭代对象。

- mapFn（可选）：对数组中的每个元素进行映射的函数。

- thisArg（可选）：执行mapFn时的this值。

示例代码：

Javascript
// 使用 Array.from() 从字符串创建数组
const str = 'Array.from()';
const charArray = Array.from(str);
console.log(charArray); // ['A', 'r', 'r', 'a', 'y', '.', 'f', 'r', 'o', 'm', '()']

Array.apply()：老式但依然有用

相比之下，Array.apply()是一个相对古老的方法，它基于Function.prototype.apply()。这个方法的语法如下：

Javascript
Array.apply(null, arrayLike)

其中，arrayLike是一个类数组对象，将其转换为真正的数组。需要注意的是，由于apply()的限制，第一个参数（在这里是null）实际上并不重要，它只是为了设置this的值。

示例代码：

Javascript
// 使用 Array.apply() 从字符串创建数组
const str = 'Array.apply()';
const charArray = Array.apply(null, str);
console.log(charArray); // ['A', 'r', 'r', 'a', 'y', '.', 'a', 'p', 'p', 'l', 'y', '()']

区别与应用场景

在理解了两者的基本用法后，让我们来看看它们之间的一些关键区别。

参数数量与映射函数

Array.from()支持接受三个参数，分别是要转换的对象、映射函数和映射函数的上下文。而Array.apply()只接受两个参数，分别是this的值（在这里通常为null）和要转换的对象。因此，Array.from()更加灵活，可以通过映射函数对元素进行处理。

可迭代对象的支持

Array.from()专门支持可迭代对象，这意味着你可以直接将一个Set或Map转换为数组。而Array.apply()仅支持类数组对象，这在某些情况下可能会受到限制。

在选择使用Array.from()还是Array.apply()时，取决于你的需求和所处理的数据类型。Array.from()是现代JavaScript开发中更推荐的选择，它更灵活、功能更强大，特别是在处理可迭代对象时。然而，如果你需要在古老的JavaScript环境中进行开发，或者处理的数据是类数组对象，那么Array.apply()仍然是一个可行的选择。

通过深入了解这两个方法的使用方式和差异，你可以更好地根据具体情况选择适当的方法，提高代码的可读性和效率。