在 TypeScript 中克隆对象
在实现某些服务时,克隆对象是一件很常见的事情。克隆
是指创建现有对象的副本,包括其字段。
可能会使用对象克隆的一些用例是在函数中返回对象的副本。
在更改某些属性后更改其某些属性或在 React 的情况下使用 setState
。本文演示了 TypeScript 中不同类型的克隆机制以及如何实现它们。
大致有两种克隆机制——浅拷贝
和深拷贝
。顾名思义,浅拷贝复制对象内的属性和引用嵌套属性。
同时,在深拷贝的情况下,它的所有属性都被复制,复制或克隆对象的任何变化都不会影响原始对象。下面的代码段将讨论浅拷贝和深拷贝是如何工作的。
let a : number = 5;
let b = a;
b = 6;
//does not hold reference to previous original variable and thus is deep copied
console.log(b);
console.log(a);
type Person = {
name : string;
age : number;
}
var person : Person = {
name : 'Geralt',
age : 95
}
// shallow copy
var personCopy : Person = person;
personCopy.age = 90;
console.log(personCopy.age)
console.log(person.age)
输出结果:
6
5
90
90
因此,隐式只为对象分配浅表副本,因为复制对象中的任何更改都会影响从中复制它的原始对象。
spread
运算符是 JavaScript ES6 版本中可用功能的新增功能,可以有效地复制对象。考虑前面代码段中的示例。
type Person = {
name : string;
age : number;
}
var person : Person = {
name : 'Geralt',
age : 95
}
var personCopy : Person = { ...person};
personCopy.age = 90;
console.log(personCopy.age)
console.log(person.age)
输出结果:
90
95
因此,spread
运算符可以制作对象的深层副本。但是,在嵌套
对象的情况下它会失败。
Object.assign()
的工作方式与扩展运算符的情况类似,可用于克隆简单对象,但在嵌套对象的情况下会失败。
var personCopy : Person = Object.assign({}, person);
必须递归复制每个元素以复制嵌套
对象。对于数组,扩展运算符适用于原始数据类型。
但是,必须为对象数组单独复制每个元素。我们可以设计一个函数来实现这一点;
function deepCopy<T>(instance : T) : T {
if ( instance == null){
return instance;
}
// handle Dates
if (instance instanceof Date) {
return new Date(instance.getTime()) as any;
}
// handle Array types
if (instance instanceof Array){
var cloneArr = [] as any[];
(instance as any[]).forEach((value) => {cloneArr.push(value)});
// for nested objects
return cloneArr.map((value: any) => deepCopy<any>(value)) as any;
}
// handle objects
if (instance instanceof Object) {
var copyInstance = { ...(instance as { [key: string]: any }
) } as { [key: string]: any };
for (var attr in instance) {
if ( (instance as Object).hasOwnProperty(attr))
copyInstance[attr] = deepCopy<any>(instance[attr]);
}
return copyInstance as T;
}
// handling primitive data types
return instance;
}
type info = {
gender : 'male' | 'female';
}
type Person = {
name : string;
age : number;
info : info;
}
var person : Person = {
name : 'Geralt',
age : 95,
info : {
gender : "male"
}
}
var personCopy : Person = deepCopy<Person>(person);
console.log(personCopy);
personCopy.info.gender = "female";
console.log(person.info.gender);
console.log(personCopy,info.gender);
输出结果:
male
female
因此,成功的深层复制是为嵌套
对象完成的。
可以使用自定义函数复制类,并在该函数中创建一个新实例。这使作者可以完全控制复制功能。
class Witcher{
name : string;
age : number;
constructor() {
this.name = "Geralt"
this.age = 43;
}
greet(){
return "Hi I am witcher known as " + this.name
}
copy(){
var witcherIns = new Witcher();
witcherIns.name = this.name;
witcherIns.age = this.age;
return witcherIns;
}
}
var witcherObj = new Witcher();
var witcherObjCopy = witcherObj.copy();
console.log(witcherObjCopy);
console.log(witcherObjCopy.greet());
输出结果:
Witcher: {
"name": "Geralt",
"age": 43
}
"Hi I am witcher known as Geralt"
相关文章
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:181 分类:TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:97 分类:TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间:2023/03/19 浏览次数:172 分类:TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:161 分类:TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间:2023/03/19 浏览次数:182 分类:TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:221 分类:TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间:2023/03/19 浏览次数:110 分类:TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。
使用 NPM 将 TypeScript 更新到最新版本
发布时间:2023/03/19 浏览次数:130 分类:TypeScript
-
本教程说明了如何使用 npm 更新到最新版本的 TypeScript。这将为如何使用 npm 将 TypeScript 更新到最新版本提供完整的实际示例。
使用 jQuery 和 TypeScript
发布时间:2023/03/19 浏览次数:151 分类:TypeScript
-
本教程提供了使用 jQuery 和 TypeScript 的基本理解和概念。