ECMAScript 2021 中的 Array.from 方法使用方法详解

随着 JavaScript 的快速发展，新的 ECMAScript 标准越来越频繁地发布。而本文将要讨论的 ECMAScript 2021 中的 Array.from 方法是一种非常有用的功能，可以在前端开发中大大提升开发效率。本文将详细介绍 Array.from 方法的使用方法，以及示例代码，帮助读者掌握这个工具。

Array.from 方法的作用

Array.from 方法是 ECMAScript 2015（ES6）中引入的新特性。它可以将类似数组的对象（具有 length 属性和索引元素）或可迭代对象（如 Set 和 Map）转换为一个真正的数组。它的作用就是创建一个新数组，其中包含来自原始对象的所有元素。

Array.from 方法的基本用法

Array.from 方法接受两个参数：一个要转换为数组的类似数组的对象或可迭代对象，以及一个可选的转换函数，该函数用于在每个元素上进行转换。如果没有指定转换函数，数组将包含原始对象中的所有元素。

以下是一个简单的示例，演示如何使用 Array.from 方法从字符串中创建一个字符数组：

const str = 'hello';
const chars = Array.from(str);
console.log(chars); // 输出 ['h', 'e', 'l', 'l', 'o']

如果要创建一个包含数字的数组，只需要将字符串替换为数字数组：

const nums = Array.from([1, 2, 3]);
console.log(nums); // 输出 [1, 2, 3]

这使得将类似数组的数据结构或可迭代对象转换为真实数组变得非常容易。在前端开发中，这经常用于处理来自 Web API 的数据。

使用转换函数

如果您需要对每个元素进行转换，您可以使用 Array.from 方法的第二个参数，该参数接受一个映射函数。该函数对数组中的每个元素进行操作，并返回转换后的值。

以下是一个示例，演示将字符串中的所有字符转换为它们的 ASCII 码值：

const str = 'hello';
const ascii = Array.from(str, c => c.charCodeAt(0));
console.log(ascii); // 输出 [104, 101, 108, 108, 111]

转换函数接受两个参数：数组中的当前元素以及当前元素的索引。您可以使用这些参数来执行任何计算需要的操作。

支持转换 Map 和 Set

Array.from 方法不仅仅可以将类似数组的对象转换为数组，还可以将 Set 和 Map 转换为数组。

以下是一个从 Set 转换为数组的示例：

const mySet = new Set(['apple', 'banana', 'pear']);
const arr = Array.from(mySet);
console.log(arr); // 输出 ['apple', 'banana', 'pear']

对于 Map，您可以使用 Array.from 方法将其转换为一个对象数组：

const myMap = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
const arr = Array.from(myMap);
console.log(arr); // 输出 [[1, 'one'], [2, 'two'], [3, 'three']]

您可以在映射函数中对这些元素进行进一步的操作，例如将 Map 的键映射为一个新的数组，以便更轻松地使用它们：

const myMap = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
const arr = Array.from(myMap, ([key, value]) => key);
console.log(arr); // 输出 [1, 2, 3]

结论

Array.from 方法是一个非常有用的功能，可以将任何类似数组的对象或可迭代对象转换为数组。此外，它还支持使用转换函数对每个元素进行操作，并可以将 Set 和 Map 转换为数组。对于前端开发人员来说，这是一个非常重要的功能，因为它可以帮助我们更快速地处理数据。如果您希望深入了解这个方法，请查阅 ECMAScript 2021（ES12）规范的相关内容。

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