ES10 中的 Array.from() 方法详解及注意事项-JavaScript中文网-JavaScript教程资源分享门户

在 ES10 中，Array 对象新增了一个静态方法 Array.from()。该方法可以将一个类数组对象或可迭代对象转换成一个新的数组实例。在前端开发中，我们经常会碰到需要将类似数组的对象或可迭代对象转换成数组的场景，Array.from() 方法可以大大地简化我们的代码，提高开发效率。本文将详细介绍 Array.from() 方法的使用方法、注意事项以及示例代码，帮助大家更好地理解这个方法。

语法

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

obj：类数组对象或可迭代对象。
mapFn：可选参数，映射函数，用于对数组中的每个元素进行处理后返回新数组。一般使用箭头函数或 function 声明一个回调函数，在该函数中对每个数组元素进行处理操作。默认值为 item => item，即不对数组中的元素进行任何处理。
thisArg：可选参数，用于绑定 mapFn 中 this 的值。如果省略这个参数，则 mapFn 回调中的 this 就是 undefined。

使用方法

将类数组对象转换成数组

首先，我们来看一下将类数组对象转换成数组的场景。类数组对象是指具有 length 属性且可以通过下标访问的对象，比如 NodeLists 或 arguments 对象。在以前，我们通常需要手写一个 for 循环遍历对象并逐个将其添加到新的数组中。但是，使用 Array.from() 方法，我们可以轻松实现该功能。

let arrLike = {
  0: 'zero',
  1: 'one',
  length: 2
};

let arr = Array.from(arrLike);
console.log(arr); // ['zero', 'one']

以上示例中，我们将 arrLike 对象转换成了一个新的数组实例 arr。在 Array.from() 方法中传入了一个类数组对象 arrLike，该方法会通过遍历这个对象的元素并逐个添加到新的数组中，最终返回这个新的数组。

将可迭代对象转换成数组

除了类数组对象，我们还可以使用 Array.from() 方法将可迭代对象转换成数组。可迭代对象是指具有 Symbol.iterator 属性的对象，比如 Set、Map 等。

let set = new Set(['zero', 'one']);
let arr = Array.from(set);
console.log(arr); // ['zero', 'one']

以上示例中，我们将 Set 对象转换成了一个新的数组实例 arr。在 Array.from() 方法中传入了一个可迭代对象 set，该方法会遍历这个对象的元素并逐个添加到新的数组中，最终返回这个新的数组。

使用 mapFn 映射新数组元素

除了将类数组对象或可迭代对象转换成数组外，Array.from() 方法还支持使用 mapFn 参数来映射新数组元素。在调用 Array.from() 方法时指定一个回调函数，在该函数中对每个数组元素进行处理操作，从而生成一个新的数组。这种方式可以帮助我们快速地对数组中的元素进行处理。

let arr = [1, 2, 3];
let arr2 = Array.from(arr, item => item * 2);
console.log(arr2); // [2, 4, 6]

以上示例中，我们将数组 arr 中的每个元素乘以 2，生成一个新的数组 arr2。第二个参数 item => item * 2 就是我们传入的映射函数，它将数组中的每个元素进行乘法操作，最终返回一个新的数组。

使用 thisArg 绑定映射函数中 this 的值

有时候，在我们使用 mapFn 映射新数组元素时，可能需要在映射函数中使用 this 关键字引用某个对象。在这种场景下，我们可以使用 thisArg 参数来绑定映射函数中 this 的值。

let obj = {
  count: 2
};
let arr = [1, 2, 3];
let arr2 = Array.from(arr, function(item) {
  return item * this.count;
}, obj);
console.log(arr2); // [2, 4, 6]

以上示例中，我们将数组 arr 中的每个元素乘以 obj 中的 count 属性，生成一个新的数组 arr2。在映射函数中使用了 this.count 引用了 obj 中的 count 属性。在 Array.from() 方法中，我们将第三个参数指定为 obj，这样在映射函数中就可以正确地引用 this。如果省略 thisArg 参数，映射函数中的 this 就是 undefined。

注意事项

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

类数组对象中必须具有 length 属性。否则会抛出 TypeError 异常。
在映射函数中无法访问类数组对象的原型链上的方法和属性。因为 Array.from() 方法创建的是一个新的数组实例，不包含原型链上的方法和属性。
在映射函数中可以使用 this 关键字引用任意对象。但是，如果忘记传入 thisArg 参数，则 this 关键字会被自动绑定为 undefined。
在映射函数中尽量不要改变原数组中的元素或者产生副作用。这样会导致代码不可预测，难以维护。

总结

Array.from() 方法是一个非常实用的方法，它可以将类数组对象或可迭代对象转换成数组，并且支持使用映射函数对数组元素进行处理操作。在使用 Array.from() 方法时，需要注意参数和映射函数的使用方法，以及避免产生副作用和改变原数组元素。通过掌握该方法，可以大大简化我们的代码，提高开发效率。

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