JavaScript中array.from()

Array.from() 方法在 JavaScript 中用于从一个类似数组或可迭代对象（包括 Set 和 Map，以及字符串、arguments 对象等）中创建一个新的、浅拷贝的数组实例。这个方法的主要用途是将类数组对象（拥有一个 length 属性和若干索引属性的任何对象）或可迭代对象转换为真正的数组。

语法

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

• arrayLike：想要转换成数组的伪数组对象或可迭代对象。
• mapFn（可选）：如果指定了该参数，新数组中的每个元素都会执行该回调函数。
• thisArg（可选）：执行回调函数 mapFn 时 this 的值。

示例

1. 将类数组对象转换为数组

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };  
  
// ES5的写法  
var arr1 = [].slice.call(arrayLike);  
  
// ES6的写法  
let arr2 = Array.from(arrayLike);  
  
console.log(arr2); // ['a', 'b', 'c']

2. 将字符串转换为数组

let str = 'hello';  
let arr = Array.from(str);  
  
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

3. 使用映射函数

let numbers = Array.from({length: 5}, (_, i) => i + 1);  
  
console.log(numbers); // [1, 2, 3, 4, 5]  
  
// 第二个参数是映射函数  
let doubled = Array.from([1, 2, 3], x => x * 2);  
  
console.log(doubled); // [2, 4, 6]

注意事项

• Array.from() 方法不会改变原对象。
• 如果 arrayLike 没有 length 属性，或者其值不是非负整数，则返回一个空数组。
• 映射函数 mapFn 接收三个参数：当前值（currentValue）、当前索引（index）、原数组（array），但在从非数组类对象（如字符串或 Set）转换时，第三个参数 array 实际上是 undefined，因为原对象不是一个数组。