详解TS对象扩展运算符和rest运算符

什么是对象扩展运算符和rest运算符

对象扩展运算符（也称为Spread运算符）和rest运算符（也称为剩余参数运算符）都是ES6新增的两种运算符。它们可以用于处理对象或数组中的元素，让代码更加简洁易读，常见于函数参数和数组/对象合并操作。

简单来说，对象扩展运算符可以将一个对象展开成多个对象，而rest运算符则可以将多个元素合并为一个数组或对象。

对象扩展运算符的使用

示例1：对象合并

可以使用对象扩展运算符将多个对象合并成一个新对象。

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);  // { a: 1, b: 2, c: 3, d: 4 }

示例2：对象复制

可以使用对象扩展运算符来实现对象的复制，避免浅拷贝和深拷贝带来的问题。

const originalObj = { a: { b: 1 } };
const copyObj = { ...originalObj };

// 修改原始对象，不会影响复制对象
originalObj.a.b = 2;
console.log(copyObj);  // { a: { b: 1 } }

rest运算符的使用

示例1：函数参数

可以使用rest运算符来捕获函数中多余的参数，将其合并成一个数组。

function sum(...nums: number[]) {
  return nums.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

示例2：数组合并

可以使用rest运算符将多个数组合并成一个新的数组。

const arr1 = [1, 2];
const arr2 = [3, 4, 5, 6];
const mergedArr = [...arr1, ...arr2];

console.log(mergedArr);  // [1, 2, 3, 4, 5, 6]

总结

对象扩展运算符和rest运算符可以使代码更加简洁易读，常见于函数参数和数组/对象合并操作。在合理使用的前提下，它们都可以提升代码的可读性和可维护性，并且都被广泛支持，不需要担心兼容性问题。