Array.from用法记录

发表于 更新于 分类于 ， 阅读次数：

记录Array.from的用法，防止遗忘。

参考地址：Array.from() - MDN

Array.from()静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。所谓类似数组的对象，本质特征只有一点，即必须有length属性。

场景：类数组转换成数组

1
2
3
4
5
6
7
8
function fn() {
  return Array.from(arguments);
}
fn(1,2,3); // [1,2,3]

Array.from('Hey'); // ['H', 'e', 'y']

Array.from({ length: 3 }); // [undefined, undefined, undefined]

场景：浅拷贝数组

1
2
3
4
const arr1 = [3, 6, {}];
const arr2 = Array.from(arr1);
arr1 == arr2; // false
arr1[2] === arr2[2]; // true

场景：填充数组

1
2
3
4
5
6
7
8
Array.from({length: 4}, (_, x)=>x); // [0,1,2,3]
let arr3 = Array.from({length:2}, () => ({})); // [{}, {}]
arr3[0] == arr3[1]; // false

let arr4 = Array(2).fill({}); // [{}, {}]
arr4[0] == arr4[1]; // true

let arr5 = Array(2).map((_, x)=>x); // [empty, empty]

Array.fill只能填充固定值，Array.from可以填充动态内容。
Array.map只能遍历非空数组项。