在前端开发中,数组是最常用的数据结构之一,而在 ES6 中,新增了两个方法:Array.from
和 Array.of
,它们可以提高数组操作的效率,让我们来了解一下。
Array.from
Array.from
方法可以将类数组对象或可迭代对象转换成数组。这意味着我们可以将一个 NodeList、一个字符串、一个 Set 或者一个 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
构造函数时的一些问题。在实际开发中,我们应该尽可能地使用这些方法,以提高代码的可读性和效率。
示例代码
-- -------------------- ---- ------- -- -- ---------- - -------- ----- ----- -------- - ------------------------------- ----- ----------------- - --------------------- -- -- ---------- --------- ----- ------ - ------ ------- ----- --------------- - ------------------- -- -- ---------- - --- ----- ----- --- - --- --------- ---- ------ ----- ------------ - ---------------- -- -- ---------- - --- ----- ----- --- - --- ------------- -------- ------- ------ ----- ------------ - ---------------- -- -- ---------- ------- ----- ----- - --- -- -- -- --- ----- -------- - ----------------- - -- - - --- -- --- -- -- -- --- -- -- -------- ------------- ----- ------ - ----------- -- --- -- --- -- -- ----- ------ - ------------ -- --- ----- ------ - ----------------- --------- -- --------- --------
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65bdd6b4add4f0e0ff7737bc