Array.from允许在JavaScript集合（如：数组、类数组、对象、字符串、map、set等可迭代对象）上进行有用的转换

image.png
arrayLike就是Array.from遍历的对象，mapFn就类似map和forEach的回调，参数是一样的

  1. Array.from([1,2,3,4], (item,index) => {
  2.   // 元素和下标
  3.   console.log(item, index)
  4.   return item+1
  5. })

下面写一些Array.from可以做的一些有意思的操作

1、填充数组

基本类型

需求：创建一个数组长度为10，用6填满

  1. // 可以用Array.from
  2. function createArrayByFrom(length, fill) {
  3.   return Array.from({length: length}, () => fill)
  4. }
  6. // 也可以用Array.fill
  7. function createArrayByFill(length, fill) {
  8.   return Array(length).fill(fill)
  9. }

引用类型

需求：创建一个数组长度为3，用空对象填满

  1. const length = 3;
  2. const resultA = Array.from({ length: length }, () => ({}));
  3. const resultB = Array(length).fill({});
  5. resultA; // => [{}, {}, {}]
  6. resultB; // => [{}, {}, {}]
  8. resultA[0] === resultA[1]; // => false
  9. resultB[0] === resultB[1]; // => true

这里我们发现了问题，用fill填充空对象时实际上是一个对象，fill就拿的同一个对象复制下来的。而Array.from则是每次在第二个回调函数里返回一个新的对象。

二维数组

需求：创建一个10*10的二维数组结构，并且内容从1-100递增展示

  1.     let arr =
  2.       Array.from({ length: 10 }, (_, y) =>
  3.         Array.from({ length: 10 },
  4.           (_, x) => x + 1 + y * 10,
  5.         )
  6.       )

参考：https://juejin.cn/post/6844903926823649293#heading-0