将 HTMLCollection 转换为数组 - TypeScript

在 TypeScript 开发中, 经常需要将 HTMLCollection 转换为数组, 方便进行数组相关的操作。本文将介绍如何通过简单的代码实现这一操作。

步骤

首先, 可以使用 Array.from() 方法将 HTMLCollection 转换为数组。具体例子如下:

const htmlCollection: HTMLCollectionOf<Element> = document.getElementsByClassName('example');
const array: Array<Element> = Array.from(htmlCollection);

这里我们使用 getElementsByClassName() 获取一个 HTMLCollection, 然后使用 Array.from() 将其转换为一个数组.

Array.from() 方法的第一个参数传入需要转换的类数组对象，其余参数可选，可以用来进行映射等操作。

ES5 方式

如果项目不支持 ES6, 则可以使用以下代码将 HTMLCollection 转换为数组:

const htmlCollection: HTMLCollectionOf<Element> = document.getElementsByClassName('example');
const array: Array<Element> = [].slice.call(htmlCollection);

这里我们使用 [] 创建一个空数组, 然后使用 slice.call() 方法调用 Array 的原型方法 slice(), 将 htmlCollection 对象转换为数组。

结论

无论 ES5 还是 ES6, 我们都可以轻松地将 HTMLCollection 转换为数组, 并进行相关操作。希望本文能够帮助到你。

以上内容为将 HTMLCollection 转换为数组的介绍，主要包括代码实现和步骤说明。