ES6Array.from转换类数组方法详解

ES6 引入的 `Array.from()` 方法，为 JavaScript 开发者提供了一种优雅且强大的方式，将类数组对象或可迭代对象转换为真正的数组实例。告别了传统 `Array.prototype.slice.call()` 的繁琐，`Array.from()` 凭借其清晰的语义和更广泛的适用性，显著提升了代码的可读性和可维护性。本文深入剖析了 `Array.from()` 的语法、功能以及与展开运算符的区别，并通过丰富的示例展示了其在生成数字序列、处理 DOM 集合、克隆数组以及字符串处理等实际开发场景中的高级应用。掌握 `Array.from()`，将助力你编写更简洁、高效且现代化的 JavaScript 代码，优化数据集合的处理流程。

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 或 Map
const 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 解决了几个核心痛点：

1. 语义化和可读性：Array.from 的名字本身就非常清晰地表达了它的意图——“从...创建一个数组”。这比 slice.call 这种略显“黑魔法”的写法要好理解得多。代码的可读性提升了，维护起来自然也更轻松。
2. 更广泛的适用性：slice.call 只能处理那些“长得像数组”的对象（有 length 属性和可索引项），但对真正的可迭代对象（比如 Set、Map）就无能为力了。而 Array.from 既能处理类数组，也能处理所有可迭代对象，这让它成为了一个更通用的工具。
3. 内置的映射能力：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']

// 转换 Set
const mySetSpread = new Set([1, 2, 3]);
const setArraySpread = [...mySetSpread];
console.log(setArraySpread); // [1, 2, 3]

// 转换 NodeList
// const divsSpread = [...document.querySelectorAll('div')];

看起来它们的功能有些重叠，那我们到底该如何选择呢？这里有一些关键的区别和考量：

1. 处理对象类型：

   • 展开运算符 (...)：只能用于可迭代对象。如果一个对象没有实现 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 iterable
   const arr2 = Array.from(myCustomArrayLike);
   console.log(arr2); // ['apple', 'banana']

2. 映射功能：

   • 展开运算符 (...)：没有内置的映射功能。如果你需要转换并同时对元素进行操作，通常需要先用展开运算符转换，然后再链式调用 map() 方法。
   • Array.from()：第二个参数就是 mapFn，可以在转换过程中直接对元素进行映射处理，一步到位。

   const nums = [1, 2, 3];
   
   // 使用展开运算符 + map
   const doubledSpread = [...nums].map(n => n * 2); // [2, 4, 6]
   
   // 使用 Array.from + mapFn
   const 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 那么简单，它的灵活性让它在很多实际开发场景中都能发挥出意想不到的妙用。

1. 生成数字序列： 这是 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]

   这在需要创建循环次数、分页页码、图表数据点等场景时，非常方便和简洁。

2. 处理 DOM 集合，并进行复杂操作： 虽然展开运算符也能将 NodeList 转换为数组，但 Array.from 结合 mapFn 能让你在一步内完成更复杂的转换。

   // 假设页面上有多个带有 data-id 属性的 div
   /* <div data-id="item-1"></div>
      <div data-id="item-2"></div> */
   
   // 获取所有 div 的 data-id 属性值，并存储在一个数组中
   // const divIds = Array.from(document.querySelectorAll('div'), div => div.dataset.id);
   // console.log(divIds); // 例如：['item-1', 'item-2']

   这比先转换成数组再 map 看起来更流畅，也更符合函数式编程的风格。

3. 克隆数组（浅拷贝）： 虽然展开运算符 [...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 可能会带来代码风格上的一致性。

4. 从字符串创建字符数组（并进行处理）： 字符串本身是可迭代的，所以 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']

   这对于需要对字符串的每个字符进行独立操作的场景非常有用。

5. 处理自定义的可迭代对象或类数组对象： 如果你自己定义了一个对象，并为其实现了 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 参数以及对各种数据类型的支持，我们可以在代码中实现更简洁、更富有表现力的逻辑。它鼓励我们用更现代、更函数式的方式来思考和处理数据集合。

今天关于《ES6Array.from转换类数组方法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！