Array.from()的5种用途

介绍Array.from()

Array.from() 可以将类数组或具有Iterator接口的对象转成数组。接收三个参数，第一个必选参数是arrayLikeOrIterable对象，第二个可选参数类似于数组map方法的回调，第三个可选参数是用来指定回调函数的this（前提是普通函数），很少用到。

Array.from(arrayLikeOrIterable[, mapFunction[, thisArg]])

Examples

const arr = { '0': 10, '1': 15, length: 2 }

Array.from(arr, value => value * 2) //  [20, 30]

1. 类数组转数组

1.1 arguments、NodeList实例、HTMLCollection、具有length属性的对象等

function sumArguments() {
  return Array.from(arguments).reduce((sum, num) => sum + num)
}

sumArguments(1, 2, 3) //  6

1.2 具有Iterator接口的对象

Array.from('Hey')     //  ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])) //  ['one', 'two']

const map = new Map()

map.set('one', 1)
map.set('two', 2)

Array.from(map)    //  [['one', 1], ['two', 2]]

Array.from()和 ...（数组扩展运算）的区别：

...只能将具有Iterator接口的对象转成数组，而Array.from()还可以转类数组，即便是一个具有length属性的对象{length: 3}。

2. clone数组

2.1 浅拷贝数组

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

numbers === numbersCopy  // false

2.2 clone多维数组

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

const numbers = [[0, 1, 2], ['one', 'two', 'three']]
const numbersClone = recursiveClone(numbers)

numbersClone // [[0, 1, 2], ['one', 'two', 'three']]
numbers[0] === numbersClone[0] //  false

3. 填充数组

const length = 3
const init   = 1
const result = Array.from({ length }, () => init) // [ 1, 1, 1]

数组提供了一个fill()方法，当填充的值为复杂类型的值时，和Array.from()的结果是有区别的，具体如下：

3.1 值为基本类型

function fillArray(length, init) {
  return Array(length).fill(init)
}

fillArray(0, 3) //  [0, 0, 0]

3.2 值为复杂类型

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

resultA每一项的{}不同是因为每次调用map都返回一个新对象。
而fill()填充的resultB是用同一个实例{}。

3.3 用map()填充呢？

const length = 3
const init   = 0
const result = Array(length).map(() => init)

result // [undefined, undefined, undefined]

map()方法得出结果仍然是一个具有3个空插槽的数组，而不是预期的具有3个0的数组。

原因是Array（length）创建了一个有3个空槽（也称为稀疏数组）的数组，但是map()在遍历会跳过这些空项（forEach()也是）。

4 生成一个数字范围的数组

比如生成一个数组，项从索引开始到结束。

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

5 数组去重

function unique(array) {
  return Array.from(new Set(array))
}

unique([1, 1, 2, 3, 3]) // [1, 2, 3]

总结

Array.from()可以将类数组和具有Iterator接口的对象转成数组，并且参数二实现了类似数组的map()功能，和数组方法的区别是这个方法不会跳过值为 empty的元素。