ECMAScript 2019 中的 Array.{from,of}，让你的数组操作更加便捷！

ECMAScript 2019 中的 Array.{from,of}，让你的数组操作更加便捷！

在前端开发中，我们经常需要对数组进行操作，例如创建新数组、转换数据类型、过滤数据等等。在 ECMAScript 2019 中，新增了 Array.{from,of} 方法，让数组操作更加便捷。

Array.from

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

将类数组对象转换为数组

下面是一个将类数组对象转换为数组的例子：

const arrayLike = { 0: 'foo', 1: 'bar', length: 2 };
const array = Array.from(arrayLike);
console.log(array); // ['foo', 'bar']

在这个例子中，我们创建了一个类数组对象 arrayLike，它有两个属性 0 和 1，以及一个 length 属性。Array.from 方法将这个类数组对象转换为了一个真正的数组 array。

将可迭代对象转换为数组

除了类数组对象，Array.from 方法还可以将可迭代对象转换为数组。可迭代对象包括数组、Set、Map、字符串等等。下面是一个将字符串转换为数组的例子：

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

在这个例子中，我们将字符串 str 转换为了一个数组 array。

对数组中的每个元素进行处理

Array.from 方法的第二个参数是一个可选的函数，用于对数组中的每个元素进行处理。下面是一个将类数组对象中的每个元素转换为数字的例子：

const arrayLike = { 0: '1', 1: '2', length: 2 };
const array = Array.from(arrayLike, x => parseInt(x));
console.log(array); // [1, 2]

在这个例子中，我们创建了一个类数组对象 arrayLike，它的每个元素都是一个字符串。Array.from 方法的第二个参数是一个函数，它将每个字符串转换为了数字。

Array.of

Array.of 方法可以创建一个包含任意个元素的数组。它接受任意个参数，每个参数都是数组中的一个元素。

下面是一个创建数组的例子：

const array = Array.of(1, 2, 'foo', [3, 4]);
console.log(array); // [1, 2, 'foo', [3, 4]]

在这个例子中，我们使用 Array.of 方法创建了一个包含四个元素的数组。

总结

在 ECMAScript 2019 中，新增了 Array.{from,of} 方法，让数组操作更加便捷。Array.from 方法可以将一个类数组对象或可迭代对象转换为数组，并可以对数组中的每个元素进行处理。Array.of 方法可以创建一个包含任意个元素的数组。

在实际开发中，我们可以使用这两个方法来简化数组操作，提高代码的可读性和可维护性。

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