ES10 实战案例：如何使用 Array.from 方法实现类数组对象转换

在前端开发中，我们经常会遇到需要将类数组对象转换为数组的情况。以往的做法可能是使用 Array.prototype.slice.call 或者 Array.prototype.concat.apply 等方法来实现，但是这些方法存在一些缺陷，比如不能转换类似于 Set 和 Map 这样的数据结构。

幸运的是，ES6 引入了 Array.from 方法，可以更方便地将类数组对象转换为数组。而在 ES10 中，Array.from 方法得到了进一步的增强，本文将介绍如何使用 ES10 的 Array.from 方法实现类数组对象转换。

Array.from 方法简介

Array.from 方法用于将一个类数组对象或可迭代对象转换为一个真正的数组。它接受两个参数：第一个参数是要转换的对象，第二个参数是一个可选的映射函数，用于对数组中的每个元素进行处理。

Array.from(arrayLike[, mapFn[, thisArg]])

下面是一个简单的示例，将一个字符串转换为数组：

const str = 'hello';
const arr = Array.from(str);
// arr: ['h', 'e', 'l', 'l', 'o']

类数组对象转换示例

假设我们有一个 DOM 元素列表，需要将它转换为一个数组。在以往的做法中，我们可能会使用 Array.prototype.slice.call 方法：

const nodeList = document.querySelectorAll('div');
const arr = Array.prototype.slice.call(nodeList);

使用 ES6 的 Array.from 方法可以更方便地实现：

const nodeList = document.querySelectorAll('div');
const arr = Array.from(nodeList);

在 ES10 中，我们可以进一步使用第二个参数来对数组中的元素进行处理。比如，我们可以将 DOM 元素列表中的文本内容提取出来：

const nodeList = document.querySelectorAll('div');
const arr = Array.from(nodeList, el => el.textContent);

如果我们有一个 Set 对象，需要将它转换为数组，以往的做法可能会使用 Array.from 方法：

const set = new Set([1, 2, 3]);
const arr = Array.from(set);

但是这种做法在一些旧的浏览器中可能会出现问题。在 ES10 中，我们可以直接使用 Set 对象的 Array.from 方法：

const set = new Set([1, 2, 3]);
const arr = Array.from(set);

注意事项

在使用 Array.from 方法时，需要注意以下几点：

• 要转换的对象必须是一个类数组对象或可迭代对象。
• 映射函数的第一个参数是当前元素的值，第二个参数是当前元素的索引。
• 映射函数的第三个参数是可选的，用于指定映射函数中的 this 值。

结论

ES10 中的 Array.from 方法为我们提供了一种更方便、更灵活的方式来将类数组对象转换为数组。它不仅可以转换普通的类数组对象，还可以转换一些特殊的数据结构，比如 Set 和 Map。在实际开发中，我们应该尽可能地使用 Array.from 方法，以提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677a308a5c5a933a34120450