Array.from() 是 JavaScript 中的一个静态方法,用于从一个类似数组或可迭代对象(如 Set, Map 的迭代器,或者字符串、类数组对象等)创建一个新的、浅拷贝的数组实例。
语法
Array.from(arrayLike, [mapFunction, [thisArg]])
- arrayLike:一个类数组对象或可迭代对象。
- mapFunction(可选):一个映射函数,如果提供了这个参数,新数组中的每个元素都会通过该函数处理后再返回。
- thisArg(可选):执行- mapFunction时- this所指向的对象。
示例
1. 从类数组对象创建数组
let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
let arr = Array.from(arrayLike);
console.log(arr); // 输出: ['a', 'b', 'c']
2. 从字符串创建数组
let str = 'hello';
let arr = Array.from(str);
console.log(arr); // 输出: ['h', 'e', 'l', 'l', 'o']
3. 从 Set 创建数组
 
let set = new Set(['a', 'b', 'c', 'a']);
let arr = Array.from(set);
console.log(arr); // 输出: ['a', 'b', 'c'],注意 Set 中重复的 'a' 被去除了
4. 使用 mapFunction
 
let numbers = {length: 2, 0: 1, 1: 2};
let arr = Array.from(numbers, function(v, i) {return v * i;
});
console.log(arr); // 输出: [0, 2],因为 1*0 = 0, 2*1 = 2// 使用箭头函数
let arr2 = Array.from(numbers, (v, i) => v * i);
console.log(arr2); // 输出: [0, 2]
5. 使用 thisArg
 
let obj = {value: 10,double: function(v) {return v * this.value;}
};let arr = Array.from([1, 2, 3], obj.double, obj);
console.log(arr); // 输出: [10, 20, 30],因为 1*10 = 10, 2*10 = 20, 3*10 = 30
注意事项
- Array.from()不会改变原数组或原对象。
- 对于字符串、Set 和 Map 的迭代器等可迭代对象,Array.from()方法只会复制可迭代对象的元素到新的数组中,而不会复制额外的属性。
- 如果 arrayLike没有length属性,或者length属性不是非负整数,那么Array.from()将返回一个空数组。
- 如果 arrayLike是数组或类数组对象,则Array.from()会返回一个浅拷贝的数组。这意味着如果原数组的元素是对象或数组,那么新数组中的对应元素将是这些对象或数组的引用,而不是它们的拷贝。