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

**JavaScript Array.from() 方法：轻松转换类数组为真数组** 还在为JavaScript中类数组对象（如NodeList、字符串）转换为真正的数组而烦恼吗？`Array.from()`方法就是你的救星！它能将类数组对象或可迭代对象快速转换为新数组，并支持传入映射函数，在转换的同时处理每个元素，实现数据转换一步到位。本文深入解析`Array.from()`的用法、优势及替代方案，助你掌握这一实用技巧，优化JavaScript代码，提升开发效率，轻松应对DOM操作和数据处理等场景。告别繁琐的循环和`slice.call()`，让`Array.from()`成为你代码库中的得力助手！

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学习网公众号！