通过实例主要给大家分析介绍了关于Array.from(arr)与[...arr]到底有何不同的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
在JavaScript中，`Array.from()` 和扩展运算符 `[...arr]` 都是将类数组对象转换成真正的数组。然而，它们之间存在一些差异和使用场景的区别。让我们深入探讨这两个方法。
类数组对象是一种拥有索引和长度，但不具备数组特性（如 `push`, `pop` 等）的对象。它们通常是函数的 `arguments` 对象或具有类似数组结构的对象。类数组对象必须有可迭代性，即具有 `[Symbol.iterator]` 属性，以便能够被转换成数组。
`Array.from()` 是一个全局函数，它接受一个类数组对象或可迭代对象，并返回一个新的数组实例。这个方法的一个关键优点是它允许传递第二个参数，作为映射函数，对转换后的数组元素进行处理。例如：
```javascript
let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
let mappedArray = Array.from(arrayLike, (item) => item.toUpperCase());
console.log(mappedArray); // 输出：['A', 'B', 'C']
```
而扩展运算符 `[...arr]` 也常用于将类数组对象转换成数组，它利用了ES6引入的迭代器协议。当你使用 `[...obj]` 时，实际上是调用了 `obj` 的迭代器并收集所有返回的值。它不支持像 `Array.from()` 那样的映射函数，但可以与其他数组操作结合使用，比如拼接或过滤：
```javascript
let arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
let newArray = [...arrayLike, 'd', 'e'];
console.log(newArray); // 输出：['a', 'b', 'c', 'd', 'e']
```
在类数组对象没有内置迭代器的情况下，你需要手动定义 `[Symbol.iterator]` 方法。这通常涉及编写一个返回 `{value, done}` 对象的迭代器函数。例如：
```javascript
let obj = {0: 'Gu', 1: 'Yan', 2: 'No.1', length: 3};
obj[Symbol.iterator] = function* () {
let index = 0;
while(index !== this.length) {
yield this[index++];
}
};
console.log([...obj]); // 输出：['Gu', 'Yan', 'No.1']
```
生成器（generator）是ES6引入的一种特殊函数，它们可以返回一个迭代器。生成器函数使用 `function*` 关键字定义，并通过 `yield` 表达式控制流程。生成器简化了创建自定义迭代器的过程，如上述例子所示。你可以用生成器为类数组对象提供迭代器功能，使得扩展运算符或 `Array.from()` 能正常工作。
总结来说，`Array.from()` 和 `[...arr]` 在转换类数组对象时非常相似，但 `Array.from()` 提供了更多的灵活性，如映射功能。而扩展运算符更简洁，适合简单的转换操作。了解这些差异有助于你根据实际需求选择合适的方法。
