复制js对象方法(详解)

复制JS对象是很常见的操作,但是需要注意的是,在JS中,对象是引用类型,因此直接复制对象会导致对象引用被复制,而不是对象本身。这里介绍几种复制JS对象的方法,包括深拷贝和浅拷贝。

浅拷贝

浅拷贝可以简单地理解为将对象的属性复制一份到新的对象中,但是属性值为对象的属性仍然是引用关系。

表达式“{...obj}”

ES6中引入了表达式“{...obj}”,可以用于浅拷贝对象。具体方法如下:

const obj = {a: 1, b: {c: 2}};
const newObj = {...obj};
obj.b.c = 3;
console.log(newObj.b.c); // 输出3

示例中,首先创建了一个对象obj,其中包含属性a和一个嵌套的对象b。然后使用表达式“{...obj}”对对象进行浅拷贝,将其复制到新的对象newObj中。最后,修改obj.b.c的值为3,并打印newObj.b.c的值,发现其也变为了3。这是因为在浅拷贝中,属性b的值仍然是原对象中对象b的引用,因此修改原对象中对象b的属性值,会同时影响新对象的属性值。

Object.assign方法

除了使用表达式“{...obj}”进行浅拷贝,还可以使用Object.assign方法进行拷贝。具体方法如下:

const obj = {a: 1, b: {c: 2}};
const newObj = Object.assign({}, obj);
obj.b.c = 3;
console.log(newObj.b.c); // 输出3

示例中,首先创建对象obj,并将其浅拷贝到newObj中,然后修改obj.b.c的值为3,并输出newObj.b.c,发现其也变为了3。由于Object.assign只拷贝对象自身的属性,而不拷贝原型链上的属性和方法,因此可以确保拷贝出的属性是新的对象的自有属性。

深拷贝

深拷贝可以理解为将对象本身以及其属性的值都复制到新的对象中。由于对象的属性可能是对象或数组等引用类型,因此需要使用递归的方式复制对象属性。

JSON.parse(JSON.stringify(obj))

在JS中可以使用JSON.parse(JSON.stringify(obj))进行深拷贝。具体方法如下:

const obj = {a: 1, b: {c: 2}};
const newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 3;
console.log(newObj.b.c); // 输出2

示例中,首先创建对象obj,并使用JSON.parse(JSON.stringify(obj))进行深拷贝,拷贝结果保存在newObj中。然后修改obj.b.c的值为3,并输出newObj.b.c,发现其仍然是2。这是因为采用JSON.parse(JSON.stringify())进行深拷贝时,会先将对象序列化成JSON格式的字符串,然后再将其解析成新的对象。由于字符串是值类型,因此在解析时会创建新的对象,从而实现了深拷贝。

需要注意的是,采用JSON.parse(JSON.stringify())深拷贝对象时,不能拷贝函数和undefined值。

Lodash's cloneDeep方法

除了JSON.parse(JSON.stringify()),还可以使用Lodash库提供的cloneDeep方法进行深拷贝。具体方法如下:

const _ = require('lodash');
const obj = {a: 1, b: {c: 2}};
const newObj = _.cloneDeep(obj);
obj.b.c = 3;
console.log(newObj.b.c); // 输出2

示例中,首先使用require导入Lodash库,并使用_.cloneDeep()方法进行深拷贝。然后修改原对象obj的属性值,并输出newObj.b.c,发现其仍然是2。lodash的cloneDeep方法可以拷贝对象的所有属性,包括函数和undefined值。

综上所述,深拷贝是将对象及其属性的值都复制到新对象中,而浅拷贝只是复制对象的属性。深拷贝相对比较费时和麻烦,建议仅在必要时使用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:复制js对象方法(详解) - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Actionscript与javascript交互实例程序(修改)

    针对“Actionscript与javascript交互实例程序(修改)”这一文章,我将分为以下几个部分进行详细讲解: 文章介绍 修改内容说明 ActionScript与JavaScript交互示例 综合示例程序 总结 1. 文章介绍 该篇文章主要介绍了ActionScript与JavaScript相互交互的实现方式,通过ExternalInterface类…

    JavaScript 2023年5月27日
    00
  • 微信小程序wx.request的简单封装

    我可以为您提供“微信小程序wx.request的简单封装”的完整攻略。请注意,由于涉及到代码以及markdown格式,我将使用代码块展示相关示例。 1. 简介 在微信小程序中,通过 wx.request 可以发送网络请求。但使用 wx.request 还需要处理错误、重试等问题。因此,封装 wx.request 可以更方便地处理网络请求相关的问题。 2. 封…

    JavaScript 2023年5月27日
    00
  • js实现获取当前时间是本月第几周的方法

    获取当前日期是本月第几周可以使用JavaScript中Date对象中的一些方法来实现。下面是具体的实现方法以及示例说明: 获取当前时间 在JavaScript中通过创建一个Date对象来获取当前的时间,可以使用new关键字和Date构造函数来创建一个Date对象: const now = new Date(); 获取当前时间的月份以及日期 获取当前时间所在的…

    JavaScript 2023年5月27日
    00
  • vue3.0中使用element UI表单遍历校验问题解决

    下面是详细讲解“vue3.0中使用element UI表单遍历校验问题解决”的完整攻略: 问题描述 在Vue3.0中使用Element UI的表单组件,当需要对表单进行校验时,遍历组件子孙元素时会出现一些问题。例如,遍历组件子孙元素时,如果组件还未被挂载,那么组件的校验信息无法正常获取。这会造成一些校验问题,导致表单不能正常提交。本文将提供一个解决方法,以便…

    JavaScript 2023年6月10日
    00
  • JavaScript递归函数定义与用法实例分析

    JavaScript递归函数定义与用法实例分析 什么是递归函数 递归函数是指在函数的定义中调用函数自身的情况,通常用来解决需要重复执行某个任务的问题。 递归函数的定义 递归函数的定义遵循如下模式: function functionName(parameters){ // 基线条件(停止条件): if (parameters == Stop){ return…

    JavaScript 2023年6月11日
    00
  • 用正则获取指定路径文件的名称

    获取指定路径下文件的名称通常会用到正则表达式,下面是获取指定路径下某类文件名的完整攻略: 步骤一:指定路径 在使用正则表达式之前,需要指定要查找的文件所在的路径。可以使用Python内置的os库函数,比如os.getcwd()获取当前路径,或者os.chdir()改变当前目录路径。 示例代码: # 获取当前路径 import os path = os.get…

    JavaScript 2023年6月10日
    00
  • 获取焦点时,利用js定时器设定时间执行动作

    获取焦点时,利用js定时器设定时间执行动作的具体步骤如下: 1. 绑定获取焦点事件 首先,需要在html中为需要获取焦点的元素添加获取焦点事件。可以使用onfocus属性或者addEventListener方法添加事件监听器。 例如,我们可以为一个input元素添加获取焦点事件监听器,代码如下: <input type="text"…

    JavaScript 2023年6月11日
    00
  • 如何去除js中的json存在的转义字符\问题

    我们来讲解一下如何去除 JavaScript 中 JSON 存在的转义字符 ‘\’ 问题的完整攻略。 问题描述 在 JavaScript 中,JSON 对象的属性值中可能会存在转义字符,如 “\n” 表示换行、”\t” 表示水平制表符等。这会影响到我们对 JSON 数据的解析和使用,因此需要将其转义字符进行去除,将其还原成可读的字符串。 解决方案 我们可以利…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部