js中将HTMLCollection/NodeList/伪数组转换成数组的代码

将 HTMLCollection、NodeList、伪数组转换成真正的数组是 JavaScript 中常见的操作，常常用于操作 DOM 元素或者获取一系列的元素，比如在获取 class 为 list 的所有元素后需要对它们进行操作。

使用 Array.prototype.slice.call() 方法

可以通过 Array.prototype.slice.call() 这个方法将 HTMLCollection、NodeList、伪数组转换成真正的数组，这个方法会返回一个新的数组，并且将传递给它的参数作为数组的元素。

下面是具体的代码示例：

const liList = document.getElementsByTagName('li');
const liArray = Array.prototype.slice.call(liList);

console.log(liList); // HTMLCollection
console.log(liArray); // Array

在这个示例中，我们首先通过 document.getElementsByTagName('li') 获取到一个 HTMLCollection，然后对这个 HTMLCollection 调用 Array.prototype.slice.call() 方法，生成了一个真正的数组 liArray。最后我们通过 console.log() 输出了 liList 和 liArray 的值，可以发现 liList 是 HTMLCollection，而 liArray 则是一个真正的数组。

使用 Array.from() 方法

ES6 中新增了 Array.from() 方法，可以将类数组对象或者可迭代对象转换成数组。这个方法与 Array.prototype.slice.call() 不同之处在于，它可以直接将一个类数组对象转换成一个数组，并且还可以更容易地进行一些变换操作。

下面是具体的代码示例：

const list = document.querySelectorAll('.list');
const arr = Array.from(list, item => item.innerText);

console.log(list); // NodeList
console.log(arr); // Array

在这个示例中，我们首先通过 document.querySelectorAll('.list') 获取到一个 NodeList，然后对这个 NodeList 调用 Array.from() 方法，生成了一个真正的数组 arr。在 Array.from() 中我们传递了一个回调函数，对 NodeList 中的每一个元素进行了操作。

通过这两种方法，我们就可以将 HTMLCollection、NodeList、伪数组转换成真正的数组，并对这个数组进行各种操作。在实际开发中，我们可以根据具体的需求来选择使用哪一种转换方式。