Array.from()用途

语法： Array.from(arrayLike[, mapFunction[, thisArg]])

• arrayLike：必传参数，想要转换成数组的伪数组对象或可迭代对象。
• mapFunction：可选参数，mapFunction(item，index){...} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。(是一个不会跳过空值的map函数)
• thisArg：可选参数，执行回调函数 mapFunction 时 this 对象。这个参数很少使用。

Array.from() 第一个用途：将类数组对象转换成数组

通常，你会碰到的类数组对象有：函数中的 arguments 关键字，或者是一个 DOM 集合。Array.from() 可以将类数组对象转换成一个真正的数组

第二个用途：克隆数组

在 JavaScript 中有很多克隆数组的方法。正如你所想，Array.from() 可以很容易的实现数组的浅拷贝

const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);

numbers === numbersCopy; // => false

甚至可以实现深拷贝

function recursiveClone(val) {
  return Array.isArray(val) ? Array.from(val, recursiveClone) : val;
}

第三个用途：填充数组

下文用到的{length}其实是{length：length}，length定义成为了一个数值，所以{length}其实是一个伪数组

//填充普通值
const length = 3;
const init   = 0;
const result = Array.from({ length }, () => init);
console.log(result)  [0, 0, 0]
//替代方法
Array(3).fill(0)

//填充对象
const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});

resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]

resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true
//由 Array.from 返回的 resultA 使用不同空对象实例进行初始化。
//之所以发生这种情况是因为每次调用时，mapFunction，即此处的 () => ({}) 都会返回一个新的对象。
//然后，fill() 方法创建的 resultB 使用相同的空对象实例进行初始化。

第四个用途：生成数字范围数组

function range(end) {
    return Array.from({ length: end }, (item, index) => index);
}
range(5) //[0, 1, 2, 3, 4]