js实现深拷贝

  js的数据类型分为基本数据类型和引用数据类型。基本数据类型是直接赋值,引用数据类型分为浅拷贝和深拷贝。浅拷贝是复制对象的指针,深拷贝是复制对象所有属性再内存中独立存在。

  浅拷贝如下:

var obj = {a: ‘test‘, b: {c: 0}}
var obj1 = obj
var obj2 = shallowCopy(obj);
function shallowCopy(src) {
    var dst = {};
     for (var prop in src) {
         if (src.hasOwnProperty(prop)) {
             dst[prop] = src[prop];
          }
      }
     return dst;
}

var obj3 = Object.assign({}, obj)

obj.a = ‘arr‘
obj.b.c = 1

console.log(obj) // {a: ‘arr‘, b: {c: 1}}
console.log(obj1) // {a: ‘arr‘, b: {c: 1}}
console.log(obj2) // {a: ‘test‘, b: {c: 1}}
console.log(obj3) // {a: ‘test‘, b: {c: 1}}

  深拷贝实现如下:

function extend (source) {
  var target
  if (typeof source === ‘object‘) {
    target = Array.isArray(source) ? [] : {}
    for (var key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== ‘object‘) {
          target[key] = source[key]
        } else {
          target[key] = extend(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}

var obj1 = {a: {b: 0}}
var cpObj1 = extend(obj1)
obj1.a.b = 1
console.log(cpObj1) // {a: {b: 0}}

var obj2 = [[0]]
var cpObj2 = extend(obj2)
obj2[0][0] = 1
console.log(cpObj2) // [[0]]

  

原文地址:https://www.cnblogs.com/zjp-zxy/p/9870658.html

时间: 2024-11-09 12:23:39

js实现深拷贝的相关文章

JS 中深拷贝的几种实现方法

JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空,并且是对象或者是 if (obj && typeof obj === "object") { for (key i

4个方面彻底说清JS的深拷贝/浅拷贝

首先,本文适用于业务需要,急需知道如何深拷贝JS对象的开发者.第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者. 第一类 你只需要一行黑科技代码就可以实现深拷贝 var copyObj = { name: 'ziwei', arr : [1,2,3] } var targetObj = JSON.parse(JSON.stringify(copyObj)) 此时 copyObj.arr !== targetObj.arr 已经实现了深拷贝 别着急走,利用window.JSON的方法做深拷

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复

【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果A没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复制了a,为啥修改数组a,数组b也跟着变了,这里我不

从JS的深拷贝与浅拷贝到jq的$.extend()方法

一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型(boolean,undefined,null,string,number) 1.基本数据类型存放在栈内存中 是存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,是直接按值存放的,所以可以直接访问. 2.基本数据类型值不可变 js中给基本类型赋值或操作基本类型数据时,并没有改变基本类型的原

JS中深拷贝数组、对象、对象数组方法

我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 "=" 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝的区别. 我们先给出一个数组: var arr = ["a","b"]; 现在怎么创建一份arr数组的拷贝呢?直接执行赋值运算吗?我们来看看输出结果 var arrCopy = arr; arrCopy[1] = "c"; arr

js的深拷贝特别注意this的深拷贝

原生的,jquery的extend,和angular的copy 我们深拷贝的根本原因是为了不改变原来对象的值. <script type="text/javascript"> var ss = { name : 'yan', age : 20 } var box = ss; box.name = 'jin'; console.log(ss.name);//jin //==jquery============================ var ss1 = { name

JS中深拷贝和浅拷贝记录及解决方法

这是本人第一次写博客...好紧张,有什么固定格式麽,需要爆照麽..怎样才能让自己表现的不是第一次啊.. 不多说,最近一不小心就跳入一个坑,也是怪我自己知识点扩展不够..这次记录下,上代码 /*a 原来的数组* b 复制后的新数组* */function copy(a,b) { for(var i=0;i<a.length;i++) { b.push(a[i]) }}var arr1=[1,2,3,4,5];var arr2=[];copy(arr1,arr2);console.log(arr2)

js对象深拷贝

由于引用类型(数组.对象)是按地址传递,直接拷贝是浅拷贝,即修改拷贝后的变量,原变量也会改变.有时需要深拷贝一个对象,这时就需要遍历彻底复制,使原对象和拷贝对象完全脱离关系. 代码: function deepCloneObj(obj){ var i; var o = Array.isArray(obj) ? [] : {}; for(i in obj){ if(obj.hasOwnProperty(i)){ o[i] = typeof obj[i] === "Object"? dee