array.from的作用是将类数组对象或可迭代对象转换为真正的数组。1. 类数组对象如arguments、nodelist等有length和索引但无数组方法；2. 可迭代对象包括set、map、字符串等实现symbol.iterator接口的数据结构；3. array.from通过深拷贝生成新数组，支持转换时映射处理元素，语法为array.from(arraylike, mapfn, thisarg)；4. 常用于处理dom集合、函数参数、自定义类数组及各种可迭代对象；5. 与slice.call和展开运算符相比，array.from更具可读性、兼容性和高效性，尤其适合非可迭代对象和需同步映射的场景。
JavaScript的Array.from方法，在我看来，是处理类数组对象和可迭代对象的一个非常优雅且功能强大的工具。它能将这些看起来像数组但又不是真正数组的结构，或者任何可迭代的数据，直接转换成一个全新的、真正的数组实例。这解决了我们日常开发中一个常见的小痛点：那些无法直接调用数组方法（比如map、filter）的对象，通过它就能立刻获得这些能力。
解决方案
Array.from的核心作用就是把一个类数组对象或可迭代对象“深拷贝”成一个真正的数组。一个“类数组对象”通常是指拥有length属性和按索引访问的元素（比如obj[0], obj[1]…）的对象，但它本身并没有继承自Array.prototype，所以你不能直接在它上面调用push、pop、forEach这些方法。而“可迭代对象”则是指实现了Symbol.iterator接口的对象，比如Set、Map、字符串，甚至是自定义的迭代器。
使用Array.from非常直接。它的基本语法是Array.from(arrayLike, mapFn, thisArg)。
立即学习“Java免费学习笔记（深入）”；
最常见的场景，莫过于处理DOM查询返回的NodeList或者函数内部的arguments对象。
// 场景一：转换arguments对象function sumAll() { // arguments就是一个类数组对象 const args = Array.from(arguments); console.log(args instanceof Array); // true return args.reduce((acc, curr) => acc + curr, 0);}console.log(sumAll(1, 2, 3, 4)); // 输出：10// 场景二：转换NodeList// 假设HTML中有多个p标签// Hello
World
const paragraphs = document.querySelectorAll('p'); // 返回一个NodeList，是类数组console.log(paragraphs instanceof Array); // falseconst pArray = Array.from(paragraphs);console.log(pArray instanceof Array); // truepArray.forEach(p => console.log(p.textContent)); // 现在可以愉快地使用forEach了// 场景三：转换一个自定义的类数组对象const myPseudoArray = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3};const realArray = Array.from(myPseudoArray);console.log(realArray); // 输出：['apple', 'banana', 'orange']// Array.from的第二个参数mapFn：在转换的同时进行映射const numbers = { 0: 1, 1: 2, 2: 3, length: 3};const squaredNumbers = Array.from(numbers, num => num * num);console.log(squaredNumbers); // 输出：[1, 4, 9]// 场景四：转换字符串（字符串是可迭代的）const str = "hello";const charArray = Array.from(str);console.log(charArray); // 输出：['h', 'e', 'l', 'l', 'o']// 场景五：转换Set或Map（它们也是可迭代的）const mySet = new Set([1, 2, 3, 2]);const setArray = Array.from(mySet);console.log(setArray); // 输出：[1, 2, 3]const myMap = new Map([['a', 1], ['b', 2]]);const mapArray = Array.from(myMap);console.log(mapArray); // 输出：[['a', 1], ['b', 2]]
Array.from的mapFn参数非常实用，它允许你在创建新数组的同时对每个元素进行转换，这比先转换再map要简洁得多。第三个可选参数thisArg则用于指定mapFn执行时的this值，这在处理一些需要特定上下文的映射函数时会派上用场。
什么是JavaScript中的类数组对象，以及为什么它们不能直接使用数组方法？
在JavaScript的世界里，有些对象虽然在结构上看起来和数组很像——它们有length属性，也能通过数字索引访问到元素——但它们骨子里并不是真正的数组。我们把这些称作“类数组对象”（Array-like Objects）。最典型的例子就是函数内部的arguments对象和DOM操作返回的NodeList（比如document.querySelectorAll()的结果）或HTMLCollection（比如document.getElementsByTagName()的结果）。
它们之所以不能直接使用push、pop、forEach、map、filter这些数组原型上的方法，是因为它们的原型链上并没有Array.prototype。换句话说，它们并没有继承这些方法。你可以把它们想象成一个有编号的盒子，里面装着东西，你知道有多少个（length），也能按编号取出来（obj[0]），但这个盒子本身不具备“排序”、“筛选”或者“添加新盒子”的功能，因为这些功能是“数组”这个特殊类型的盒子才有的。尝试直接调用这些方法会抛出TypeError，提示方法不存在或者不是一个函数。这就是为什么我们需要像Array.from这样的转换工具，来赋予它们真正的数组能力。
除了Array.from，还有哪些方法可以将类数组对象转换为数组，以及何时选择Array.from？
确实，在Array.from出现之前，我们有其他一些“老派”的方法来做这个转换，最常见的就是利用Array.prototype.slice.call()或者ES6引入的展开运算符（Spread Syntax）。
Array.prototype.slice.call(arrayLike)这是一种经典的技巧。slice方法原本是数组用来截取一部分元素生成新数组的，但它不修改原数组。通过call方法，我们可以强制让slice方法在类数组对象上执行，由于slice只关心length属性和索引访问，它就能成功地将类数组对象转换为一个新数组。
const elements = document.getElementsByClassName('item'); // HTMLCollectionconst arr1 = Array.prototype.slice.call(elements);console.log(arr1 instanceof Array); // true
展开运算符（Spread Syntax） [...arrayLike]这是ES6提供的一种非常简洁、现代的语法，适用于任何可迭代对象。如果你的类数组对象同时也是可迭代的（比如NodeList在现代浏览器中就是可迭代的），那么展开运算符是一个非常优雅的选择。
const nodes = document.querySelectorAll('.box'); // NodeList (可迭代)const arr2 = [...nodes];console.log(arr2 instanceof Array); // truefunction logArgs(...args) { // arguments对象也是可迭代的 const arr3 = [...arguments]; console.log(arr3);}logArgs(10, 20, 30); // 输出：[10, 20, 30]
何时选择Array.from？
在我看来，Array.from在很多情况下都是首选，尤其是在以下场景：
清晰性和可读性： Array.from的意图非常明确，就是“从…创建一个数组”。相比slice.call这种略显“hacky”的写法，它更直观。转换同时进行映射： Array.from的第二个参数mapFn是一个巨大的优势。你可以在转换的同时对每个元素进行加工，避免了先转换再map的两步操作，代码更紧凑高效。处理非可迭代的类数组： 虽然展开运算符非常简洁，但它只适用于可迭代对象。如果你的类数组对象不是可迭代的（比如一些老旧的自定义类数组对象，或者IE浏览器中某些版本的NodeList），那么Array.from仍然能够胜任，而展开运算符会报错。处理更广泛的可迭代对象： Array.from不仅能转换类数组，还能转换任何可迭代对象，如Set、Map、字符串等，它的通用性更强。
总的来说，如果你的目标是简洁且对象是可迭代的，展开运算符很棒。如果需要同时进行转换和映射，或者处理非可迭代的类数组对象，Array.from无疑是更强大和灵活的选择。slice.call现在更多地被视为一种历史遗留的技巧，在现代JavaScript开发中，除非有特定的兼容性需求，否则很少会主动去使用它了。
Array.from如何处理不同类型的可迭代对象和类数组，特别是结合其映射函数？
Array.from的强大之处在于它对“类数组”和“可迭代对象”的兼容性，以及它内置的映射能力。它不会去区分对象是“类数组”还是“可迭代”，只要它能被遍历（要么有length和索引，要么有Symbol.iterator），Array.from就能把它变成数组。
处理标准类数组对象 (arguments, NodeList, HTMLCollection)这是最常见的用途。Array.from会遍历这些对象，并把每个索引位置的值复制到新数组中。结合映射函数，你可以直接对DOM元素进行操作，比如提取它们的某个属性：
// 假设有多个 @@##@@ 标签const lazyImages = document.querySelectorAll('img[data-src]');const srcList = Array.from(lazyImages, img => img.dataset.src);console.log(srcList); // 输出：['image1.jpg', 'image2.jpg']
处理字符串字符串是可迭代的，Array.from会把字符串的每个字符（包括Unicode字符，因为它基于迭代器协议）转换成数组的一个元素：
const unicodeStr = "你好世界?";const charArray = Array.from(unicodeStr);console.log(charArray); // 输出：['你', '好', '世', '界', '?']
映射函数可以用来对字符进行转换，比如转大写：
const upperChars = Array.from("abc", char => char.toUpperCase());console.log(upperChars); // 输出：['A', 'B', 'C']
处理Set和MapSet对象会将其所有唯一值转换为数组元素。Map对象则会将其每个[key, value]对作为一个子数组，转换为新数组的元素。映射函数在这里可以用来解构或转换这些值：
const dataSet = new Set([1, 2, 3, 4]);const doubledSetValues = Array.from(dataSet, val => val * 2);console.log(doubledSetValues); // 输出：[2, 4, 6, 8]const priceMap = new Map([['apple', 1.5], ['banana', 0.8]]);// 提取所有商品名称const productNames = Array.from(priceMap, ([key, value]) => key);console.log(productNames); // 输出：['apple', 'banana']// 提取所有价格并格式化const formattedPrices = Array.from(priceMap, ([key, value]) => `${key}: $${value.toFixed(2)}`);console.log(formattedPrices); // 输出：['apple: $1.50', 'banana: $0.80']
处理自定义可迭代对象如果你定义了一个拥有Symbol.iterator方法的对象，Array.from也能完美地处理它。这在实现一些自定义数据结构时非常有用。
const myRange = { from: 1, to: 5, [Symbol.iterator]() { let current = this.from; const last = this.to; return { next() { if (current num * 2);console.log(evenNumbersInRange); // 输出：[2, 4, 6, 8, 10]
Array.from的mapFn的强大之处在于它允许你在转换的“一瞬间”就完成数据处理，这减少了中间变量和额外的map调用，让代码更加精炼和高效。它不仅是一个转换器，更是一个带转换能力的映射器，这在处理各种数据源时提供了极大的便利。
以上就是JavaScript的Array.from方法怎么转换类数组？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1567598.html
微信扫一扫 
支付宝扫一扫 
