使用 ES6 的 Array.from 和 Array.of 提高数组操作效率-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，数组是最常用的数据结构之一，而在 ES6 中，新增了两个方法：Array.from 和 Array.of，它们可以提高数组操作的效率，让我们来了解一下。

Array.from

Array.from 方法可以将类数组对象或可迭代对象转换成数组。这意味着我们可以将一个 NodeList、一个字符串、一个 Set 或者一个 Map 转换成数组。

// 将 NodeList 转换成数组
const nodeList = document.querySelectorAll('p');
const arrayFromNodeList = Array.from(nodeList);

// 将字符串转换成数组
const string = 'hello world';
const arrayFromString = Array.from(string);

// 将 Set 转换成数组
const set = new Set(['a', 'b', 'c']);
const arrayFromSet = Array.from(set);

// 将 Map 转换成数组
const map = new Map([['name', 'John'], ['age', 30]]);
const arrayFromMap = Array.from(map);

除了可以将类数组对象或可迭代对象转换成数组之外，Array.from 还可以接受一个类似于 map 的函数，对数组进行处理：

const array = [1, 2, 3, 4, 5];
const newArray = Array.from(array, x => x * 2); // [2, 4, 6, 8, 10]

Array.of

Array.of 方法可以创建一个包含任意数量参数的数组，而不需要使用 Array 构造函数。这个方法可以避免使用 Array 构造函数时的一些问题，比如 new Array(3) 会创建一个长度为 3 的空数组，而 Array.of(3) 会创建一个包含一个元素为 3 的数组。

const array1 = Array.of(1, 2, 3); // [1, 2, 3]
const array2 = Array.of(3); // [3]
const array3 = Array.of('hello', 'world'); // ['hello', 'world']

总结

Array.from 和 Array.of 是 ES6 中新增的两个数组方法，它们可以提高数组操作的效率，让我们的代码更加简洁和易读。我们可以使用 Array.from 将类数组对象或可迭代对象转换成数组，并可以对数组进行处理；使用 Array.of 可以创建一个包含任意数量参数的数组，避免使用 Array 构造函数时的一些问题。在实际开发中，我们应该尽可能地使用这些方法，以提高代码的可读性和效率。

示例代码

// 使用 Array.from 将 NodeList 转换成数组
const nodeList = document.querySelectorAll('p');
const arrayFromNodeList = Array.from(nodeList);

// 使用 Array.from 将字符串转换成数组
const string = 'hello world';
const arrayFromString = Array.from(string);

// 使用 Array.from 将 Set 转换成数组
const set = new Set(['a', 'b', 'c']);
const arrayFromSet = Array.from(set);

// 使用 Array.from 将 Map 转换成数组
const map = new Map([['name', 'John'], ['age', 30]]);
const arrayFromMap = Array.from(map);

// 使用 Array.from 对数组进行处理
const array = [1, 2, 3, 4, 5];
const newArray = Array.from(array, x => x * 2); // [2, 4, 6, 8, 10]

// 使用 Array.of 创建包含任意数量参数的数组
const array1 = Array.of(1, 2, 3); // [1, 2, 3]
const array2 = Array.of(3); // [3]
const array3 = Array.of('hello', 'world'); // ['hello', 'world']

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