Array.from()方法详解及使用示例

`Array.from()`是JavaScript中将类数组对象或可迭代对象转换为真数组的利器。它接受源数据（如字符串、NodeList等）和可选的映射函数，能灵活创建数组。本文深入解析`Array.from()`的用法、优势与替代方案。通过实例展示如何从字符串、DOM集合、Set、Map等创建数组，并利用映射函数进行数据处理。相较于直接赋值，`Array.from()`能避免动态集合问题，提供更丰富的功能。同时，探讨其性能影响及扩展运算符、`slice.call()`等替代方案，助你选择最优的数组创建方式。掌握`Array.from()`，提升JavaScript编程效率，让数组操作更得心应手。

Array.from() 方法用于将类数组对象或可迭代对象转换为真正的数组，其核心作用是提供一种灵活方式创建数组。它接收两个参数：源数据（如字符串、NodeList、Set、Map 或 arguments 对象）和可选的映射函数。1. 可从字符串、DOM 集合等创建数组；2. 支持在转换时通过映射函数处理元素；3. 相比直接赋值或其他方法更简洁且功能丰富；4. 其性能通常良好，但在处理大数据量或复杂映射时需注意优化；5. 替代方案包括扩展运算符和 slice.call()，但 Array.from() 更直观且支持映射。

Array.from() 方法可以将类数组对象或可迭代对象转换为真正的数组。 它的核心作用在于提供了一种灵活的方式来创建数组，尤其是在处理 DOM 元素集合、字符串或其他类似数组但并非真正数组的对象时。

解决方案：

Array.from() 接收两个主要参数：

1. 类数组对象或可迭代对象：这是你需要转换成数组的源数据。例如，arguments 对象、NodeList 对象、字符串等。
2. 可选的映射函数 (mapFn)：类似于数组的 map() 方法，允许你在转换的同时对每个元素进行处理。

基本用法：

// 1. 从字符串创建数组
const str = "hello";
const arr1 = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

// 2. 从 NodeList 创建数组 (例如，从 querySelectorAll 返回的结果)
const nodeList = document.querySelectorAll('div'); // 假设页面上有 div 元素
const arr2 = Array.from(nodeList); // 将 NodeList 转换为数组

// 3. 使用映射函数
const numbers = [1, 2, 3];
const squaredNumbers = Array.from(numbers, x => x * x); // [1, 4, 9]

// 4. 从 Set 创建数组
const set = new Set([1, 2, 2, 3]); // Set 会自动去重
const arr3 = Array.from(set); // [1, 2, 3]

// 5. 从 Map 创建数组 (得到的是键值对数组)
const map = new Map([['a', 1], ['b', 2]]);
const arr4 = Array.from(map); // [['a', 1], ['b', 2]]

// 6. 转换 arguments 对象 (在函数内部)
function myFunction() {
  const args = Array.from(arguments);
  console.log(args);
}
myFunction(1, 2, 3); // [1, 2, 3]

Array.from() 的优势在于，它不仅可以转换类数组对象，还可以方便地进行数据转换。 相比于传统的循环或者 Array.prototype.slice.call()，Array.from() 更加简洁易懂。

为什么要使用 Array.from 而不是直接赋值？

直接赋值通常无法实现类数组对象的正确转换。 例如，如果尝试直接将 NodeList 赋值给一个新数组，你仍然会得到一个 NodeList，而不是一个真正的数组。 NodeList 是一个动态集合，它的内容会随着 DOM 的变化而变化。 而 Array.from() 创建的是一个静态数组，它不会受到 DOM 变化的影响。 另外，Array.from() 提供了映射功能，可以在转换的同时进行数据处理，这是直接赋值无法做到的。

Array.from 对性能有什么影响？

Array.from() 的性能取决于要转换的数据量和映射函数的复杂度。 对于小型数据集，性能影响通常可以忽略不计。 但是，对于大型数据集，映射函数可能会成为性能瓶颈。 在这种情况下，可以考虑优化映射函数或者使用其他更高效的转换方法。 实际上，现代 JavaScript 引擎对 Array.from() 进行了优化，使其在大多数情况下都具有良好的性能。

Array.from 的替代方案有哪些？

在某些情况下，可以使用其他方法来转换类数组对象。 例如，可以使用扩展运算符 (...) 将类数组对象展开到数组中：

const nodeList = document.querySelectorAll('div');
const arr = [...nodeList]; // 将 NodeList 转换为数组

这种方法通常比 Array.from() 更简洁，但在某些情况下可能不如 Array.from() 灵活。 例如，扩展运算符无法提供映射功能。 另外，在一些旧版本的浏览器中，可能不支持扩展运算符。 另一种替代方案是使用 Array.prototype.slice.call()：

const nodeList = document.querySelectorAll('div');
const arr = Array.prototype.slice.call(nodeList); // 将 NodeList 转换为数组

这种方法在较旧的浏览器中具有更好的兼容性，但语法相对繁琐。 总的来说，Array.from() 是一个功能强大且易于使用的数组创建方法，在大多数情况下都是一个不错的选择。

到这里，我们也就讲完了《Array.from()方法详解及使用示例》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！