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

JavaScript的`Array.from()`方法是处理类数组对象和可迭代对象的利器。它能将拥有`length`属性和索引元素，但缺乏数组原型方法的类数组对象，如`arguments`、`NodeList`，以及实现了`Symbol.iterator`接口的可迭代对象，如`Set`、`Map`、字符串等，高效转换为真正的数组实例。`Array.from()`通过深拷贝生成新数组，并支持在转换时使用映射函数`mapFn`对元素进行处理，例如将`NodeList`转换为数组，提取DOM元素的属性，或将字符串转换为字符数组。相较于`slice.call()`和展开运算符，`Array.from()`具有更强的可读性、兼容性和高效性，尤其适用于非可迭代对象和需要同步映射的场景，是现代JavaScript开发中不可或缺的工具函数。

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)。

最常见的场景，莫过于处理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标签
// <p>Hello</p><p>World</p>
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）。

1. 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

2. 展开运算符（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就能把它变成数组。

1. 处理标准类数组对象 (arguments, NodeList, HTMLCollection) 这是最常见的用途。Array.from会遍历这些对象，并把每个索引位置的值复制到新数组中。结合映射函数，你可以直接对DOM元素进行操作，比如提取它们的某个属性：

   // 假设有多个 <img data-src="image.jpg"> 标签
   const lazyImages = document.querySelectorAll('img[data-src]');
   const srcList = Array.from(lazyImages, img => img.dataset.src);
   console.log(srcList); // 输出：['image1.jpg', 'image2.jpg']

2. 处理字符串 字符串是可迭代的，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']

3. 处理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']

4. 处理自定义可迭代对象 如果你定义了一个拥有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调用，让代码更加精炼和高效。它不仅是一个转换器，更是一个带转换能力的映射器，这在处理各种数据源时提供了极大的便利。

理论要掌握，实操不能落！以上关于《Array.from()方法详解及使用示例》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！