在 ECMAScript 2019（ES10）中，Array 对象新增了一个静态方法 Array.from()，该方法可以将类数组对象或可迭代对象转换为真正的数组。本文将详细介绍 Array.from() 的使用方法和实例，帮助读者更好地理解和应用这个方法。
Array.from() 方法的语法
Array.from() 方法的语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
其中，arrayLike 参数表示要转换为数组的类数组对象或可迭代对象。mapFn 参数是一个可选的回调函数，用于对数组元素进行处理或映射。thisArg 参数也是可选的，用于指定 mapFn 函数中 this 的值。
Array.from() 方法的使用
将类数组对象转换为数组
首先，我们来看一个将类数组对象转换为数组的例子：
const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b', 'c']上述代码中，我们定义了一个类数组对象 arrayLike，该对象具有 3 个属性和一个 length 属性，因此可以被视为数组。我们使用 Array.from() 方法将 arrayLike 转换为真正的数组，并将结果保存在变量 arr 中。
将可迭代对象转换为数组
除了类数组对象，Array.from() 方法还可以将可迭代对象转换为数组。可迭代对象是指实现了迭代器协议的对象，例如 Set、Map 和字符串等。下面是一个将 Set 对象转换为数组的例子：
const set = new Set(['a', 'b', 'c']); const arr = Array.from(set); console.log(arr); // ['a', 'b', 'c']
上述代码中，我们定义了一个 Set 对象 set，其中包含了三个字符串元素。我们使用 Array.from() 方法将 set 转换为真正的数组，并将结果保存在变量 arr 中。
使用 mapFn 参数对数组元素进行处理
在转换数组的过程中，我们还可以使用 mapFn 参数对数组元素进行处理或映射。下面是一个将字符串数组转换为数字数组的例子：
const strArr = ['1', '2', '3']; const numArr = Array.from(strArr, Number); console.log(numArr); // [1, 2, 3]
上述代码中，我们定义了一个字符串数组 strArr，其中包含了三个字符串元素。我们使用 Array.from() 方法将 strArr 转换为真正的数组，并使用 Number 函数作为 mapFn 参数，将字符串转换为数字。最终，我们得到了一个数字数组 numArr。
使用 thisArg 参数指定 mapFn 函数中的 this 值
在使用 mapFn 参数对数组元素进行处理或映射时，我们还可以使用 thisArg 参数指定 mapFn 函数中的 this 值。下面是一个将字符串数组转换为大写字母数组的例子：
const strArr = ['a', 'b', 'c'];
const upperCaseArr = Array.from(strArr, function (s) {
return s.toUpperCase();
}, String.prototype);
console.log(upperCaseArr); // ['A', 'B', 'C']上述代码中，我们定义了一个字符串数组 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