ES6 中的 array.from 方法如何快速转化任意对象为数组

在前端开发中，我们常常需要将一个类数组对象或者一个迭代器对象转为数组。在 ES6 之前，我们通常使用 Array.prototype.slice，Array.prototype.concat 或者循环的方式来实现。这些方法虽然可以完成任务，但是代码冗长，不够直观。

幸运的是，ES6 提供了一个更为便捷的方法：Array.from。

Array.from 方法的定义和用法

Array.from 方法的定义如下：

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

使用该方法可以将一个类数组对象或者一个迭代器对象转为一个真正的数组。其中，arrayLike 指的是具有 length 属性和可迭代属性的对象，比如 Array、String、Set、Map、arguments 对象等。mapFn 参数是一个函数，用于对每个元素进行处理并返回新的元素值。thisArg 则指定 mapFn 中的 this 对象。

下面是一个简单的示例，将一个字符串转为数组：

const str = 'hello world';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

Array.from 方法的进阶应用

除了上述用法，Array.from 方法还可以应用在更多场景中。下面是一些进阶应用示例：

1. 使用 mapFn 对每个元素进行处理

const str = 'hello world';
const arr = Array.from(str, char => char.toUpperCase());
console.log(arr); // ['H', 'E', 'L', 'L', 'O', ' ', 'W', 'O', 'R', 'L', 'D']

2. 将类数组对象转为数组

const divList = document.querySelectorAll('div');
const arr = Array.from(divList);
console.log(arr); // Array(10) [ div, div, div, ... ]

3. 在构造函数中使用

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

const arr = MyArray.from([1, 2, 3], x => x + x);
console.log(arr); // MyArray(3) [ 2, 4, 6 ]

总结

Array.from 方法为我们提供了一种更加便捷以及直观的方式将类数组对象和迭代器对象转为数组。在日常开发中，了解并灵活应用该方法能够帮助我们更高效地完成任务。

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