js 的深拷贝和浅拷贝

要讲 js 的深浅拷贝就必须了解js的数据类型

基本数据类型:null、undefined、number 、string 、boolean 、symbol(es6)

引用数据类型:Object,Array, Map ....

数据赋值

- 基本数据类型拷贝对象的值,两个变量的值相等但是确实两个不同的变量。

- 引用数据类型拷贝的是对象的地址,两个变量指向同一个对象实例。改变其中一个变量的属性都会影响两外一个变量。【其实就是赋值了一个地址,但是没有创建新的对象】

深浅拷贝是对引用数据类型来说的

浅拷贝: 拷贝对象时只拷贝对象属性的一层,当对象的属性也是一个对象时拷贝的是对象的地址。

所以浅拷贝在对象的属性不全是基本数据类型的时候会带来一些问题,因为对象的属性对象指向的

是同一个对象实例,那么在改变的时候就会影响元数据。

const obj = {
  a1:1,
  a2:'a1',
  a3:{ b1: 2, b2:'b2' }
}

// 浅拷贝的方式
const nobj = {...obj}  es6语言
const nobj = Object.assign({},obj);  
const nobj = Object.keys(obj).reduce((res,cur) => ({ ...res,[cur]:obj[cur]}),{});
const nobj = {};
for(let key in obj)
  nobj[key] = obj[key];

// 新知识点 const 表示的常量, 对于基本数据类型来说是不可以改变值的,对于引用数据类型来说是不可以改变引用类型的地址的,但是却可以改变引用数据类的属性的值

// 深拷贝的方式【需要自己补充其他引用数据类型的拷贝】
function deepClone(obj){
  const type = Object.prototype.toString.call(obj);
  switch(type){
    case '[object Object]':
      const cloneObj = {};
      for(let key in obj)
        cloneObj[key] = deepClone(obj[key]);
      return cloneObj;
    case '[object Array]':
      return obj.map(item => deepClone(item));
    default:
      return obj;
  }
}

JavaScript 中,深拷贝浅拷贝是处理对象数组时常见的概念,二者的原理、区别及实现方法如下: ### 原理 - **浅拷贝**:浅拷贝只复制对象或数组的一层属性,如果属性是基本数据类型(如 `Number`、`String`、`Boolean` 等),则复制其值;如果属性是引用数据类型(如 `Object`、`Array` 等),则只复制其引用地址,而不是复制对象本身。这意味着浅拷贝后的对象或数组与原对象或数组共享引用类型的属性,修改其中一个的引用类型属性会影响到另一个[^1][^4]。 - **深拷贝**:深拷贝会递归地复制对象或数组的所有属性,包括嵌套的对象数组。它会创建一个完全独立的新对象或数组,新对象或数组与原对象或数组在内存中占据不同的空间,修改新对象或数组的任何属性都不会影响原对象或数组[^1][^4]。 ### 区别 浅拷贝深拷贝的区别主要体现在对原始数据的影响上: - **浅拷贝**:修改第一层属性不影响原对象,但修改嵌套对象会同时改变原对象拷贝对象。例如: ```javascript const original = { a: 1, b: { c: 2 } }; const shallowCopy = { ...original }; // 展开运算符(浅拷贝) shallowCopy.a = 100; // 原对象不变:original.a = 1 shallowCopy.b.c = 200; // 原对象也被修改:original.b.c = 200 ``` - **深拷贝**:修改拷贝对象的任何属性都不会影响原对象。例如: ```javascript const original = { a: 1, b: { c: 2 } }; const deepCopy = JSON.parse(JSON.stringify(original)); // 深拷贝 deepCopy.a = 100; // 原对象不变:original.a = 1 deepCopy.b.c = 200; // 原对象不变:original.b.c = 2 ``` ### 实现方法 #### 浅拷贝实现方法 - **展开运算符**:使用展开运算符(`...`)可以快速实现浅拷贝。例如: ```javascript const original = { a: 1, b: 2 }; const shallowCopy = { ...original }; ``` - **Object.assign()**:`Object.assign()` 方法用于将一个或多个源对象的所有可枚举属性复制到目标对象,并返回目标对象。当对象只有一层属性时,可视为深拷贝;但对象中有嵌套对象时,二级属性以后为浅拷贝。例如: ```javascript const obj = { name: "jack", age: 18 }; const objNew = Object.assign({}, obj); ``` #### 深拷贝实现方法 - **JSON 序列化**:使用 `JSON.parse(JSON.stringify())` 可以实现简单的深拷贝。但该方法存在一些局限性,无法拷贝函数、`undefined`、`Symbol`,会丢失 `Date` 对象(转成字符串)、正则表达式(转成空对象),也无法处理循环引用(如 `obj.self = obj`)。例如: ```javascript function simpleDeepCopy(obj) { return JSON.parse(JSON.stringify(obj)); } ``` - **`structuredClone()`**:这是 JS 官方推出的一种深拷贝方法。例如: ```javascript let obj = { a: 1, b: { c: 2 }, d: [3, 4], e: new Date() }; let deepCopy = structuredClone(obj); ``` - **递归克隆**:手动实现递归克隆可以解决 `JSON` 序列化的局限性,实现完整的深拷贝。以下是一个简单的递归克隆函数示例: ```javascript function deepClone(obj) { if (typeof obj !== 'object' || obj === null) { return obj; } let clone = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key]); } } return clone; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值