array.from() 是 es6 中用于将类数组对象或可迭代对象转换为新数组的方法。其语法为 array.from(arraylike, mapfn, thisarg)，其中 arraylike 是必填参数，表示要转换的对象；mapfn 和 thisarg 为可选参数，分别用于元素映射和指定 this 上下文。1. 它解决了传统使用 array.prototype.slice.call() 转换类数组对象时语义不清晰、适用范围窄的问题；2. 支持类数组对象（如 arguments、nodelist）和可迭代对象（如 set、map、字符串）；3. 提供内置映射功能，在转换过程中即可处理元素；4. 相较于展开运算符（…），array.from 更适用于非可迭代的类数组对象，并能在转换时进行映射；5. 高级应用包括生成数字序列、处理 dom 集合、克隆数组、从字符串创建字符数组等场景。它提升了代码的语义化、可读性和灵活性，是处理数据集合的重要工具。
ES6 中的 Array.from 方法是用来将类数组对象或可迭代对象转换成一个真正的数组实例。它的出现，极大地简化了我们处理那些“看起来像数组但又不是数组”的数据结构的流程，提供了一种更语义化、更灵活的转换方式。
解决方案
Array.from() 静态方法从一个类数组或可迭代对象创建一个新的、浅拷贝的数组实例。它的基本语法是：
Array.from(arrayLike, mapFn, thisArg)
arrayLike: 这是一个必需的参数，可以是类数组对象（拥有一个 length 属性和可索引元素，比如 arguments 对象或 NodeList）或者可迭代对象（比如 Set、Map、String）。mapFn (可选): 一个映射函数，新数组中的每个元素都会经过这个函数的处理。这使得我们可以在转换的同时对元素进行操作，非常方便。thisArg (可选): 执行 mapFn 时使用的 this 值。
举几个例子，你会发现它用起来真的非常直观：
// 1. 转换 arguments 对象function toArray() { // arguments 是一个类数组对象 const args = Array.from(arguments); console.log(args); // 比如传入 (1, 2, 3) 会得到 [1, 2, 3]}toArray(1, 2, 3);// 2. 转换 NodeList (例如从 DOM 查询结果)// 假设 HTML 中有多个 div 元素// const divs = document.querySelectorAll('div'); // 这是一个 NodeList，不是真正的数组// const divArray = Array.from(divs);// console.log(divArray); // 现在你可以对 divArray 使用所有数组方法了，比如 forEach, map, filter// 3. 转换字符串 (字符串是可迭代的)const str = "hello";const charArray = Array.from(str);console.log(charArray); // ['h', 'e', 'l', 'l', 'o']// 4. 结合映射函数 (mapFn)// 生成一个从 0 到 4 的数组，并每个元素翻倍const numbers = Array.from({ length: 5 }, (v, i) => i * 2);console.log(numbers); // [0, 2, 4, 6, 8]// 5. 转换 Set 或 Mapconst mySet = new Set([1, 2, 3, 3, 4]);const setArray = Array.from(mySet);console.log(setArray); // [1, 2, 3, 4]const myMap = new Map([['a', 1], ['b', 2]]);const mapArray = Array.from(myMap);console.log(mapArray); // [['a', 1], ['b', 2]]
Array.from 的强大之处在于它能处理任何具有 Symbol.iterator 属性的对象（即可迭代对象），以及任何具有 length 属性的对象（即类数组对象），这覆盖了我们日常开发中绝大部分需要转换的场景。
为什么我们需要Array.from？它解决了什么痛点？
在 Array.from 出现之前，我们处理类数组对象，比如 arguments 或者 document.querySelectorAll() 返回的 NodeList，通常会用一些相对“古老”或者说不那么直观的方法。最常见的就是 Array.prototype.slice.call()：
// 以前我们可能会这么做function oldSchoolToArray() { const args = Array.prototype.slice.call(arguments); console.log(args);}oldSchoolToArray(10, 20, 30);// 或者// const divs = document.querySelectorAll('div');// const divArray = Array.prototype.slice.call(divs);
这种写法虽然有效，但总感觉有点别扭，对吧？尤其是对于刚接触 JavaScript 的开发者来说，Array.prototype.slice.call(arguments) 这种链式调用和 call 方法的使用，理解起来门槛稍微高一些。它本质上是借用了 Array.prototype 上的 slice 方法，并强制将 arguments 对象的 this 上下文绑定到 slice 方法上，从而模拟出数组切片的效果，间接实现了转换。
在我看来，Array.from 解决了几个核心痛点：
语义化和可读性：Array.from 的名字本身就非常清晰地表达了它的意图——“从…创建一个数组”。这比 slice.call 这种略显“黑魔法”的写法要好理解得多。代码的可读性提升了，维护起来自然也更轻松。更广泛的适用性：slice.call 只能处理那些“长得像数组”的对象（有 length 属性和可索引项），但对真正的可迭代对象（比如 Set、Map）就无能为力了。而 Array.from 既能处理类数组，也能处理所有可迭代对象，这让它成为了一个更通用的工具。内置的映射能力：Array.from 的第二个参数 mapFn 是一个非常实用的功能。它允许你在转换的同时对每个元素进行处理，这在很多场景下能省去一次额外的 map 调用。比如，你想把一个 NodeList 转换成数组，并且只取每个元素的 id，用 Array.from 一步到位：
// const ids = Array.from(document.querySelectorAll('div'), div => div.id);
这比先转换再 map 要简洁不少。
所以，Array.from 不仅仅是语法糖，它更是对 JavaScript 数组操作能力的一次重要补强和现代化。它让我们的代码更干净、更易懂，也更强大。
Array.from与展开运算符（Spread Operator）有什么区别？何时选择谁？
展开运算符（...）也是 ES6 引入的一个非常强大的特性，它也能将可迭代对象转换成数组，或者用于数组的合并、复制等。例如：
// 使用展开运算符转换字符串const strSpread = [...'hello'];console.log(strSpread); // ['h', 'e', 'l', 'l', 'o']// 转换 Setconst mySetSpread = new Set([1, 2, 3]);const setArraySpread = [...mySetSpread];console.log(setArraySpread); // [1, 2, 3]// 转换 NodeList// const divsSpread = [...document.querySelectorAll('div')];
看起来它们的功能有些重叠，那我们到底该如何选择呢？这里有一些关键的区别和考量：
处理对象类型：
展开运算符 (...)：只能用于可迭代对象。如果一个对象没有实现 Symbol.iterator 接口（例如一个纯粹的类数组对象 {0: 'a', 1: 'b', length: 2}），展开运算符就无法直接将其转换为数组。Array.from()：既可以处理可迭代对象，也可以处理类数组对象（只要有 length 属性和可索引项）。这是它比展开运算符更灵活的地方。
const myCustomArrayLike = { 0: 'apple', 1: 'banana', length: 2 };// const arr1 = [...myCustomArrayLike]; // 报错：myCustomArrayLike is not iterableconst arr2 = Array.from(myCustomArrayLike);console.log(arr2); // ['apple', 'banana']
映射功能：
展开运算符 (...)：没有内置的映射功能。如果你需要转换并同时对元素进行操作，通常需要先用展开运算符转换，然后再链式调用 map() 方法。Array.from()：第二个参数就是 mapFn，可以在转换过程中直接对元素进行映射处理，一步到位。
const nums = [1, 2, 3];// 使用展开运算符 + mapconst doubledSpread = [...nums].map(n => n * 2); // [2, 4, 6]// 使用 Array.from + mapFnconst doubledFrom = Array.from(nums, n => n * 2); // [2, 4, 6]
在这个例子中，虽然结果一样，但 Array.from 的写法在语义上更紧凑，尤其是在处理非数组的可迭代对象时，省去了中间步骤。
何时选择谁？
选择展开运算符 (...)：
当你的源数据是一个可迭代对象，并且你只需要进行简单的转换（不需要在转换时进行映射）。追求代码的简洁性和直观性。展开运算符的语法非常简洁明了。例如：将 Set 转换为数组，或者将 NodeList 转换为数组以使用 forEach 等方法。
选择 Array.from()：
当你的源数据是类数组对象但不是可迭代对象（比如上面提到的自定义对象，或者某些旧的 DOM API 返回的类数组集合）。当你需要在转换的同时对每个元素进行映射或转换。mapFn 参数是其独有的优势。当你需要生成一个特定长度的数组并填充值，例如 Array.from({ length: N }, (_, i) => i) 来生成一个数字序列。需要更明确的语义，或者处理更复杂的转换逻辑时。
总的来说，对于简单的可迭代对象到数组的转换，展开运算符通常是首选，因为它更简洁。但如果你遇到非可迭代的类数组对象，或者需要在转换过程中进行复杂的数据处理，Array.from() 就会是更强大、更灵活的选择。它们是互补的工具，而不是替代品。
Array.from在实际开发中有哪些高级应用场景？
Array.from 不仅仅是用来转换 arguments 或 NodeList 那么简单，它的灵活性让它在很多实际开发场景中都能发挥出意想不到的妙用。
生成数字序列：这是 Array.from 最常用也最强大的“非传统”用法之一。你不再需要手动循环来创建包含连续数字的数组。
// 生成一个从 0 到 9 的数组const tenNumbers = Array.from({ length: 10 }, (_, i) => i);console.log(tenNumbers); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]// 生成一个从 1 到 5 的数组const oneToFive = Array.from({ length: 5 }, (_, i) => i + 1);console.log(oneToFive); // [1, 2, 3, 4, 5]// 生成偶数序列const evenNumbers = Array.from({ length: 5 }, (_, i) => i * 2);console.log(evenNumbers); // [0, 2, 4, 6, 8]
这在需要创建循环次数、分页页码、图表数据点等场景时，非常方便和简洁。
处理 DOM 集合，并进行复杂操作：虽然展开运算符也能将 NodeList 转换为数组，但 Array.from 结合 mapFn 能让你在一步内完成更复杂的转换。
// 假设页面上有多个带有 data-id 属性的 div/* */// 获取所有 div 的 data-id 属性值，并存储在一个数组中// const divIds = Array.from(document.querySelectorAll('div'), div => div.dataset.id);// console.log(divIds); // 例如：['item-1', 'item-2']
这比先转换成数组再 map 看起来更流畅，也更符合函数式编程的风格。
克隆数组（浅拷贝）：虽然展开运算符 [...arr] 是更常见的数组浅拷贝方式，但 Array.from(arr) 也能实现同样的效果。
const originalArray = [1, { a: 1 }, 3];const clonedArray = Array.from(originalArray);console.log(clonedArray); // [1, { a: 1 }, 3]console.log(clonedArray === originalArray); // false
在某些特定场景下，比如统一处理 arrayLike 和 Array 时，使用 Array.from 可能会带来代码风格上的一致性。
从字符串创建字符数组（并进行处理）：字符串本身是可迭代的，所以 Array.from 可以将它拆分成字符数组。结合 mapFn，你甚至可以在拆分时就对字符进行转换。
const word = "JavaScript";const upperChars = Array.from(word, char => char.toUpperCase());console.log(upperChars); // ['J', 'A', 'V', 'A', 'S', 'C', 'R', 'I', 'P', 'T']
这对于需要对字符串的每个字符进行独立操作的场景非常有用。
处理自定义的可迭代对象或类数组对象：如果你自己定义了一个对象，并为其实现了 Symbol.iterator 接口，或者它只是一个简单的类数组结构，Array.from 都能轻松地将其转换为数组，方便你使用数组的所有方法。
// 一个简单的自定义迭代器const myIterable = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; }};const arrFromIterable = Array.from(myIterable);console.log(arrFromIterable); // [1, 2, 3]// 一个自定义的类数组对象const customData = { 0: 'Alice', 1: 'Bob', 2: 'Charlie', length: 3};const arrFromCustomData = Array.from(customData);console.log(arrFromCustomData); // ['Alice', 'Bob', 'Charlie']
这展示了 Array.from 在处理各种数据源时的强大通用性。
总的来说，Array.from 不仅仅是一个简单的转换工具，它更是一个多功能的数组构造器。通过巧妙地利用它的 mapFn 参数以及对各种数据类型的支持，我们可以在代码中实现更简洁、更富有表现力的逻辑。它鼓励我们用更现代、更函数式的方式来思考和处理数据集合。
以上就是ES6中如何用Array.from转换类数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/144881.html
微信扫一扫 
支付宝扫一扫 
