在 ES6 中，新增了一个 Array.from() 方法，用于将类数组对象或可迭代对象转换成数组。本文将详细介绍该方法的用法及应用。
语法
Array.from(obj[, mapFn[, thisArg]])
- obj：必选项，要转换成数组的对象。
- mapFn：可选项，类似于 Array.prototype.map() 方法的回调函数，用于对数组元素进行转换。
- thisArg：可选项，mapFn 回调函数中的 this 指向。
示例
将类数组对象转换为数组
-- -------------------- ---- ------- --- --- - - -- ---- -- ---- -- ---- ------- - -- --- --- - ---------------- ----------------- -- ----- ---- ----
将可迭代对象转换为数组
let set = new Set(['a', 'b', 'c']); let arr = Array.from(set); console.log(arr); // ['a', 'b', 'c']
使用 mapFn 对数组元素进行转换
-- -------------------- ---- ------- --- --- - - -- -- -- -- -- -- ------- - -- --- --- - --------------- - -- - - --- ----------------- -- --- -- --
使用 thisArg 指定 mapFn 回调函数中的 this 指向
-- -------------------- ---- ------- --- --- - - -- -- -- -- -- -- ------- - -- --- --- - --------------- ----------- - ------ - - ----- -- --- ----------------- -- --- -- --
应用
将 NodeList 转换为数组
在 DOM 操作中，经常会用到 NodeList 对象，该对象是一个类数组对象，可以使用 Array.from() 方法将其转换为数组。
let lis = document.querySelectorAll('li');
let arr = Array.from(lis);将 arguments 对象转换为数组
在函数内部，可以使用 arguments 对象获取所有传入的参数，该对象也是一个类数组对象，可以使用 Array.from() 方法将其转换为数组。
function foo() {
let arr = Array.from(arguments);
console.log(arr);
}
foo(1, 2, 3); // [1, 2, 3]将字符串转换为数组
使用 Array.from() 方法可以将字符串转换为数组，每个字符成为数组的一个元素。
let str = 'hello'; let arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o']
总结
Array.from() 方法可以将类数组对象或可迭代对象转换为数组，并且可以对数组元素进行转换。在实际开发中，该方法可以用于将 NodeList、arguments 对象、字符串等转换为数组，方便我们进行后续的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6559da0fd2f5e1655d445ae4