实例分析Array.from(arr)与[…arr]到底有何不同

题目中提到的Array.from(arr)和[...arr]都可以将一个类数组对象或可迭代对象转换为一个真正的数组。但是，二者使用方法上却有些微小的差别。下面我将为大家做进一步的解释。

1. Array.from(arr)

1.1 Array.from(arr) 是一个方法

Array.from(arr)可以看成是一个静态方法，也就是说此方法属于Array对象上而不是Array实例上的方法，所以需要通过Array引用来调用。

1.2 可以包含第二个参数

Array.from除了第一个必传参数外，还接收一个可选参数mapFn，其作用是对这个新数组的每个元素进行处理。以下是一个例子：

const arr = [1, 2, 3]

function double(n) {
 return n * 2
}

const newArr = Array.from(arr, double)
console.log(newArr)    // [2, 4, 6]

1.3 转换不可迭代对象

另一个非常强大的用途是将一个不可迭代的对象（具有数字键的对象、字符串，甚至是Set、Map等）转换成一个数组。

以字符串举例：

const str = '123'

console.log(Array.from(str))          // ['1', '2', '3']
console.log(Array.from(str, Number))  // [1, 2, 3]

第二个参数在这里充当了一个转换器，将原本字符串类型的 123 转换为数字类型[1,2,3]。

2. [...arr]

2.1 [...arr] 是一种语法

[...arr]是ES6中增加的展开运算符语法，可以将一个可迭代的对象展开为一个由该对象的所有元素组成的数组。

2.2 仅限于可迭代对象

展开运算符语法只适用于可迭代对象，包括具有Symbol.iterator方法的任何对象、字符串、类数组和类似数组的对象（如 arguments 对象）。

以下是一个例子：

const str = 'Hello'
const obj = {a: 1, b: 2}
function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

console.log([...str])                // ['H', 'e', 'l', 'l', 'o']
console.log([...Object.keys(obj)])   // ['a', 'b']
console.log([...generator()])        // [1, 2, 3]

3. Array.from(arr) 与 [...arr] 的区别

• Array.from(arr)作为方法，实际上是出现在函数名的位置，意味着参数不一定是数组或可迭代对象，并且可以在第二个参数中自定义转换、映射或基本操作。比如可以很容易地扩展出一个从map或set对象取出数据的方法。而 [...arr] 则仅适用于将一个可迭代对象展开成一个数组。

• Array.from(arr) 提供了一种将字符串转换为数组的方法，特别方便，可以对每个字符进行转换。而 [...arr] 则会直接将字符串拆分成一个个字符，而不会继承字符串的原型方法，例如 toUpperCase(), substr()等，因为展开运算符其实仅仅复制了字符串字符的数组。

综上，Array.from(arr)和[...arr]的用途和实现方式都有所不同，并且适用于不同的场景。开发者需要根据实际项目需求来灵活地选择。