数组和类数组转换

作为一个前端开发人员，曾经需要大量操作dom，所以经常获取到一个HTMLElement的集合，但是却用不了一些数组的方法，当然现在有vue、react等框架，省去了不少力气。

今天无意中看到Array.from这个方法，想到曾经要是有这种方案，不知道能省多少事。

介绍

Array.from 是 JavaScript 中的一个数组方法。它用于从一个类数组对象或可迭代对象创建一个新的数组实例。

Array.from 接受两个参数：第一个参数是要转换成数组的对象，第二个参数是一个可选的映射函数，用于对每个元素进行处理。

例如，我们可以使用 Array.from 将一个字符串转换成一个数组：

const str = "hello";
const arr = Array.from(str);
console.log(arr); // ["h", "e", "l", "l", "o"]

我们还可以使用 Array.from 来处理类似数组的对象，例如将一个类似数组的对象转换成一个真正的数组：

const obj = {
  length: 3,
  0: "a",
  1: "b",
  2: "c"
};

const arr = Array.from(obj);
console.log(arr); // ["a", "b", "c"]

另外，我们可以使用第二个参数来对数组中的元素进行映射处理：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, (num) => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

注意：使用Array.from转换HTMLElement集合会有什么问题

使用 `Array.from` 方法来转换 `HTMLElement` 集合（如由 `document.querySelectorAll` 返回的集合）到一个数组通常是有效且常见的做法，因为它允许你在集合上使用数组方法，例如 `forEach`、`map`、`filter` 等。但是，这个方法也有可能遇到一些问题或限制：

1. 性能考虑：在转换大量 `HTMLElement` 的集合时，使用 `Array.from` 方法可能会导致性能下降，尤其是在频繁操作或在性能敏感的环境中。虽然这通常不是问题，但对于需要高性能的应用，考虑使用更直接的方法可能更好，例如直接在集合上使用循环。

2. 浏览器兼容性：虽然 `Array.from` 现在在大多数现代浏览器中都得到了很好的支持，但在一些旧版浏览器（如 Internet Explorer）中可能不可用。如果你的网站需要支持这些旧浏览器，你可能需要使用 polyfill 或其他替代方法来确保代码的兼容性。

3. 只是一个浅拷贝：`Array.from` 方法仅仅创建了一个浅拷贝的数组，而不是 `HTMLElement` 集合的深拷贝。这意味着数组中的元素仍然是对原始 DOM 元素的引用。修改数组中的元素可能会影响到 DOM，反之亦然。这在大多数情况下是期望的行为，但在处理数据时需要小心，以避免不经意间修改 DOM。

4. 可能不必要：对于一些简单的操作，直接在原始的 `HTMLElement` 集合上操作可能更加简单高效。例如，`NodeList` 对象（`document.querySelectorAll` 的返回值）在现代浏览器中已经支持了 `forEach` 方法，因此转换为数组可能是不必要的。

总之，Array.from 提供了一种简洁的方式来将类数组对象或可迭代对象转换成真正的数组，并且可以通过映射函数对数组元素进行处理。尽管有上述潜在问题，`Array.from` 用于转换 `HTMLElement` 集合到数组仍然是一种非常实用和方便的方法。