在 ES12 中使用 Array.from 方法优化数组转换

ES12 的 Array.from 方法是一个强大的工具，可以轻松地将任何可迭代对象转换成数组。不仅仅是在 JavaScript 中，该方法还可以在浏览器环境下使用。让我们看一下在前端开发中如何使用它。

Array.from 方法

Array.from 方法接受三个参数，第一个是要转换的可迭代对象，第二个是可以对数组元素进行操作的映射函数，第三个是用于映射函数的上下文。

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

使用场景

将函数返回的类数组转换成数组

有时候函数会返回类数组对象，而我们需要一个真正的数组。在这种情况下，我们可以使用 Array.from 方法：

function getArgs() {
  return Array.from(arguments);
}
console.log(getArgs(1, 2, 3)); // [1, 2, 3]

将可迭代对象转换成数组

除了类数组对象，Array.from 方法还可以将可迭代对象转换为数组。

let set = new Set([1, 2, 3]);
let arr = Array.from(set);
console.log(arr); // [1, 2, 3]

将字符串转换成数组

我们可以将字符串转换为字符数组，如下所示：

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

将带有映射函数的可迭代对象转换成数组

let arr = [1, 2, 3];
let doubled = Array.from(arr, (n) => n * 2);
console.log(doubled); // [2, 4, 6]

将 NodeList 对象转换成数组

如果我们想要对 DOM 元素进行操作，则必须将 NodeList 转换为数组。

let nodeList = document.querySelectorAll('div');
let arr = Array.from(nodeList);
console.log(arr.length); // 10

总结

ES12 的 Array.from 方法提供了一种快速便捷的方法将可迭代对象转换成数组。它非常适合将类数组对象、可迭代对象、字符串等转换成数组，并支持映射函数功能，可以对数组元素进行操作。在前端开发中，该方法将大大提高我们的开发效率。

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