ES10 中引入的函数 Array.from() 及如何正确使用

在前端开发中，处理数组是一项非常基础的操作。ES10 中引入了一个新函数 Array.from()，它可以将一些对象转换成一个数组。在这篇文章中，我将介绍 Array.from() 的使用方法以及一些注意事项。

什么是 Array.from()？

Array.from() 函数是在 ECMAScript 2015 标准中被引入的。它可以接收一个类数组对象或者可迭代对象，并将其转换成一个数组。

在之前的实现中，我们可能需要使用 Array.prototype.slice 或者 Array.prototype.map 来将一个类似数组的数据结构转换成真正的数组。但是经常使用这些方法时需要我们编写额外的代码和处理逻辑，而 Array.from() 可以让转换的操作更加简洁和清晰。

如何使用 Array.from()？

下面是 Array.from() 的语法：

Array.from(arrayLike[, mapFn[, thisArg]])

其中，arrayLike 是需要转换的类数组对象或可迭代对象，mapFn 是一个可选的回调函数，用于对新数组进行特定的映射操作，thisArg 则是 mapFn 中使用的 this 指向上下文对象。

如果传入的参数是一个可迭代对象，那么它应该遵循迭代协议，即支持 for...of 语句。

下面是一个简单的例子：

const str = 'hello world';

const arr = Array.from(str);

console.log(arr); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

在上面的例子中，我使用了 Array.from() 函数将一个字符串转换成一个数组。由于字符串是一个类数组对象，因此我们可以直接传入它进行转换。

如果我们需要进一步对数组进行映射，可以传入 mapFn 参数：

const str = '1 2 3 4 5';

const arr = Array.from(str, (num) => parseInt(num, 10));

console.log(arr); // [1, 2, 3, 4, 5]

在这个例子中，我先将一个字符串转换成了一个数组，然后使用 mapFn 将每个元素都转换成了数字。需要注意的是，在使用 mapFn 时必须返回一个新的值，否则新数组中将填充 undefined 值。

Array.from() 的注意事项

在使用 Array.from() 时需要注意以下几点：

1. 在参数可迭代对象为 null 或 undefined 时，会抛出 TypeError 错误。
2. 当被转换的对象为类数组对象时，新数组的长度将和原对象相同，但并不保证原本的值一定存在于数组中。如果原对象的长度为 0，那么新数组也将为空数组。
3. 当 mapFn 函数中使用了 thisArg 参数时，它将作为 mapFn 中的 this 指向上下文对象。

总结

Array.from() 函数作为一个方便地、清晰明了的数据类型转换工具，可以帮助减少在处理数组时的冗余代码和处理逻辑。在使用过程中，我们需要注意传入的参数对象类型以及回调函数的正确操作，避免出现错误和问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca12f85ad90b6d04197552