js对象深拷贝汇总

news/2024/7/19 15:22:54 标签: javascript, 前端, js, 开发语言, ecmascript

1.for 循环实现对象的深拷贝

javascript">function copyObj(obj) {
   let res = {}
   for (var key in obj) {
       res[key] = obj[key]
   }
   return res
}
var obj = {
   name: 'renqingyue',
   sex: 'man',
   old: '18'
}
var obj2 = copyObj(obj)
obj.name = 'renyue'
console.log(obj,obj2)
//输出为 {name: "renyue", sex: "man", old: "18"} {name: "renqingyue", sex: "man", old: "18"}

同样的,只能深度拷贝对象的第一层,如果对象中的属性也是对象的话,没有办法进行深度拷贝的。嵌套的引用类型,还是会出现引用赋值的现象。

2.ES6扩展扩展运算符实现对象的深拷贝

javascript">var obj = {
name: 'renqingyue',
sex: 'man',
old: '18'
}
var {...obj2} = obj
obj.name = 'renyue'
console.log(obj,obj2)
//输出为 {name: "renyue", sex: "man", old: "18"} {name: "renqingyue", sex: "man", old: "18"}

只能深度拷贝对象的第一层,如果对象中的属性也是对象的话,没有办法进行深度拷贝的。

3.Object.assign() 对象的合并

利用Object.assign(), 第一个参数必须是空对象**

javascript">var obj = {name:'123',age:13};
var obj2 = Object.assign({},obj1);

只能深度拷贝对象的第一层,如果对象中的属性也是对象的话,没有办法进行深度拷贝的。

4.利用循环和递归的方式

javascript">function deepClone(obj, newObj) {
    var newObj = newObj || {};
    for (let key in obj) {
        if (typeof obj[key] == 'object') {
            newObj[key] = (obj[key].constructor === Array) ? [] : {}
            deepClone(obj[key], newObj[key]);
        } else {
            newObj[key] = obj[key]
        }
    }
    return newObj;
}

在循环递归中需要注意设置临界值(typeof obj[key] == ‘object’),否则会造成死循环。
循环递归可以处理对象中嵌套数组或对象的问题。

json_61">5.转换成json再转换成对象实现对象的深拷贝

javascript">var obj = {name:'123'}
var obj2 = JSON.parse(JSON.stringify(obj))

这种简单粗暴的方式有局限性,当值为undefined、function、symbol会在转换过程中被忽略。

6.第三方库

js_69">6.1使用immutable.js

immutable.js简介
适用于深拷贝较多的项目

6.2使用lodash

使用_.cloneDeep(value)函数,它会递归拷贝value(深拷贝)

javascript">var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects); // 返回拷贝后的值
console.log(deep[0] === objects[0]);
// => false

http://www.niftyadmin.cn/n/5140774.html

相关文章

【MySQL数据库】 二

本文主要介绍了数据库操作的操作流程 , 以及数据库和数据表的基本操作 . 一.数据库操作工作流程 1.用户在客户端输入SQL 2.客户端把SQL通过网络发送给服务器 3.服务器会执行这个SQL,把结果返回给客户端 4.客户端收到结果显示到界面上 二.数据库的操作 1.创建数…

组件与Props:React中构建可复用UI的基石

目录 组件:构建现代UI的基本单位 Props:组件之间的数据传递 Props的灵活性:构建可配置的组件 组件间的通信:通过回调函数传递数据 总结: 组件:构建现代UI的基本单位 组件是前端开发中的关键概念之一。…

5.1 实体完整性

思维导图: 前言 第5章 数据库完整性笔记 定义: 完整性:确保数据的正确性和相容性。 正确性:数据与现实世界语义相符、反映实际状况。相容性:同一对象在数据库的不同关系表中数据逻辑上是一致的。 示例: 学…

半导体精密划片机在行业中适合切割哪些材料?

在高端精密切割划片领域中,半导体材料需要根据其特性和用途进行选择。划片机适用于多种材料,包括硅片、石英、氧化铝、氧化铁、砷化镓、铌酸锂、蓝宝石和玻璃等。这些材料在半导体行业被广泛使用,包括在集成电路、半导体芯片、QFN、发光二极管…

uniapp/H5富文本复制文本功能

代码实现: copy() {let replacedContent this.form.resTaskBaseInfoDetail.content;let text readHtml(replacedContent)// #ifdef H5let textarea document.createElement("textarea")textarea.value texttextarea.readOnly "readOnly"d…

Spring系列之基础

目录 Spring概述 Spring的优点 Spring Framework的组成 总结 Spring概述 Spring 是目前主流的 Java Web 开发框架,是 Java 世界最为成功的框架。该框架是一个轻量级的开源框架,具有很高的凝聚力和吸引力。它以Ioc(控制反转)和…

网管的利器之NMap

在进行网络管理过程中,网管会借助很多的工具比如付费的一些产品,比如漏洞扫描、安全隐患发现、网络设备管理、上网行为管理等。 更多的情况下,网管员使用一些DOS命令或者免费的工具进行,比如前面介绍过的PingInfoView.exe、WinMTR…

剑指offer(C++)-JZ5:替换空格(算法-其他)

作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 题目描述: 请实现一个函数,将一个字符串s中的每个空格替换成“%20”。 例如,当字符串为We A…