js中深拷贝的方法

原生js中递归函数拷贝

将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据 ,两个对象或数组不共享一块内存

  <script>let obj={abc:'123',def:[{a:1,b:2,c:3},{q:8,w:9}],qwe:{e:4,f:5}}//需求将obj这个对象拷贝出一个新对象修改新对象的值不会影响原对象的值//定义一个函数function copyobj(oldobj){//定义一个变量接收新对象let newObj=null//判断这个对象还是数组//1.如果是数组 if(oldobj instanceof Array){newObj=[]oldobj.forEach(item => {newObj = copyobj(item)}); //2.如果是对象}else if(oldobj instanceof Object){newObj={}for(var i in oldobj){newObj[i]=copyobj(oldobj[i])}}else {newObj=oldobj}return newObj}let news=copyobj(obj)console.log(news);</script>

Object.create()

Object.create() 实现的是深拷贝通过原型链的方式

new Object() 实现的浅拷贝修改原数据新拷贝的数据也会随之改变

<script>let a1={abc:'123',def:[{a:1,b:2,c:3},{q:8,w:9}],qwe:{e:4,f:5}}
//new Object() 实现的浅拷贝修改原数据新拷贝的数据也会随之改变let b1=new Object(a1)console.log(b1); //{abc:'123',def:[{a:1,b:2,c:3}{q:8,w:9}],qwe:{e:4,f:5}}b1.abc="qqqq"console.log(a1,b1);
//a1对应的值{abc:'qqqq',def:[{a:1,b:2,c:3}{q:8,w:9}],qwe:{e:4,f:5}}
//b1对应的值{abc:'qqqq',def:[{a:1,b:2,c:3}{q:8,w:9}],qwe:{e:4,f:5}}//Object.create() 实现的是深拷贝通过原型链的方式var a = { rep: 'apple' }var b = Object.create(a)console.log(b); //{ rep: 'apple' }b.rep='www'console.log(a,b);// { rep: 'apple' }，{ rep: 'www' }
</script>

jQuery 中$.extend

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

$.extend( [deep ], target, object1 [, objectN ] )

deep 可选，Boolean类型指示是否深度合并对象，默认为false。如果该值为true

target Object类型目标对象

object1 可选。 Object类型第一个被合并的对象。

var obj = {};
var object = { name: 'Bruce', career: "doctor" };
jQuery.extend(deep,obj, object); //obj = { name: 'Bruce', career: "doctor" }

函数库 lodash，提供 cloneDeep 实现

1.下载相关库

npm i --save lodash

2.在相关文件中引入

import _ from "lodash"

3.调用 _.cloneDeep() 方法实现深拷贝

<script>
import _ from "lodash"
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]); //false
</script>

js中实现深拷贝的4种方法相关推荐

【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
Js中数组去重的几种方法
前几天在看前端面试题的时候,其中js部分有个问题是实现数组去重的算法,一开始就想了一两种方法,后来仔细回忆了下这个题,觉得该问题实现方法确实不止局限于一两种方法 ,从不同的角度去看待该问题就会有多种实 ...
Js中访问对象的两种方法
我们通常都使用点" . '"表示法来访问对象,在js中也可以用方括号" [ ] "来访问对象的属性. 使用[]时,应该将想要访问的属性用字符串的形式放在&quo ...
js中遍历对象的几种方法
一.前言我们知道,在js的对象中,有下面几种属性: 可枚举属性不可枚举属性从原型链上继承的属性以Symbol作为key值今天,我们就来谈一谈如何遍历这些属性. 二.遍历可枚举属性首先, ...
js 中继承常用的几种方法
继承继承: 就是指一个对象有权去访问另一个对象的成员属性作用是实现代码的复用继承的方式:只要能实现一个对象有权访问另一个对象成员的方式都可以成为是实现继承的方式 3 .继承是对 ...
html数据类型判断,JS中判断数据类型的几种方法
1⃣️首先我们来了解一下js中的数据类型 1.基本数据类型:Undefined.Null.Boolean.Number.String(值类型) 2.复杂数据类型:Object(引用类型) (值类型和引 ...
js 中时间格式化的几种方法
1.项目中时间返回值,很过时候为毫秒值,我们需要转换成能够看懂的时间的格式: 例如: yyyy-MM-dd HH:mm:ss 2.处理方法(处理方法有多种,可以传值到前端处理,也可以后台可以好之后再 ...
判断js中的数据类型的几种方法
1.最常见的判断方法:typeof alert(typeof a) ------------> string alert(typeof b) ------------> number al ...
JS 中迭代数组的三种方法
第一种(forEach): const todo = [{id : '1',name : 'zhangsan',age : '20',},{id : '2',name : 'lisis',age : ...

js中实现深拷贝的4种方法

js中深拷贝的方法

原生js中递归函数拷贝

Object.create()

jQuery 中$.extend

函数库 lodash，提供 cloneDeep 实现

js中实现深拷贝的4种方法相关推荐

最新文章

热门文章