在前端开发中，处理数组是一项非常基础的操作。ES10 中引入了一个新函数 Array.from()，它可以将一些对象转换成一个数组。在这篇文章中，我将介绍 Array.from() 的使用方法以及一些注意事项。
什么是 Array.from()？
Array.from() 函数是在 ECMAScript 2015 标准中被引入的。它可以接收一个类数组对象或者可迭代对象，并将其转换成一个数组。
在之前的实现中，我们可能需要使用 Array.prototype.slice 或者 Array.prototype.map 来将一个类似数组的数据结构转换成真正的数组。但是经常使用这些方法时需要我们编写额外的代码和处理逻辑，而 Array.from() 可以让转换的操作更加简洁和清晰。
如何使用 Array.from()？
下面是 Array.from() 的语法：
---------------------- ------- ----------
其中，arrayLike 是需要转换的类数组对象或可迭代对象，mapFn 是一个可选的回调函数，用于对新数组进行特定的映射操作，thisArg 则是 mapFn 中使用的 this 指向上下文对象。
如果传入的参数是一个可迭代对象，那么它应该遵循迭代协议，即支持 for...of 语句。
下面是一个简单的例子：
----- --- - ------ ------- ----- --- - ---------------- ----------------- -- ----- ---- ---- ---- ---- - -- ---- ---- ---- ---- ----
在上面的例子中，我使用了 Array.from() 函数将一个字符串转换成一个数组。由于字符串是一个类数组对象，因此我们可以直接传入它进行转换。
如果我们需要进一步对数组进行映射，可以传入 mapFn 参数：
----- --- - -- - - - --- ----- --- - --------------- ----- -- ------------- ----- ----------------- -- --- -- -- -- --
在这个例子中，我先将一个字符串转换成了一个数组，然后使用 mapFn 将每个元素都转换成了数字。需要注意的是，在使用 mapFn 时必须返回一个新的值，否则新数组中将填充 undefined 值。
Array.from() 的注意事项
在使用 Array.from() 时需要注意以下几点：
- 在参数可迭代对象为 null 或 undefined 时，会抛出 TypeError 错误。
- 当被转换的对象为类数组对象时，新数组的长度将和原对象相同，但并不保证原本的值一定存在于数组中。如果原对象的长度为 0，那么新数组也将为空数组。
- 当 mapFn 函数中使用了 thisArg 参数时，它将作为 mapFn 中的 this 指向上下文对象。
总结
Array.from() 函数作为一个方便地、清晰明了的数据类型转换工具，可以帮助减少在处理数组时的冗余代码和处理逻辑。在使用过程中，我们需要注意传入的参数对象类型以及回调函数的正确操作，避免出现错误和问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ca12f85ad90b6d04197552