ES10 中的新特性：静态方法 Array.from()

在 ES10 中，JavaScript 新增了一种静态方法 Array.from()，这个方法可以将类数组和可迭代对象转换成数组。接下来，我们将深入讲解这个新特性的用法和意义。

Array.from() 的用法

Array.from() 方法接收两个参数：第一个参数是需要被转换的类数组或可迭代对象，第二个参数是一个可选回调函数，用于对数组中的每个元素进行转换。如果不传递第二个参数，则数组中的元素不做任何转换。

以下是一个将字符串转换成数组的示例：

const str = 'hello world';
const arr = Array.from(str);

console.log(arr); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

这里将字符串 str 转换成数组 arr，并将其打印到控制台上。

以下是另一个示例，使用了第二个参数来对数组中的每个元素进行转换：

const nums = [1, 2, 3];

const doubled = Array.from(nums, num => num * 2);

console.log(doubled); // [2, 4, 6]

这里将数组 nums 中的每个元素都乘以 2，得到新数组 doubled。

Array.from() 的意义

Array.from() 方法具有重要的意义，可以在不改变原始类数组或可迭代对象的情况下，将其转换成适合操作的数组。它还可以使代码更加简洁，易于理解和维护。

以下是一个将函数的参数转换成数组的示例：

function add() {
  const nums = Array.from(arguments);
  return nums.reduce((total, num) => total + num);
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2, 3, 4, 5)); // 15

这里使用了 Array.from() 方法来将函数 add() 的参数转换成数组 nums，然后对数组中的所有元素求和。

另外，Array.from() 方法还支持使用 map 和 reduce 等方法对数组进行操作，这大大增加了其灵活性和可用性。

总结

在 ES10 中，静态方法 Array.from() 可以将类数组和可迭代对象转换成数组，并支持使用回调函数对数组中的每个元素进行转换。它使代码更加简洁易懂，提高了可维护性和灵活性，是前端开发的重要工具之一。

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