TypeScript 里 Spread Operator 的使用场合介绍

本人从 2020 年开始从 ABAP 开发人员转型成 Angular 开发人员，工作中使用的编程语言也从 ABAP 转成了 TypeScript.

TypeScript 里有着许多 ABAP 不具备的语法和关键字，让我耳目一新。Spread Operator 就是其中之一。最近工作中高频使用了这个 Operator，所以花时间对其用法进行了总结：

TypeScript 中的 Spread Operator 详解

在 TypeScript 中，Spread Operator（扩展运算符）是一项强大的特性，它允许你在数组、对象和函数调用中展开（拆分）它们的元素或属性。这项功能在提高代码的可读性、简化语法以及实现更灵活的操作方面都发挥了关键作用。

1. 数组中的 Spread Operator

在数组中，Spread Operator 主要用于将一个数组展开成另一个数组。这在创建新数组、合并数组或传递数组参数时非常有用。让我们看一个简单的例子：

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // 输出 [1, 2, 3, 4, 5, 6]

在这里， [...arr1, 4, 5, 6] 将 arr1 中的所有元素展开，并添加了新的元素，创建了一个新数组 arr2 。

2. 对象中的 Spread Operator

在对象中，Spread Operator 用于将一个对象的属性展开到另一个对象中。这对于创建新对象、复制对象或覆盖属性时非常有帮助。以下是一个示例：

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // 输出 { a: 1, b: 2, c: 3, d: 4 }

这里， { ...obj1, c: 3, d: 4 } 将 obj1 中的所有属性展开，并添加了新的属性，创建了一个新对象 obj2 。

3. 函数调用中的 Spread Operator

在函数调用中，Spread Operator 可以用于传递数组或对象作为参数。这样可以避免手动展开数组或对象，使代码更具可读性。看一个简单的例子：

function exampleFunction(a: number, b: number, c: number) {
  console.log(a + b + c);
const args = [1, 2, 3];
exampleFunction(...args); // 输出 6

这里， exampleFunction(...args) 将数组 args 的元素展开作为函数的参数。

4. 深拷贝与浅拷贝

Spread Operator 在对象中的使用有助于实现浅拷贝和深拷贝。请注意，它仅复制对象的第一层属性。对于嵌套对象，需要使用其他方法来实现深拷贝。

// 浅拷贝
const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = { ...originalObject };
// 深拷贝（需要借助其他方法，如 JSON.parse 和 JSON.stringify）
const deepCopy = JSON.parse(JSON.stringify(originalObject));

5. 与 TypeScript 泛型的结合

Spread Operator 与 TypeScript 的泛型结合使用时，可以创建更灵活的函数。例如，将两个对象合并的通用函数：

function mergeObjects<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
const merged = mergeObjects({ a: 1 }, { b: 2 });
console.log(merged); // 输出 { a: 1, b: 2 }

这里， T & U 表示返回的对象具有 obj1 和 obj2 的所有属性。

6. 应对不确定数量的参数

Spread Operator 还可以用于处理不确定数量的参数，例如在函数中使用 rest 参数：

function sum(...numbers: number[]) {