如何使用 ECMAScript 2019 中的 Array.from 方法简化你的代码-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对数组进行处理和操作。ECMAScript 2019 中新增了 Array.from 方法，可以帮助我们更加方便地处理数组。本文将介绍如何使用 Array.from 方法简化你的代码，并提供示例代码。

Array.from 方法的作用

Array.from 方法可以将一个类数组对象或可迭代对象转换为一个真正的数组。在实际开发中，我们经常会遇到需要将类数组对象或可迭代对象转换为数组的情况。使用 Array.from 方法可以很方便地完成这个过程。

Array.from 方法的语法如下：

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

其中:

在实际开发中，我们经常会遇到需要将类数组对象转换为数组的情况。例如，我们使用 document.querySelectorAll 方法获取到的元素列表就是一个类数组对象。使用 Array.from 方法可以很方便地将其转换为一个真正的数组。

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

除了类数组对象，我们还经常会遇到需要将可迭代对象转换为数组的情况。例如，我们可以使用 Map 对象的 entries 方法获取到一个可迭代对象，然后使用 Array.from 方法将其转换为一个真正的数组。

const map = new Map([
  ['name', '张三'],
  ['age', 18],
]);

const arr = Array.from(map.entries());

在使用 Array.from 方法时，我们还可以传入一个函数对数组每个元素进行处理。例如，我们可以将一个字符串转换为一个字符数组，并将每个字符转换为它的 ASCII 码。

const str = 'hello';
const arr = Array.from(str, c => c.charCodeAt(0));

在实际开发中，我们经常会遇到需要对数组进行处理的情况。使用 Array.from 方法可以帮助我们简化代码，减少重复的工作量。例如，我们可以使用 Array.from 方法和箭头函数将一个数组中所有元素转换为数字。

const arr = ['1', '2', '3'];
const numArr = Array.from(arr, x => Number(x));

Array.from 方法是 ECMAScript 2019 中新增的一个方法，可以帮助我们更加方便地处理数组。本文介绍了 Array.from 方法的作用、语法以及如何使用它实现各种功能。在实际开发中，使用 Array.from 方法可以帮助我们简化代码，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6561ccf0d2f5e1655dbd898b