在前端开发中，我们往往会遇到一些类数组对象，比如 NodeList、HTMLCollection、arguments 等。这些对象虽然类似于数组，但是并不具备数组对象的方法和属性，如 map、filter、reduce 等。因此，我们需要将它们转换为真正的数组对象，才能使用数组的方法和属性操作它们。
在 ES6 中，我们可以使用 Array.from 方法来优雅地将类数组对象转换为真正的数组对象。本文将会详细探讨 Array.from 方法的使用，以及一些实际应用场景。
Array.from 方法简介
Array.from 方法是 ES6 新增的方法，用于将类数组对象或可迭代对象转换为数组。它的语法格式如下：
-------------------- -- ----- -- ----------
其中，arrayLike 表示要转换为数组的类数组对象或可迭代对象；mapFn 表示可选的映射函数，用于对数组中的每个元素进行处理；thisArg 表示可选的上下文对象，用于绑定 mapFn 函数中的 this 值。
使用 Array.from 方法可以让我们非常方便地进行数组和类数组对象之间的转换，而且还可以使用第二个参数来处理转换后的数组中每个元素，实现更灵活的操作。
Array.from 方法的应用场景
转换 NodeList、HTMLCollection 对象
在前端开发中，我们经常需要操作 DOM 元素，而 document.querySelectorAll 以及其他 DOM 操作方法返回的都是 NodeList 或 HTMLCollection 对象，这些对象看起来很像数组，但是并不具备数组的方法和属性。
因此，我们可以使用 Array.from 方法将 NodeList 或 HTMLCollection 对象转换为真正的数组对象，然后使用数组的一些方法来操作它们。例如：
---- -------------- --------------- --------------- -----
----- --- - ------------------------------------ -- -- -- ---- ----- --- - ---------------- -- - -- --------- ---------- -- ----------------------------- -- ----- -------------------
将类数组对象转换为数组
除了 NodeList 和 HTMLCollection 对象，还有一些对象也是经常被认为是数组，但是实际上它们是类数组对象。
比如，arguments 对象就是函数调用时自动生成的一个类数组对象，它包含着传入函数中的所有参数，而且也没有数组对象的方法和属性。
-------- ----- - ----- ---- - ---------------------- -- - --------- ------- ------ ------------------- ---- -- ----- - ---- --- -- ------ - ------------------ -- ---- -- ----- -
Array.from 方法还可以转换其它类型的类数组对象，如字符串、Set、Map 等。
数组去重
由于 ES6 的 Set 对象内置了去重功能，因此可以使用 Array.from 方法将数组去重。使用 Set 对象将数组去重的一般步骤为：
----- --- - --- -- -- -- -- -- -- --- ----- --- - --- --------- -- - --- --- --- -- ----- ------ - ---------------- -- - --- ------- -------------------- -- ----- --- -- -- --
使用映射函数对数组元素进行处理
除了将类数组对象转换为数组外，Array.from 方法还可以使用第二个参数来映射数组中的每个元素，实现更灵活的处理。
----- --- - --- -- --- ----- ------ - --------------- --- -- --- - --- -- - --- ---------- - -------------------- -- ----- --- -- --
在上面的例子中，我们使用 Array.from 方法和一个映射函数来将原数组中的每个元素乘以 2，并返回一个新数组。
总结
使用 Array.from 方法可以非常方便地进行类数组对象与数组之间的转换，并且支持使用第二个参数来映射数组中的每个元素。在开发中，我们应当学会灵活运用这个方法，以达到简化代码、提高开发效率的目的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fbc058f6b2d6eab31edf75