当前位置：首页 > news >正文

2.4 TypeScript 中的展开运算符

news 来源：原创 2025/6/4 4:49:51

在 TypeScript 中，展开运算符（...）是一个非常强大的语法工具。它可以将数组或对象的元素展开（spread）到另一个数组或对象中，从而实现快速复制、合并或修改数据结构。无论是处理数组、对象还是组合数据，扩展运算符都能让你的代码更加简洁和易读。

基本语法

...操作对象

示例一：创建数组的浅拷贝

使用扩展运算符，我们可以快速创建一个数组的浅层副本。

let oldArray: number[] = [1, 2, 3];
let newArray: number[] = [...oldArray];
console.log(newArray);

输出：

[1, 2, 3]

这是最简单、直观的用法之一，尤其在你不想修改原始数组时非常有用。

示例二：合并两个数组

扩展运算符也可以将多个数组合并成一个新数组，非常适合用于数据聚合处理。

let array1: number[] = [1, 2];
let array2: number[] = [3, 4];
let mergedArray: number[] = [...array1, ...array2];console.log(mergedArray);

输出：

[1, 2, 3, 4]

相比传统的 .concat() 方法，扩展运算符更加直观。

示例三：创建对象的浅拷贝

不仅仅是数组，对象也可以使用扩展运算符进行浅拷贝。

type objType = {name: string, age: number
}let oldObject: objType = { name: 'Author', age: 25 };
let newObject: objType = { ...oldObject };console.log(newObject);

输出：

{name: 'Author', age: 25
}

这种方式通常用于复制状态（如 React 的 state）或防止原始对象被直接修改。

示例四：修改对象的某个属性

我们还可以通过扩展运算符，在复制对象的同时修改其某个属性值。

type objType = {name: string, age: number
}let initialObject: objType = { name: 'Author', age: 23 };
let modifiedObject: objType = { ...initialObject, age: 24 };console.log(modifiedObject);

输出：