在前端开发中，有时候我们会遇到将类数组对象转化为数组的问题。这种情况一般出现在需要对 DOM 元素进行操作，或者使用类似 arguments 这样的对象时。在 ES6 之前，我们通常会使用 Array.prototype.slice.call() 或者 Array.prototype.splice.call() 来将类数组对象转化为数组。但是，这种方式存在一些问题，例如无法处理稀疏数组、不能处理类似 Map 或 Set 这样的非数组对象。解决这些问题的方法是使用 ES6 中新增的 Array.from() 方法。
Array.from() 的基本使用
Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。它接收两个参数，第一个参数是要转换的对象，第二个参数是一个可选的 map 函数。map 函数可以类似于 Array.prototype.map() 中的回调函数进行处理。
下面是一个简单的示例，展示了如何使用 Array.from() 将类数组对象转化为数组：
const arrayLikeObj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLikeObj); // [ 'a', 'b', 'c' ]处理 Map 和 Set 对象
Array.from() 不仅可以处理类数组对象，还可以处理 Map 和 Set 对象。由于 Map 和 Set 是可迭代对象，因此可以直接传入 Array.from() 方法中进行转换。
下面是一个转换 Map 对象的示例：
const map = new Map([[1,'a'],[2,'b']]); const arr = Array.from(map); // [[1,'a'],[2,'b']]
Array.from() 实现类数组对象的运算
在实际开发中，我们经常需要对类数组对象进行操作，例如取最大值、最小值、平均值等。使用 ES6 中的 Array.from() 方法，我们可以方便地对类数组对象进行相应的运算。
下面是一个计算类数组对象平均值的示例：
const arrayLikeObj = { 0: 1, 1: 2, 2: 3, length: 3 };
const arr = Array.from(arrayLikeObj);
const avg = arr.reduce((acc, cur) => acc + cur) / arr.length;
console.log(avg); // 2Array.from() 实现函数参数转换
在函数设计中，有时候需要将一个类数组对象或可迭代对象作为参数传入。我们可以使用 Array.from() 方法将其转换为真正的数组。
下面是一个函数参数转换的示例：
function sum(...args) {
const arr = Array.from(args);
return arr.reduce((acc, cur) => acc + cur);
}
const res = sum(1, 2, 3, 4);
console.log(res); // 10总结
使用 ES6 中的 Array.from() 方法，我们可以轻松地将类数组对象、Map 和 Set 对象转化为数组，也可以对类数组对象进行相应的运算，同时还可以实现函数参数转换。它的使用不仅能够提高代码可读性和可维护性，还可以避免一些问题，例如不能处理稀疏数组、不能处理非数组对象等。因此，使用 Array.from() 方法是我们进行数组转换时的不二选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e3042df6b2d6eab3e559a1