在前端开发中，经常会遇到需要将类数组转换为数组的情况，比如 NodeList，HTMLCollection 等 DOM 元素集合。在 ES6 中，可以使用 Array.from() 方法来简便地完成数组的转换。
Array.from() 方法
Array.from() 方法可以将一个类数组对象或可迭代对象转换成真正的数组，返回一个新的数组实例。它的语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
参数说明：
arrayLike：必选，需要转换为数组的类数组对象或可迭代对象。mapFn：可选，需要对每个元素进行处理的函数。thisArg：可选，执行mapFn函数时的this值。
不过需要注意的是，Array.from() 方法只能转换可以迭代的对象，也就是必须具有 [Symbol.iterator] 属性，否则会抛出 TypeError 异常。
示例代码
下面是一个简单的示例代码，展示了如何使用 Array.from() 方法将 NodeList 类型的对象转换为数组：
-- -------------------- ---- ------- -- ---- ------ --- ---------- -------- ------ -------- ------ -------- ------ ----- -- ---------- ------ ----- ---- - -------------------------------- ----- -- -------- ----- ----- --- - ----------------- -- ----- ----------------- -- --------- --- ----- --- ----- ---
这段代码中，首先使用 document.querySelectorAll() 方法获取到 id 为 list 的 ul 元素中所有的 li 元素，返回值是一个 NodeList 类型的对象。然后使用 Array.from() 方法将其转换成了真正的数组类型，最后通过 console.log() 输出了结果。
总结
上述示例代码展示了使用 Array.from() 方法将类数组对象转换成数组的过程。除了 NodeList 常见的 DOM 元素集合，还可以轻松地转换其他的伪数组对象，比如 arguments，Map，Set 等等。对于前端开发中的开发者来说，掌握 Array.from() 方法的使用方法是非常有必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c85ca968c7c53b0b7bffa