随着前端技术的不断发展，ES6+ 已经成为前端工程师的基本技能之一。在 ES10 中，Array.from() 原生方法为前端开发带来了更多便利。本文将讲述 Array.from() 的特点、用途以及示例案例，希望能够帮助读者更好地应用 ES10 特性。
Array.from() 特点
Array.from() 是 ES6 中新增的适用于集合转化的方法，可以将一个类数组或可迭代对象转化为一个新的数组对象。而在 ES10 中，Array.from() 则对此进行了更加丰富的扩展，使它更加易用。Array.from() 的语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
- arrayLike：表示要转化的数组对象或者可迭代对象。
- mapFn：可选参数，类似 map 方法的映射函数。
- thisArg：可选参数，mapFn 中的上下文值。
需要注意的是，使用 Array.from() 方法转换后的结果是一个全新的数组，而不是原数组进行的直接修改。同时，Array.from() 方法在处理数组时，不会影响原数组中的值。
Array.from() 的用途
Array.from() 方法在前端开发中非常常见，其中一些常见的使用方式包括：
类数组对象的转换
在前端开发中，我们常常需要将一个类数组对象转化为一个真正的数组对象。而这个时候，Array.from() 方法便成了不二选择。
const divs = document.querySelectorAll('div'); // 获取页面中所有的 div 节点
const arr = Array.from(divs); // 将类数组对象转换成为真正的数组对象可迭代对象的转换
在 ES6 中，新增了一些可迭代对象，如 Set 和 Map。在某些情况下，需要将这些可迭代对象转换成为真正的数组对象。
const mySet = new Set([1, 2, 3, 4]); // 将数组转变成 Set 对象 const arr = Array.from(mySet); // 将 Set 对象转换成为真正的数组对象
实现类数组对象的 map 方法
尽管在 ES6 中，引入了 Array.prototype.map() 方法，但是该方法是仅仅只支持真正的数组对象。而如果想在类数组对象中使用 map 方法，则可以使用 Array.from() 来实现。
const res = Array.from({ length: 3 }, (value, index) => index); // 将 { length: 3 } 对象转换成为真正的数组对象，并将其每一项的初始值赋为其对应的 index 值
console.log(res); // 输出 [0, 1, 2]在上述代码中，我们使用了 Array.from() 方法来实现了一个循环 3 次的类数组对象，并通过 map 映射出了对应的 index 值进行赋值。
Array.from() 示例代码
在学习 Array.from() 方法时，接下来的示例代码应该会帮助你更好地理解其使用。
示例 1：将类数组对象转化为数组对象
const obj = { 0: 'a', 1: 'b', length: 2 }; // 定义一个类数组对象
const arr = Array.from(obj); // 将类数组对象转化为数组对象
console.log(arr); // 输出 ['a', 'b']
在上述代码中，我们将一个类数组对象 obj 转换成为了数组对象 arr。
示例 2：将可迭代对象转换为数组对象
const mySet = new Set([1, 2, 3]); // 定义一个 Set 对象 const arr = Array.from(mySet); // 将 Set 对象转换为数组对象 console.log(arr); // 输出 [1, 2, 3]
在上述代码中，我们将一个 Set 对象转换成为了数组对象，并通过 console.log() 在控制台输出了数组对象。
示例 3：实现类数组对象的 Map 方法
const obj = { length: 3 };
const arr = Array.from(obj, (_, index) => index); // 实现类数组对象的 map 方法
console.log(arr); // 输出 [0, 1, 2]在上述代码中，我们利用 Array.from() 方法，实现了一个类数组对象的 map 方法，并通过 console.log() 在控制台输出了数组对象。
总结
通过本文，我们可以了解到 Array.from() 方法的特点、用途以及示例代码。学会运用 Array.from() 方法，在前端开发中操作类数组对象和可迭代对象将会更加方便。希望本文对你有所帮助，也欢迎大家在评论区提出宝贵的意见和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e07bc7f6b2d6eab3b926c8