3.01 ...的应用

在 JavaScript 和 TypeScript 中，... 操作符有两种主要用途：扩展（Spread）和剩余（Rest）操作。对于对象和数组，... 操作符的用法和规则有些不同。以下是详细说明 展开（Spread） 操作符在不同上下文中的用法，以及 console.log(...obj) 为什么会报错的问题和解决方案。

1. 展开（Spread）操作符

对象展开

对象展开操作符用来将一个对象展开为其中的各个属性，通常用于对象合并或对象克隆。

示例：

const obj = { name: 'Alice', age: 18 };
 
// 对象合并
const newObj = { ...obj, location: 'Wonderland' };
console.log(newObj); // 输出: { name: 'Alice', age: 18, location: 'Wonderland' }
 
// 对象克隆
const objClone = { ...obj };
console.log(objClone); // 输出: { name: 'Alice', age: 18 }

数组展开

数组展开操作符用来将一个数组展开为其中的各个元素，通常用于数组合并或函数调用参数的传递。

示例：

const arr = [1, 2, 3];
 
// 数组合并
const newArr = [...arr, 4, 5];
console.log(newArr); // 输出: [1, 2, 3, 4, 5]
 
// 函数调用参数传递
Math.max(...arr); // 等同于 Math.max(1, 2, 3)

2. 剩余（Rest）操作符

剩余操作符用于将多个参数收集到一个数组中，通常用于函数参数或解构赋值。

示例：

// 函数参数
function sum(...numbers: number[]) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // 输出: 6
 
// 解构赋值
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 输出: 1
console.log(rest);  // 输出: [2, 3, 4]

为什么 console.log(...obj) 会报错

在 console.log(...obj) 中尝试使用 ...obj 展开对象会导致报错原因是因为 console.log 函数期望的是一组参数，但 ...obj 试图将对象属性展开成参数，这在语义上是错误的。

const obj = { name: 'Alice', age: 18 };
 
console.log(...obj); // Error: obj is not iterable

对象在 JavaScript 中并不是可迭代的（iterable），而数组和类数组对象（如函数参数对象、NodeList）是可迭代的。因此，尝试展开一个对象会导致 TypeError。

如何正确使用 ... 操作符

如果你想要在 console.log 中输出对象的每一项，可以使用对象的值将其转化为数组来进行迭代。

示例：

将对象转换为数组

const obj = { name: 'Alice', age: 18 };
 
// 通过 Object.values 转换成数组
console.log(...Object.values(obj)); // 输出: Alice 18

Object.values(obj) 将对象的值转换成数组，然后使用展开操作符传递给 console.log。类似的，你也可以使用 Object.entries 或 Object.keys 进行不同的处理：

通过 Object. Entries 转换成数组

const obj = { name: 'Alice', age: 18 };
 
const entries = Object.entries(obj);
entries.forEach(([key, value]) => console.log(key, value));
// 输出:
// name Alice
// age 18

通过 Object. Keys 转换成数组

const obj = { name: 'Alice', age: 18 };
 
const keys = Object.keys(obj);
keys.forEach(key => console.log(key, obj[key]));
// 输出:
// name Alice
// age 18

Total 优雅方式输出对象每一项

如果希望在 console.log 中优雅地输出对象的每一个键值对，可使用模板字符串（Template Strings）：

const obj = { name: 'Alice', age: 18 };
 
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 18

总结

1. ... 操作符用于对象和数组的展开（Spread）和剩余（Rest）操作。
2. 对象展开 用于对象合并和克隆。
3. 数组展开 在数组合并和函数参数传递中非常有用。
4. 由于对象不可迭代，console.log(...obj) 会报错，可以使用 Object.values、Object.entries 和 Object.keys 将对象属性转换为数组来进行正确的展开。

希望这些示例和解释能帮助你更好地理解并正确运用 TypeScript 中的 ... 操作符。