拷贝

js

• child::

  浅拷贝

  js

  • 第一层是值拷贝，下面的层就都是引用拷贝

  实现方式

  拓展运算符：

  const original = { a: 1, b: { c: 2 } };
  const shallowCopy = { ...original };
   
  shallowCopy.a = 3;
  shallowCopy.b.c = 4;
  console.log(original);// { a: 1, b: { c: 4 } }
  console.log(shallowCopy);// { a: 3, b: { c: 4 } }

  Object.assign() 覆盖对象：

  const original = { a: 1, b: { c: 2 } };
  const shallowCopy = Object.assign({}, original);
   
  shallowCopy.a = 3;
  shallowCopy.b.c = 4;
  console.log(original);// { a: 1, b: { c: 4 } }
  console.log(shallowCopy);// { a: 3, b: { c: 4 } }

  js 数组的slice方法 获取数组片段：

  const original = [1, 2, { a: 3 }];
  const shallowCopy = original.slice();
   
  shallowCopy[0] = 10;
  shallowCopy[2].a = 30;
  console.log(original);// [1, 2, { a: 30 }]
  console.log(shallowCopy);// [10, 2, { a: 30 }]

  指向原始笔记的链接

• child::

  深copy 深拷贝

  js

  方法之一：运行时提供的原生方法

  use::structuredClone

  方法之一: 转json再转回对象

  JSON.parse(JSON.stringify(待拷贝的对象))

  1. 适用范围:

  1.1. 优点:

  1. 深层拷贝

  1.2. 缺点:

  1. 取不到值为 undefined 的 key
  2. 如果对象里有函数，函数无法被拷贝下来
  3. 无法拷贝copyObj对象原型链上的属性和方法
  4. 对象转变为 date 字符串。

  方法之一: 自己实现函数，递归克隆

  function deepClone(obj) {
        if (obj === null || typeof obj !== 'object') {
            return obj;
        }
    
        // 支持 Map 和 Set 作为源类型
        if (obj instanceof Map) {
            const copy = new Map();
            for (const [key, value] of obj) {
                copy.set(key, deepClone(value));
            }
            return copy;
        }
    
        if (obj instanceof Set) {
            const copy = new Set();
            for (const value of obj) {
                copy.add(deepClone(value));
            }
            return copy;
        }
    
        // 支持数组和普通对象
        const copy = Array.isArray(obj) ? [] : {};
        for (const key of Object.keys(obj)) {
            copy[key] = deepClone(obj[key]);
        }
    
        return copy;
    }
    
    // 示例对象
    const original = { a: 1, b: { c: 2 }, d: [3, 4, { e: 5 }] };
    
    // 深拷贝
    const deepCopy = deepClone(original);
    
    console.log(deepCopy);
    console.log(deepCopy.b === original.b); // false, 表示成功深拷贝
    console.log(deepCopy.d === original.d); // false, 表示成功深拷贝
    

  方法之一: 利用第三方库lodsh

  _.cloneDeep()

  方法之一: 利用第三方库jQuery

  jQuery.extend()

  指向原始笔记的链接