极客笔记JavaScript中的Array.from方法详解
简介
在 JavaScript 中，Array.from() 方法用于从类似数组或可迭代对象创建一个新的数组实例。它返回一个新的数组，其中包含从输入对象中提取的元素。该方法也可以接收一个可选的映射函数，允许对每个元素进行转换或处理。
Array.from() 方法有以下两种语法：
Array.from(arrayLike[, mapFn[, thisArg]])
Array.from(arrayLike, mapFn[, thisArg])
其中，
arrayLike参数是一个类似数组或可迭代对象，可以是一个数组、字符串、Set对象、Map对象、arguments对象等等；mapFn参数是一个可选的映射函数，用于对每个元素进行转换或处理；thisArg参数是可选的，指定了mapFn函数中的this值。
使用示例
将字符串转换为数组
请看以下代码示例：
const str = 'Hello, World!';
const arr = Array.from(str);
console.log(arr); // Output: [ 'H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!' ]
在上述示例中，我们使用了 Array.from() 方法将一个字符串转换为一个包含每个字符的数组。该方法会将字符串的每个字符作为一个独立的元素存储在新数组中。
处理类似数组的对象
const obj = {
0: 'Hello',
1: ',',
2: ' ',
3: 'World',
length: 4
};
const arr = Array.from(obj);
console.log(arr); // Output: [ 'Hello', ',', ' ', 'World' ]
在这个示例中，我们创建了一个类似数组的对象 obj，该对象具有一个类似数组的索引和一个 length 属性。通过使用 Array.from() 方法，我们将 obj 转换为一个新的数组，其元素是对象的属性值。注意，只有带有数字键（索引）的属性会被提取到新数组中。
使用映射函数转换元素
Array.from() 方法允许我们传入第二个参数 mapFn，即一个可选的映射函数。该函数用于对提取的每个元素进行转换或处理。
const arr = [1, 2, 3, 4, 5];
const newArray = Array.from(arr, x => x * 2);
console.log(newArray); // Output: [ 2, 4, 6, 8, 10 ]
在这个示例中，我们将数组中的每个元素都乘以2，并将结果存储在一个新的数组中。这是通过将一个箭头函数 (x => x * 2) 作为 mapFn 参数传递给 Array.from() 方法实现的。
如果我们省略 mapFn 参数，Array.from() 方法将直接将输入对象中提取的元素存储在新数组中，而不进行任何转换。
处理可迭代对象
除了处理类似数组的对象和数组之外，Array.from() 方法还可以处理实现了可迭代接口的对象。这包括了许多内置集合对象，如 Set 和 Map。
请看以下示例：
const set = new Set([1, 2, 3]);
const arr = Array.from(set, x => x * 3);
console.log(arr); // Output: [ 3, 6, 9 ]
在这个示例中，我们使用了 Set 对象，该对象实现了可迭代接口，以及 mapFn 参数来将 Set 中的每个元素都乘以 3。最后，我们得到了一个新数组，其中包含了经过转换后的元素。
Polyfill
在老版本的 JavaScript 环境中，可能没有 Array.from() 方法可用。但我们可以使用 polyfill 的方式来模拟实现这个方法。
以下是一个简单的 polyfill 实现：
if (!Array.from) {
Array.from = function(arrayLike, mapFn, thisArg) {
if (typeof arrayLike === 'function' || !arrayLike[Symbol.iterator]) {
throw new TypeError('Array.from requires an iterable object.');
}
const res = [];
const len = arrayLike.length;
for(let i = 0; i < len; i++) {
res.push(mapFn ? mapFn.call(thisArg, arrayLike[i], i) : arrayLike[i]);
}
return res;
};
}
上述 polyfill 实现首先检查了是否已经定义了 Array.from() 方法，如果没有则进行模拟实现。它会抛出一个 TypeError 如果输入对象没有实现可迭代接口（即不具有 Symbol.iterator 属性）。
接下来，该实现创建了一个新的空数组 res 和输入对象的长度 len。然后使用循环将每个元素（经过映射处理，如果有的话）添加到 res 数组中。最后返回这个新的数组。
总结
Array.from() 方法在 JavaScript 中提供了一种方便的方式来将类数组对象、可迭代对象以及其他数据结构转换为数组。通过使用可选的映射函数，我们可以对输入对象中的每个元素进行转换和处理。此外，我们还可以使用 polyfill 来模拟实现这个方法，以便在老版本的 JavaScript 环境中使用。