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); // false
const pArray = Array.from(paragraphs);
console.log(pArray instanceof Array); // true
pArray.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'); // HTMLCollection const 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); // true function 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和Map
Set对象会将其所有唯一值转换为数组元素。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 <= last) { return { done: false, value: current++ }; } else { return { done: true }; } } }; } }; const rangeArray = Array.from(myRange); console.log(rangeArray); // 输出：[1, 2, 3, 4, 5] // 结合映射函数，生成偶数 const evenNumbersInRange = Array.from(myRange, num => num * 2); console.log(evenNumbersInRange); // 输出：[2, 4, 6, 8, 10]
Array.from的mapFn的强大之处在于它允许你在转换的“一瞬间”就完成数据处理，这减少了中间变量和额外的map调用，让代码更加精炼和高效。它不仅是一个转换器，更是一个带转换能力的映射器，这在处理各种数据源时提供了极大的便利。
