学习一下引用数据类型拷贝

最新推荐文章于 2022-03-29 16:54:58 发布
最新推荐文章于 2022-03-29 16:54:58 发布
阅读量330 收藏
点赞数
分类专栏： JavaScript 文章标签： 拷贝 js javascript
本文链接：https://blog.csdn.net/qq_43799743/article/details/111386520
版权
本文详细探讨了JavaScript中的引用数据类型拷贝，包括赋值、浅拷贝（通过Object.assign()、展开运算符...及Array.prototype.slice()实现）和深拷贝。文中列举了各种拷贝方法的示例，并分析了它们的特点，如浅拷贝只复制一层，而深拷贝能实现多层复制。此外，还提到了深拷贝的一些限制，如无法处理函数、循环引用、Date对象和正则表达式，并给出了解决方案和优化建议。
摘要由CSDN通过智能技术生成

对于引用数据类型，细分可以分为以下三个方面

  • 赋值
  • 浅拷贝
  • 深拷贝

目录

赋值：

浅拷贝

Object.assign()

展开运算符...

Array.prototype.slice()

深拷贝

总结 

赋值：

只是改变指针的指向，例如，引用数据类型的赋值是对象保存在栈种的赋值，这样的化两个变量就都指向同一个对象，因此彼此之间的操作互有影响。

举个例子：

var a = {};
var b = a;

a.name = "ls";
console.log(a.name); // "ls"
console.log(b.name); // "ls"

b.age = 22;
console.log(b.age); // 22
console.log(a.age); // 22

console.log(a==b)  //true

 这种情况会导致a 和 b指向相同的数据，对其中一个修改的话，会影响到另外一个。实际开发的时候，这会让人很难受。

怎样才能让他们会不影响呢？ 一个简单的方法就是复制一份a 变量的数据，这就是拷贝。

所以根据拷贝的层次不同可以分成浅拷贝和深拷贝，浅拷贝只进行一层拷贝，深拷贝则进行无限层次的拷贝。

浅拷贝

先实现一个浅拷贝：

let shallowClone = source => {
    let target = {}
    for(let i in source){
        if ( source.hasOwnProperty(i) ){ //obj.hasOwnProperty，返回值是一个布尔值，即是否是obj的属性（原型上的是false)
            target[i] = source[i];
        }
    }
    return target;
}

let demo ={
    b:{
        c:{}
    }
}

let demo2 = shallowClone(demo);
let demo3 = demo;

console.log(demo3 === demo)            //true
console.log(demo2.b.c === demo.b.c)    //true
console.log(demo2.b === demo.b)        //true
console.log(demo2 === demo)            //false

demo3 = demo 这样赋值，是地址赋值，demo3 、demo指向同一个对象，这不是我么想要的，我们看一下shallowClone函数，只是个浅拷贝的实现方式，那么demo2变量应该是实现了一个副本，demo2变量是在堆中开了一个新的内存，所以指向其他对象，demo2 === demo.b 为 true说明这就是浅拷贝的效果，简单拷贝了一层。

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象。

举个例子：

let demo = {
    name:"lsbook",
    book:{
        title:"Do you know JS",
        price:"45"
    }
}

let clone_demo = Object.assign({},demo);
console.log(clone_demo);
demo.name = "new name"
demo.book.price = "100"
console.log(clone_demo.name,clone_demo.book.price)  // lsbook 100

修改上面的代码demo变量之后，对象clone_demo基本属性没有改变，但是修改demo对象中书引用属性时，对象clone_demo相应位置属性值也发生改变 

展开运算符...

与Object.assign()效果相同

let demo = {
    name:"lsbook",
    book:{
        title:"Do you know JS",
        price:"45"
    }
}

let clone_demo = {...demo}
console.log(clone_demo);
demo.name = "new name"
demo.book.price = "100"
console.log(clone_demo.name,clone_demo.book.price)  // lsbook 100

Array.prototype.slice()

slice() 方法返回一个新的数组对象，该对象由begin和end决定的原先的浅拷贝。原数组不会被改变。

let a = [0,"1",[2,3]];
let b =a.slice(1);
console.log(b)     //["1",[2,3]]


a[1] = "4";
a[2][0] = 5;
console.log(a);  // [0,"4", [5,3]]
console.log(b);  // ["1",[2,3]]

深拷贝

当对象和它引用的对象一起复制时即发生深拷贝。拷贝前后两个对象互不影响。

JSON.parse(JSON.stringify (obj))

let dome = {
    name:"lsbook"
    book:{
        title:"Do you know JS",
        price:45
    }
}

let clone_demo = JSON.parse(JSON.stringify(demo));
console.log(clone_demo);
demo.name = "new name"
demo.book.price = 100
console.log(clone_demo.name,clone_demo.book.price);  // ls  45

在demo改变之后对clone_demo完全没有影响，这就是深拷贝。

值得注意的是：

  • 会忽略undefined  Symbol
  • 不能序列化函数
  • 不能解决循环引用的对象
  • 不能正确处理new Date()
  • 不能处理正则

 对于undefined  symbol  函数 三种情况会直接忽略

let demo = {
    name : "ls",
    h1 : undefined,
    h2 : Symbol("ls"),
    h3 : function () {},
}

let clone_demo = JSON.parse(JSON,stringify(demo));
console.dir(clone_demo)  // {name : "ls"}

循环引用情况下会报错

let obj = {
    a : 1,
    b : {
        c : 2,
        d : 3
    }
}

obj.a = obj.b;
obj.b.c = obj.a;


let obj2 = JSON.parse(JSON.stringify(obj)); // Uncaught TypeError: Converting circular structure to JSON

new Date 情况下，转换结果不正确

new Date();
// Wed Jul 01 2020 16:19:07 GMT+0800 (中国标准时间) {}

JSON.stringify(new Date())
// ""2020-07-01T08:19:19.860Z""

JSON.parse(JSON.stringify(new Date()))
// "2020-07-01T08:19:35.569Z"

解决方法 将时间转换成字符串

let date = (new Date()).valueOf();
// 1593591638596

JSON.stringify(date);
// "1593591638596"

JSON.parse(JSON.stringify(date));
// 1593591638596

正则情况下

let demo = {
    name:"ls",
    a: /'123'/
}

console.log(demo)   // {name: "ls", a: /'123'/}

let clone_demo = JSON.parse(JSON.stringify(obj));
console.log(clone_demo);
// {name: "ls", a: {}}

实现一个简单的深拷贝：

   浅拷贝+递归的方法。浅拷贝的时候判断是不是对象，是对象就递归。

let shallowClone = source =>{
    let target = {};
    for (let key in source){
        if(Object.prototype.hasOwnProperty.call(source, key)){
             target[key] = typeof source[key] === 'object'? shallowClone(source[key]) : source[key];
        }
    }
    return target
}

let demo = {
    name : "ls",
    book : {
        title : 'Do you know JS',
        price : "45"
    }
}

let clone_demo = shallowClone(demo);
console.log(clone_demo);

demo.name = "qqq"
demo.book.price = "50"

console.log(clone_demo.name,clone_demo.book.price) // ls 45

上述代码还有问题的

  • 没有考虑并发症写法
  • 对对象的判断不够严谨，因为  typeof null === object
  • 没有对预先设定的参数校正，可能会有null应返回null而不是{}

首先需要一个兼容的合并和判断 null 方法的函数

let isObject = obj => typeof obj === 'object' && object != null

把它加到我们的代码中

 

let isObject = obj => typeof obj === 'object' && obj != null;
let shallowClone = source =>{
    if (!isObject(source)) return source;
    let target = Array.isArray(source) ? []:{};     
    for (let key in source){
        if(Object.prototype.hasOwnProperty.call(source, key)){
             target[key] = isObject(source[key])? shallowClone(source[key]) : source[key];
        }
    }
    return target
}

let demo = {
    name : "ls",
    book : {
        title : 'Do you know JS',
        price : "45"
    },
    h1 : null,
    h2 : undefined,
    h3 : [1,2,3]
}

let clone_demo = shallowClone(demo);
console.log(clone_demo);

demo.name = "qqq"
demo.book.price = "50"
demo.h3[1] = "55"

console.log(clone_demo.name,clone_demo.book.price) // ls 45

console.log(clone_demo)

我们试着去优化JSON.parse（JSON.stringify（obj））循环引用引发异常的问题。

let isObject = obj=>typeof obj ==='object' && obj !=null;

let shallowClone = (source,hash = new WeakMap()) =>{
    if (!isObject(source)) return source;
    if(hash.has(source)) return hash.get(source); //检测，查哈希表
    let target = Array.isArray?[]:{};
    hash.set(source,target) //设置哈希表
    for (let key in source){
        if(Object.prototype.hasOwnProperty.call(source,key)){
            target[key] = isObject(source[key])? shallowClone(source[key],hash) : source[key]  //传入哈希表
        }
    }
    return target
}

let obj = {
    a : 1,
    b : {
        c: 2,
        d: 3
    }
}

obj.a = obj.b;
obj.b.c = obj.a;

let clone_obj = shallowClone(obj)
console.log(clone_obj);

总结 

-和原数据是否指向相同第一层数据为基本数据类型原数据中包含子对象
赋值是改变原数据共同改变改变原数据共同改变
浅拷贝否改变不会使原数据一同改变改变原数据共同改变
深拷贝否改变不会使原数据一同改变改变不会使原数据一同改变

 

lvshun_19991027
关注
专栏目录
Js从头学起（基本数据类型和引用类型的参数传递详细分析）
10-28
JavaScript中的数据类型主要分为基本数据类型和引用数据类型。基本数据类型包括了Undefined, Null, Boolean, Number, String以及ES6新增的Symbol和BigInt。引用数据类型主要是指Object，其中还包括了Array、Function...
PHP中引用类型和值类型功能与用法示例
10-17
PHP作为一款广泛使用的后端脚本语言，其数据类型分为值类型和引用类型。了解这两种类型的区别及使用方法对于进行有效且高效的PHP开发至关重要。接下来我们将详细阐述这些概念，并通过实例代码加深理解。 首先，让...
引用数据类型的深拷贝
weixin_33725515的博客
04-11 210
浅拷贝：只遍历一层，如果存在数组成员是对象，[{name:'jack'}],不会对对象里的值进行遍历拷贝。 其实根据浅拷贝的方法不同，也有不同的效果。 1. 其中最弱的浅拷贝为直接赋值 let arr2 = arr1; 是直接将整个arr1数组的地址赋给arr2，故arr2的任意值(为什么说任意值呢？因为后面会介绍到，有些浅拷贝，可以使部分值看上去有深拷贝的效果)改变，都会影响到a...
引用类型 深拷贝
艾米栗的代码天地
07-01 377
引用类型 深拷贝 复制引用类型的时候，复制的是引用地址，而不是新建一个内存。这是浅拷贝。 那我们要实现它的深拷贝。 递归方式实现深拷贝 可以看到最终拷贝的结果是null、undefinde、function、RegExp等特殊的值也全部拷贝成功了，而且我们修改里边的值也不会有任何问题的 缺点： （1）无法保持引用 （2）当数据的层次很深，会栈溢出 // 定义一个深拷贝函数 接收目标target参数 function deepClone(target) { // 定义一个变量 let res
SQL语句中发送微信消息
weixin_34348111的博客
06-02 875
利用EasySQLMAIL的外部接口表功能来发送。可以支持Oracle、SQL Server、MySQL、PostgreSQL、Informix数据库。步骤如下： （1）在数据源的“外部接口功能”中启用“允许从该数据源上的接口表中发送企业微信或钉钉消息”选项，并选择可以用来发消息的企业微信应用（注意记录下应用 ID，后面的SQL语句中会用到这个ID）: 启用这个选项后，EasySQLMAI...
2.02.25对象及引用类型数据的深拷贝
m0_59593735的博客
03-29 886
2.02.25 对象及引用类型数据的深拷贝 1.对象 1.概念 JavaScript的基本数据类型包括数字、字符串、布尔值、null、和undefined值。其他所有的值都是对象（Object）。比如数组数据类型他就是一个对象。JavaScript中的对象是一个可变的键控集合。在JavaScript中数组是对象，函数是对象、正则表达式是对象，当然，对象自然也是对象。 对象是无序的数据的集合 对象是属性的容器，其中每个属性都拥有名字和值。对象适合用于汇集和管理数据。对象可以包含其他对象，所有可以容易的表示成
前端零碎问题（五）引用数据类型的拷贝问题
weixin_30782331的博客
12-11 108
浅拷贝和深拷贝是针对引用数据类型的复制操作，先说下数据类型： 数据类型分为： 　　a：基础数据类型（Null,Undefined,Number,String,Boolean）; 　　b：引用数据类型（Object，Array，RegExp，Date，Function） 浅拷贝：只复制了引用，引用的指针指向的是同一个对象的实例，彼此之间的操作会互相影响 深拷贝：深复制不是简单的复制引用，而...
学习Python一年，这次终于弄懂了浅拷贝和深拷贝
12-21
在Python编程语言中，浅拷贝和深拷贝是两种不同的对象复制机制，它们涉及到对象引用和实际数据的复制。本文将深入解析这两个概念，并通过示例帮助理解它们的区别。 首先，我们需要理解Python中的对象引用。在Python...
JavaScript基础入门：数据类型与深拷贝详解
本篇文档是关于JavaScript基础练习题，针对初学者设计了一系列题目，主要聚焦于JavaScript语言的核心概念，包括数据类型、基本与引用数据类型的区别、深浅拷贝以及数组和对象的复制方法。首先，我们明确了本文讨论的...
C++向上类型转换和拷贝构造
01-17
在C++编程中，向上类型转换（Upcasting）和拷贝构造函数（Copy Constructor）是两个重要的概念，它们在类的继承和对象处理中扮演着关键角色。让我们深入理解这两个主题，并结合C++编程思想来探讨它们的应用。 首先...
引用类型复制-深浅复制
Something of an idiot
04-16 523
1.引用类型在内存中的占位 public void Test(){ String str1 = "111"; String str2; str2 = str1; System.out.println("str2: " + str2); str1 = "222"; System.out....
引用数据类型的深拷贝方法
Sugar0219的博客
12-28 778
数组 以下方法来实现一维数组的深拷贝，但这种方法只适用于一维数组，对多维数组无效 1、for 循环实现数组的深拷贝 for循环是非常好用的。如果不知道高级方法，通过for循环能够完成我们大多数的需求。 代码如下： var arr = [1,2,3,4,5] var arr2 = copyArr(arr) function copyArr(arr) { let res = [] for (let i = 0; i < arr.length; i++) { res.push
引用类型的深拷贝
wangbin的博客
05-21 599
引用类型的深拷贝
基本类型、引用类型复制变量值
MeiLuan_yahoho的博客
03-10 311
1.、对象是是存放在堆内存中的，而基本类型存放在栈内存中 当复制引用类型值（对象）的时候复制的其实是一个指针（指向在内存中的位置） 一个例子更好地理解关于引用类型的复制。 b=a；使得b的值指向了a指向的堆内存中存放的对象，所以当b改变复制后的对象时，相应的堆内存所表示的该对象改变，所以引起了a的变化；而当我们使用对象自变量语法给b重新定义后，这时候堆内存是重新开辟了一个存放新对象的空间，而b的...
Js基本数据和引用数据类型的复制差异
qq_38948398的博客
12-29 211
window.onload = function() { var num1 = 5; var num2 = num1; num2 = 4; console.log(num1); // 5 console.log(num2); // 4 var obj = { name: "狗子诶" }; var objec = obj; objec.name = "江小白"; console...
值类型 引用类型 深拷贝
weixin_45626485的博客
03-14 167
值类型 引用类型 深拷贝 值类型变量：字符串 number 布尔变量 symbol undefined 引用类型变量 ：函数 对象 数组 null typeof 方法可以判断值类型变量得到具体它类型，判断引用类型的到 object 不可细分得到具体是对象还是数组，typeof 判断函数为function; 值类型和引用类型变量存储特征： 值类型变量保存到栈中，用完就销毁，是直接存储变量的名和值， 赋值时，深复制直接将变量值复制给另外一个变量，修改时互相不影响； 引用类型变量名保存在栈，值保存
深入理解JavaScript引用类型的深拷贝、浅拷贝和按值传参
sksukai的博客
03-31 502
对C++熟悉的同学肯定很熟悉：值和引用。比如按值传参和按引用传参，按值返回和按引用返回。那在javascript里边，变量复制以及传参时，又会是神马情况呢？不同语言之间，有些基本概念的区别还是需要细细品味的。 首先明确JavaScript（ECMAScript）中的基本概念： 变量包括两种：基本类型和引用类型。 基本类型：Undefined，Null，Boolean，Number，String 引...
Python中对象的引用与复制详细教程讲解
python学习者的博客
09-07 365
在python进行像b = a这样的赋值时，只会创建一个对a的新引用，使a的引用计数加1，而不会创建新的对象： >>> a = 'xyz' >>> import sys >>> sys.getrefcount(a) 3 >>> b = a >>> sys.getrefcount(b) 4 >>> id(a) 88292288L >>> id(b) 88292288L 这样，当引用的
【JS基础】搞不懂变量中的深浅拷贝？来！看完工作中的类似问题都能解决了
庞囧的博客
01-03 772
首先要知道什么是值类型和引用类型，这个基础的知识点如果还不知道就自己先去查下。值类型：数字、字符、undefined、symbol等。引用类型：对象、函数（也可以单独看作是函数类型）、数组、null（指向空地址）等。因为我们的深浅拷贝就基于那两大类做的，太基础这里咱就不补充了。每当进行变量拷贝与修改值的时候，就要条件反射的考虑到深浅拷贝的问题。要培养这个意识。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值