在 JavaScript 的 ECMAScript 2016 标准中，新增了一个很实用的方法 Array.from()，该方法可以将一个类数组对象或可迭代对象转换为一个真正的数组。这个方法非常有用，因为在开发 Web 应用程序中，我们经常需要将一些类数组对象如字符串、Set 等转换成真正的数组，以便于我们对其进行操作和处理。
使用方法
Array.from() 方法接收两个参数，第一个参数为需要转换为数组的类数组对象或可迭代对象，第二个可选参数为转换的函数。
Array.from(arrayLike [, mapFn [, thisArg]])
其中，arrayLike 表示需要转换为数组的类数组对象或可迭代对象，可以是以下类型：
- 任何带有
length属性的对象，如字符串、NodeList、arguments 等； - 遵循迭代器协议（具有
Symbol.iterator属性）的对象，例如 Set 和 Map。
除了第一个参数，第二个参数 mapFn 表示转换函数，我们可以用它来对数组进行处理。这个函数接收三个参数：当前值（必选）、当前点（可选）、原始的数组（数据源）（可选）。第三个参数 thisArg 表示执行回调时 mapFn 函数内部的 this 指向。
下面是一个简单的示例，将 Set 对象转化成真正的数组：
const mySet = new Set(["apple", "banana", "orange"]); const arr = Array.from(mySet); // ["apple", "banana", "orange"]
我们还可以在转换时对每一个元素进行处理，例如将字符串转化成数组：
const str = "hello, world!"; const strArr = Array.from(str, (c) => c.toUpperCase()); // ["H", "E", "L", "L", "O", ",", " ", "W", "O", "R", "L", "D", "!"]
注意，如果不使用第二个参数，那么会将原始类数组对象或可迭代对象中所有的数值给保留下来，但是不会进行值的处理。
深度讲解
来深入了解一下 Array.from() 方法的实现原理及背后的原理。
在 JavaScript 中，数组是一组有序的集合数据，可以通过下标访问其元素。而类数组对象或可迭代对象，它们有一些像数组一样的特性，比如 length 属性、迭代器协议等，但它们却不能直接使用下标访问它们的值。
所以，类数组对象或可迭代对象需要转化成数组以方便我们对它们进行数组操作。在早先的 JavaScript 版本中，我们需要使用以下的方法来实现转换：
const arrayLike = { 0: "foo", 1: "bar", 2: "baz", length: 3 };
const arr = Array.prototype.slice.call(arrayLike);
// ["foo", "bar", "baz"]Array.prototype.slice.call() 能够将类数组对象（即不是正式的数组）转化成真正的数组。然而，这样处理起来很麻烦，而且在一些情况下（比如对迭代器协议对象的处理）并不能达到我们想要的效果。
所以，为了实现更加高效的类数组对象转化，ECMAScript 2016 标准中引入了 Array.from() 方法。该方法首先会判断 arrayLike 是否为真正的数组，如果是，则直接返回这个数组，否则依据 arrayLike 的内部 [[Class]] 属性值，创建一个新的数组对象，使用 for...of 语句遍历 arrayLike 中的元素，并将每一个元素存入新数组中。
如果我们传入第二个参数 mapFn，则会进一步处理每一个元素。这个函数和数组的 map() 方法类似，会按顺序依次针对数组中的每一个元素进行调用，处理后的值会被放入新数组对象中，最终返回这个完成了元素处理的数组。
需要注意的是，如果 mapFn 函数执行错误，则会抛出错误并中断数组转换过程。
总结
Array.from() 方法是 JavaScript ECMAScript 2016 标准中的新增方法，用于将类数组对象或可迭代对象转换为真正的数组以方便操作和处理。通过该方法，我们能够轻松地将字符串、NodeList、Set 等数据结构转换成数组，并对每一个元素进行处理等。掌握 Array.from() 方法能够提升我们在 Web 应用程序开发中的开发效率，并优化代码质量。
以上便是在 ECMAScript 2016 中使用 Array.from() 方法创建数组的详细介绍和示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f4391bf6b2d6eab3d524c7