在 ES6 中使用 Array.from 方法将类数组对象转换成数组
在前端开发中,我们经常会遇到需要将类数组对象转换成数组的情况,比如使用 document.querySelectorAll 获取到的元素列表,或者通过 arguments 获取到的参数列表等。在 ES6 中,我们可以使用 Array.from 方法来实现这一操作。
Array.from 方法的作用是将一个可迭代对象或类数组对象转换成一个新的数组实例。在转换过程中,可以通过传入一个 map 函数来对每个元素进行转换,还可以指定 this 对象来绑定 map 函数中的 this。
下面是一个示例代码:
// javascriptcn.com 代码示例 // 通过 arguments 获取参数列表 function sum() { const args = Array.from(arguments); return args.reduce((acc, cur) => acc + cur, 0); } console.log(sum(1, 2, 3, 4)); // 10 // 使用 map 函数进行转换 const nodeList = document.querySelectorAll('p'); const textList = Array.from(nodeList, node => node.textContent); console.log(textList); // ["paragraph 1", "paragraph 2", "paragraph 3"]
在上面的示例代码中,我们使用了 Array.from 方法来将 arguments 对象和 NodeList 对象转换成了数组。在转换 NodeList 对象时,我们还传入了一个 map 函数来将每个节点的文本内容提取出来。
需要注意的是,Array.from 方法只能将可迭代对象或类数组对象转换成数组,如果传入的参数不满足这个条件,将会抛出 TypeError 异常。另外,Array.from 方法返回的是一个新的数组实例,不会改变原始的对象。
总结
在 ES6 中,我们可以使用 Array.from 方法来将类数组对象转换成数组。通过传入一个 map 函数,我们还可以对每个元素进行转换。需要注意的是,Array.from 方法只能将可迭代对象或类数组对象转换成数组,不满足条件时会抛出 TypeError 异常。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6552d409d2f5e1655dc84fe7