Javascript中的复制实例是指复制一份与原始实例相同的对象,包括对象的属性、方法以及原型对象等。本文将详细介绍Javascript中实现对象复制的方法和技巧。
Javascript复制实例详解
前言
Javascript中的复制实例是指复制一份与原始实例相同的对象,包括对象的属性、方法以及原型对象等。本文将详细介绍Javascript中实现对象复制的方法和技巧。
浅复制和深复制
在Javascript中,我们经常需要将对象复制一份来进行操作和修改,比如修改原对象的属性值、添加或删除属性,而又不想影响到原对象,则需要使用复制实例。在对象复制中,一般会涉及到浅复制和深复制两种方式。
浅复制是复制出来的新对象与原对象共用一份原型对象,所以修改新对象或原对象中的原型对象都会影响到彼此;而深复制则是完全独立地复制出一份新的对象,之后修改两者互不影响。
使用Object.assign()进行浅复制
在Javascript中,可以使用内置函数Object.assign()来进行浅复制。具体实现方法如下:
let sourceObj = {name: 'Tom', age: 18};
let targetObj = Object.assign({}, sourceObj);
上述代码中的sourceObj是要被复制的原始对象,而targetObj是使用Object.assign()函数复制出来的新对象。需要注意的是,Object.assign()函数的第一个参数是目标对象,也是最终生成的新对象;从第二个参数开始是需要复制的源对象,可以是多个,用逗号隔开。
使用JSON.parse和JSON.stringify进行深复制
在Javascript中,可以使用JSON.parse()和JSON.stringify()配合使用来实现深复制。具体实现方法如下:
let sourceObj = {name: 'Tom', age: 18};
let targetObj = JSON.parse(JSON.stringify(sourceObj));
上述代码中,sourceObj是要被复制的原始对象,而targetObj是使用JSON.parse()和JSON.stringify()函数复制出来的新对象。需要注意的是,此方式仅适用于没有方法和循环引用的对象。
示例说明一:复制一个简单对象
let sourceObj = {name: 'Tom', age: 18};
let targetObj = Object.assign({}, sourceObj);
console.log(targetObj); // {name: 'Tom', age: 18}
上述代码中,我们使用Object.assign()函数复制出了一个与原始对象sourceObj相同的新对象targetObj,输出结果为{name: 'Tom', age: 18}。
示例说明二:复制一个嵌套对象
let sourceObj = {
name: 'Tom',
age: 18,
address: {
province: 'Guangdong',
city: 'Guangzhou'
}
};
let targetObj = JSON.parse(JSON.stringify(sourceObj));
console.log(targetObj); // {name: 'Tom', age: 18, address: {province: 'Guangdong', city: 'Guangzhou'}}
上述代码中,我们使用JSON.parse()和JSON.stringify()函数深复制了一个嵌套对象sourceObj,并将其赋值给targetObj。输出结果为{name: 'Tom', age: 18, address: {province: 'Guangdong', city: 'Guangzhou'}},其中address对象也被完整复制了一份。
结语
本文介绍了Javascript中的复制实例方法和技巧,以及浅复制和深复制的区别与使用场景。希望能对广大读者有所帮助。
本文标题为:Javascript复制实例详解
- Ajax与mysql数据交互制作留言板功能(全) 2023-01-31
- Vuex实现计数器以及列表展示效果 2024-02-19
- js自动生成对象的属性示例代码 2023-12-02
- js实现拖拽效果(构造函数) 2024-02-06
- javascript – 如何通过AJAX将HTML5 sqlite结果集发送到服务器 2023-10-26
- vue如何在父组件中调用子组件的方法 2023-10-08
- js的onload事件及初始化按钮事件示例代码 2023-11-30
- VUE界面设计(Ⅰ)——Login界面 2023-10-08
- vue 手机物理监听键+退出提示代码 2023-12-23
- vue+oss 纯前端文件上传 2023-10-08