深拷贝和浅拷贝

小松不是菜奈

已于 2022-04-14 15:58:49 修改

阅读量275

点赞数

CC 4.0 BY-SA版权

文章标签：前端

于 2022-04-14 15:58:47 首次发布

本文链接：https://blog.youkuaiyun.com/L_xiaosong/article/details/124174187

本文探讨了基本数据类型（如Number、String、Boolean等）的值传递与复杂数据类型（如对象、数组、函数等）的地址传递，揭示浅拷贝现象，并通过Object.assign和for...in介绍浅拷贝方法。重点讲解了为何简单的赋值会导致对象共享引用问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.基本数据类型的拷贝（复制copy）深拷贝和浅拷贝前提：需要理解值传递地址传递

// 基本数据类型值传递 number string boolean null undefined Sysmbol bigInt

 Number
  a = 1.1;b = a;b = 2; console.log(a,b)
  // String
  a = 'hello';b = a;b = 3; console.log(a,b)
  // Boolean
  a = false;b = a;b = 'sss'; console.log(a,b)
  // Undefined
  a = undefined;b = a;b = false; console.log(a,b)
  // Null
  a = null;b = a;b = undefined; console.log(a,b)

二、复杂数据类型（object）的拷贝地址传递注意

// 常用的复杂数据类型包括：{} 、[] 、function(){} 、Date 、RegExp 、null（这个比较特殊）等

1、我们依然用一的简单赋值（=）来进行一遍操作（赋值）

// 经过实践我们会发现：

// 1、当类型为{}、[]的时候，改变b的值，a也会跟着一起变化。

// 2、当类型为Date、function、RegExp的时候，a保持不变。

// 总结：

// 我们发现{}或者[]时，简单的赋值操作并不能实现它们的拷贝，只是改了b的指向，

// 使a和b都指向同一个引用，随意改变一个，都会影响另外一个的值。

 //{}
  a = {name: 'abc'};b = a;b.name = 'sss'; 
  console.log(a,b)
  // []
  a = ['a','b','c'];b = a;b[1] = 'd'; 
  console.log(a,b)
  // function
  a = function(){ alert('aaa'); };b = a;b = function(){ alert('bbb'); }; 
  console.log(a.toString(),b.toString())
  // Date
  a = new Date('2018-10-11 00:00:00');b = a;b = new Date('1970-01-01 00:00:00');
  console.log(a,b)
  // RegExp
  a = new RegExp('abc');b = a;b = new RegExp('aaa'); 
  console.log(a,b)

对象-浅拷贝 Object.assign for in 进行浅拷贝

// 2、Object.assign 和 for in进行{}和[]的拷贝（浅拷贝--只能对象拷贝一层最外层）

// Object.assign 对象的复制

// a = {name: 'aaa'};

//地址引用

// var b=a;

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

// 文件浅拷贝

  var b = Object.assign({},a)
  console.log(a,b)
  b.name = 'bbb';  
  console.log(a,b)
  a = [1,2,3,4,5]; 
  // b=a; 
  b = Object.assign([],a);
  b[1]=9;
  console.log(a,b)