在 ECMAScript 2019（ES10）中，Array 对象新增了一个静态方法 Array.from()，该方法可以将类数组对象或可迭代对象转换为真正的数组。本文将详细介绍 Array.from() 的使用方法和实例，帮助读者更好地理解和应用这个方法。
Array.from() 方法的语法
Array.from() 方法的语法如下：
---------------------- ------- ----------
其中，arrayLike 参数表示要转换为数组的类数组对象或可迭代对象。mapFn 参数是一个可选的回调函数，用于对数组元素进行处理或映射。thisArg 参数也是可选的，用于指定 mapFn 函数中 this 的值。
Array.from() 方法的使用
将类数组对象转换为数组
首先，我们来看一个将类数组对象转换为数组的例子：
----- --------- - - -- ---- -- ---- -- ---- ------- - -- ----- --- - ---------------------- ----------------- -- ----- ---- ----
上述代码中，我们定义了一个类数组对象 arrayLike，该对象具有 3 个属性和一个 length 属性，因此可以被视为数组。我们使用 Array.from() 方法将 arrayLike 转换为真正的数组，并将结果保存在变量 arr 中。
将可迭代对象转换为数组
除了类数组对象，Array.from() 方法还可以将可迭代对象转换为数组。可迭代对象是指实现了迭代器协议的对象，例如 Set、Map 和字符串等。下面是一个将 Set 对象转换为数组的例子：
----- --- - --- --------- ---- ------ ----- --- - ---------------- ----------------- -- ----- ---- ----
上述代码中，我们定义了一个 Set 对象 set，其中包含了三个字符串元素。我们使用 Array.from() 方法将 set 转换为真正的数组，并将结果保存在变量 arr 中。
使用 mapFn 参数对数组元素进行处理
在转换数组的过程中，我们还可以使用 mapFn 参数对数组元素进行处理或映射。下面是一个将字符串数组转换为数字数组的例子：
----- ------ - ----- ---- ----- ----- ------ - ------------------ -------- -------------------- -- --- -- --
上述代码中，我们定义了一个字符串数组 strArr，其中包含了三个字符串元素。我们使用 Array.from() 方法将 strArr 转换为真正的数组，并使用 Number 函数作为 mapFn 参数，将字符串转换为数字。最终，我们得到了一个数字数组 numArr。
使用 thisArg 参数指定 mapFn 函数中的 this 值
在使用 mapFn 参数对数组元素进行处理或映射时，我们还可以使用 thisArg 参数指定 mapFn 函数中的 this 值。下面是一个将字符串数组转换为大写字母数组的例子：
----- ------ - ----- ---- ----- ----- ------------ - ------------------ -------- --- - ------ ---------------- -- ------------------ -------------------------- -- ----- ---- ----
上述代码中，我们定义了一个字符串数组 strArr，其中包含了三个小写字母。我们使用 Array.from() 方法将 strArr 转换为真正的数组，并使用一个匿名函数作为 mapFn 参数，将字符串转换为大写字母。我们还使用 String.prototype 作为 thisArg 参数，将 this 值指定为 String 对象。最终，我们得到了一个大写字母数组 upperCaseArr。
总结
Array.from() 方法是 ECMAScript 2019（ES10）中新增的一个静态方法，用于将类数组对象或可迭代对象转换为真正的数组。除了基本的转换功能外，该方法还支持使用 mapFn 和 thisArg 参数对数组元素进行处理或映射。本文介绍了 Array.from() 方法的语法、使用方法和实例，希望能帮助读者更好地理解和应用这个方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d02890add4f0e0ff935211