浅拷贝和深拷贝（较为完整的探索）

jsliang
11,574 阅读21分钟

开篇点题：

  • 本文将用递归学习的方式探索关于《浅拷贝和深拷贝》中涉及的知识点，希望小伙伴们在脑海中深拷贝这些知识点，在面试或者工作中能够灵活使用。
const deepCloneKnowledgePoints = {
  title: '浅拷贝和深拷贝',
  chapterOne: {
    title: '章节一',
    point: [
      '浅拷贝和深拷贝初探索',
      '基本数据类型和引用数据类型',
    ],
  },
  chapterTwo: {
    title: '章节二',
    point: [
      '手写浅拷贝',
      'Object.assign()',
      'Array.prototype.concat()',
      'Array.prototype.slice()',
      '...obj 展开运算符',
    ],
    extend: [
      'for...in',
      'for...of',
      'for...in 和 for...of 的区别',
      'hasOwnProperty',
    ],
  },
  chapterThree: {
    title: '章节三',
    point: [
      '手写深拷贝',
      'JSON.parse(JSON.stringify())',
      '函数库 Lodash',
      '框架 jQuery',
    ],
    extend: [
      'typeof',
      'instanceof',
      'constructor',
      {
        point: 'Object.prototype.toString.call()',
        extend: [
          'Function.prototype.apply()',
          'Function.prototype.bind()',
          'Function.prototype.call()',
          'apply()、bind() 以及 call() 的区别',
        ],
      },
      {
        point: 'JSON.parse(JSON.stringify())',
        extend: [
          'JSON.parse()',
          'JSON.stringify()',
        ]
      }
    ],
  },
};

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 浅拷贝和深拷贝初探索
四 浅拷贝
 4.1 手写浅拷贝
 4.2 Object.assign()
 4.3 Array.prototype.concat()
 4.4 Array.prototype.slice()
 4.5 ...obj 展开运算符
五 深拷贝
 5.1 手写深拷贝
 5.2 JSON.parse(JSON.stringify())
 5.3 函数库 Lodash
 5.4 框架 jQuery
六 总结

二 前言

返回目录

在某次写业务代码中，突然来了个场景：

  • 后端小伙伴需要我将 接口返回的源数据 和 页面修改后新数据 各发一份给它。

代码表现为：

// 初始数据
const initData = {
  // ...
};

// finalData 数据来源于 initData
// 但是 finalData 的修改不能影响到 initData
const finalData = _.deepClone(initData);

// 返回最终形式 result 给后端
// finalData 和 initData 是两份不同的数据
const result = {
  initData: initData,
  finalData: finalData,
};
return res;

那么问题来了，如果采用 const finalData = initData，可不可以直接修改 finalData 的数据呢？它会不会影响到 initData？

咱们可以小试一下：

const initData = { obj: '123' };
const finalData = initData;
finalData.obj = '456';
console.log(initData);
console.log(finalData);
// 猜猜上面两个 console.log 返回啥？

如果不可以，那么我们需要怎样操作，才能返回新旧对比数据给后端？

三 浅拷贝和深拷贝初探索

返回目录

现在，我们开始揭晓上面答案。

在这之前，先看看 基本数据类型和引用数据类型。

数据分为基本数据类型和引用数据类型。

  • 基本数据类型：String、Number、Boolean、Null、Undefined、Symbol。基本数据类型是直接存储在栈中的数据。
  • 引用数据类型：Array、Object。引用数据类型存储的是该对象在栈中引用，真实的数据存储在内存中。

为了形象了解，咱们看下面代码：

// 基本数据类型
let str1 = '123';
str2 = str1;
str2 = '456';
console.log(str1); // '123'
console.log(str2); // '456'

// 引用数据类型
let arr1 = [1, 2, 3];
arr2 = arr1;
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4]

如上，由于基本数据类型是直接存储的，所以如果我们对基本数据类型进行拷贝，然后修改新数据后，不会影响到原数据。

而当你对引用数据类型进行拷贝，然后修改新数据后，它就会影响到原数据。

形象举例：

  • 我有一个大农场，里面有房子、车子、羊群、大草原。
  • 基本数据类型：我之前有一辆车子，我又买了一辆，这样我就有两辆，某一辆坏了不会影响到另一辆。我之前有一栋房子，我又盖了一栋，这样我就有两栋，某一栋被雷劈了不会影响到另一栋。
  • 引用数据类型：我房子前面就是大草原，里面有一些腐烂的草被羊吃了，羊因为吃了腐烂的草得病死了。草原还是草原，但是内部的草变少了；羊群还是羊群，但是内部的羊变少了。

在 JavaScript 中，房子、车子这些 单个 属性的，就是基本数据类型，它有自己的私人领域，你可以克隆它，但是新的它不会影响原有的它（旧车坏，新车照样开）。

而如果是羊群、大草原这种 集体 属性的，就是对象数据数据，如果我们一个一个存储，那就太麻烦了，不好一下子找到，所以浏览器会给它开辟一大块领域，然后告诉你怎么找到它（索引）。所以当你修改它当中的内容（羊吃草，草减少），它内部就会发生变化。

OK，了解 基本数据类型和引用数据类型 后，咱们进一步探索赋值、浅拷贝和深拷贝：

/**
 * @name 赋值
 */
const dataOne = {
  title: 'study',
  number: ['jsliang', 'JavaScriptLiang', 'LiangJunrong'],
};
const dataTwo = dataOne;
dataTwo.title = 'play';
dataTwo.number = ['null'];
console.log(dataOne);
// dataOne: { title: 'play', number: ['null'] }
console.log(dataTwo);
// dataTwo: { title: 'play', number: ['null'] }

/**
 * @name 浅拷贝
 */
const dataThree = {
  title: 'study',
  number: ['jsliang', 'JavaScriptLiang', 'LiangJunrong'],
};
const dataFour = shallowClone(dataThree); // shallowClone 待实现
dataFour.title = 'play';
dataFour.number = ['null'];
console.log(datadataThreeOne);
// dataThree: { title: 'study', number: ['null'] }
console.log(dataFour);
// dataFour: { title: 'play', number: ['null'] }

/**
 * @name 深拷贝
 */
const dataFive = {
  title: 'study',
  number: ['jsliang', 'JavaScriptLiang', 'LiangJunrong'],
};
const dataSix = deepClone(dataFive); // deepClone 待实现
dataSix.title = 'play';
dataSix.number = ['null'];
console.log(dataFive);
// dataFive: { title: 'study', number: ['jsliang', 'JavaScriptLiang', 'LiangJunrong'] }
console.log(dataSix);
// dataSix: { title: 'play', number: ['null'] }

如上，我们给出结论：

  • 赋值：引用地址的拷贝。修改赋值后的数据，不管是基本数据类型还是引用数据类型，都会影响到原数据。
  • 浅拷贝：一层拷贝。在浅拷贝中，修改基本数据类型不会影响原有数据的基本数据类型，修改引用数据类型会影响原有的数据类型。
  • 深拷贝：无限层级拷贝。在深拷贝中，修改基本数据类型和引用数据类型都不会影响原有的数据类型。

上面说法可能有问题：
1、有的大佬认为浅拷贝是拷贝一层，即第一层数据不管是数组还是字符串等都是互不影响的；
2、有的则认为浅拷贝只对基本数据类型有效，对于引用数据类型会引用其地址。

这里 jsliang 个人理解是将浅拷贝区分于赋值，如果你有更好观点，可以提出来~

图表化如下所示：

和原数据是否指向同一对象 原数据为基本数据类型 原数据包含子对象
赋值 是 改变【会】使原数据一同改变 改变【会】使原数据一同改变
浅拷贝 否 改变【不会】使原数据一同改变 改变【会】使原数据一同改变
深拷贝 否 改变【不会】使原数据一同改变 改变【不会】使原数据一同改变

四 浅拷贝

返回目录

4.1 手写浅拷贝

返回目录

在探讨通过工具进行浅拷贝之前，我们尝试 “手写” 一份浅拷贝：

const arr1 = [1, 2, ['jsliang', 'JavaScriptLiang'], 4];

const shallowClone = (arr) => {
  const dst = [];
  for (let prop in arr) {
    if (arr.hasOwnProperty(prop)) {
        dst[prop] = arr[prop];
    }
  }
  return dst;
}

const arr2 = shallowClone(arr1);
arr2[2].push('LiangJunrong');
arr2[3] = 5;

console.log(arr1);
// [ 1, 2, [ 'jsliang', 'JavaScriptLiang', 'LiangJunrong' ], 4 ]
console.log(arr2);
// [ 1, 2, [ 'jsliang', 'JavaScriptLiang', 'LiangJunrong' ], 5 ]

可以看到，这里我们修改引用数据类型里面的引用数据类型的时候，还是会影响到原数据，但是如果我们修改里面的基本数据类型的时候，就不会影响到原数据了。

那么，在更深入讲解探讨之前，我们先聊聊为了更好讲解上面代码思路，我做了啥：

  1. 查找 for...in，发现属于 JavaScript 语句和声明，所以给自己文档库起了个目录 语句和声明。
  2. 发现 for...in 和 for...of 相似，于是分别查了 for...in 和 for...of，顺带对着两个进行了对比 for...in 和 for...of 对比。
  3. 发现 for...of 还可以涉及到继承和原型链，于是顺带将之前面试写的文章弄过来：继承和原型链。
  4. 查找 hasOwnProperty，发现我还没建 Object 分类，于是新建了目录：Object，并写好了 hasOwnProperty。

闲扯完毕，我们还是讲解下上面代码为啥能浅拷贝数据：

  • for...in：遍历 Object 对象 arr1，将可枚举值列举出来。
  • hasOwnProperty()：检查该枚举值是否属于该对象 arr1，如果是继承过来的就去掉，如果是自身的则进行拷贝。

这样，我们就成功实现了浅拷贝，并且了解了其中涉及的知识点~

下面我们再介绍 3 种便捷形式，实现快速浅拷贝。

4.2 Object.assign()

返回目录

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

但是需要注意的是，Object.assgin() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

const obj1 = {
  username: 'LiangJunrong',
  skill: {
    play: ['basketball', 'computer game'],
    read: 'book',
  },
  girlfriend: ['1 号备胎', '2 号备胎', '3 号备胎'],
};
const obj2 = Object.assign({}, obj1);
obj2.username = 'jsliang'; // 修改基本类型
obj2.skill.read = 'computer book'; // 修改二层基本类型
obj2.skill.play = ['footboll']; // 修改二层引用类型
obj2.girlfriend = ['之前的都是瞎吹的！'];
console.log(obj1);
// { username: 'LiangJunrong',
//   skill: { play: [ 'footboll' ], read: 'computer book' },
//   girlfriend: [ '1 号备胎', '2 号备胎', '3 号备胎' ] }
console.log(obj2);
// { username: 'jsliang',
//   skill: { play: [ 'footboll' ], read: 'computer book' },
//   girlfriend: [ '之前的都是瞎吹的！' ] }

可以看到的是，Object.assign() 对于第一层的数据来说，是深拷贝，对于第二层及以上的数据来说，是浅拷贝。

4.3 Array.prototype.concat()

返回目录

concat() 是数组的一个内置方法，用户合并两个或者多个数组。

这个方法不会改变现有数组，而是返回一个新数组。

详细内容可以看 jsliang 的文章或者看 MDN 的文章：

在这里，我们通过 concat() 来浅拷贝一个数组：

const arr1 = [
  1,
  {
    username: 'jsliang',
  },
];

let arr2 = arr1.concat();
arr2[0] = 2;
arr2[1].username = 'LiangJunrong';
console.log(arr1);
// [ 1, { username: 'LiangJunrong' } ]
console.log(arr2);
// [ 2, { username: 'LiangJunrong' } ]

看到这里，小伙伴们应该明白，通过 concat() 进行的浅拷贝，可以修改里面的基本数据类型而不影响原值，但是修改里面的引用数据类型，就会影响到原有值了。

4.4 Array.prototype.slice()

返回目录

slice() 也是数组的一个内置方法，该方法会返回一个新的对象。

slice() 不会改变原数组。

详细可以看下 jsliang 的 concat 或者直接看 MDN 的文献：

const arr1 = [
  1,
  {
    username: 'jsliang',
  },
];

let arr2 = arr1.slice();
arr2[0] = 2;
arr2[1].username = 'LiangJunrong';
console.log(arr1);
// [ 1, { username: 'LiangJunrong' } ]
console.log(arr2);
// [ 2, { username: 'LiangJunrong' } ]

可以看到的是，它和前面的 concat() 表现的浅拷贝一模一样，如果小伙伴希望研究更深层次的内容，可以看下 Array.prototype.concat() 和 Array.prototype.slice() 的源码具体实现。

4.5 ...obj 展开运算符

返回目录

展开运算符是 ES6 中新提出来的一种运算符。

在拷贝数组、对象以及拼接数组等方面都可以使用。

这边我们也可以尝试下使用 const obj2 = {...obj1} 的形式进行浅拷贝。

/**
 * @name ...obj拷贝数组
 */
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // like arr.slice()
arr2.push(4); 

console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3, 4 ]

/**
 * @name ...obj拷贝对象
 */
const obj1 = {
  name: 'jsliang',
  arr1: ['1', '2', '3'],
  obj: {
    name: 'JavaScriptLiang',
    arr2: ['4', '5', '6'],
  },
};
const obj2 = {...obj1};
obj2.name = 'LiangJunrong';
obj2.arr1 = ['null'];
obj2.obj.name = 'jsliang';
obj2.obj.arr2 = ['null'];

console.log(obj1);
// { name: 'jsliang',
//   arr1: [ '1', '2', '3' ],
//   obj: { name: 'jsliang', arr2: [ 'null' ] } }
console.log(obj2);
// { name: 'LiangJunrong',
//   arr1: [ 'null' ],
//   obj: { name: 'jsliang', arr2: [ 'null' ] } }

五 深拷贝

返回目录

5.1 手写深拷贝

返回目录

---小节 1---

那么，手写深拷贝的话，要怎么实现呢？

我们尝试稍微修改下前面的浅拷贝代码：

const deepClone = (source) => {
  const target = {};
  for (const i in source) {
    if (source.hasOwnProperty(i)
      && target[i] === 'object') {
      target[i] = deepClone(source[i]); // 注意这里
    } else {
      target[i] = source[i];
    }
  }
  return target;
};

当然，这份代码是存在问题的：

  1. 没有对参数进行校验，如果传入进来的不是对象或者数组，我们直接返回即可。
  2. 通过 typeof 判断是否对象的逻辑不够严谨。

---小节 2---

既然存在问题，那么我们就需要尝试克服：

// 定义检测数据类型的功能函数
const checkedType = (target) => {
  return Object.prototype.toString.call(target).slice(8, -1);
}

// 实现深度克隆对象或者数组
const deepClone = (target) => {
  // 判断拷贝的数据类型
  // 初始化变量 result 成为最终数据
  let result, targetType = checkedType(target);
  if (targetType === 'Object') {
    result = {};
  } else if (targetType === 'Array') {
    result = [];
  } else {
    return target;
  }

  // 遍历目标数据
  for (let i in target) {
    // 获取遍历数据结构的每一项值
    let value = target[i];
    // 判断目标结构里的每一项值是否存在对象或者数组
    if (checkedType(value) === 'Object' || checkedType(value) === 'Array') {
      // 如果对象或者数组中还嵌套了对象或者数组，那么继续遍历
      result[i] = deepClone(value);
    } else {
      result[i] = value;
    }
  }

  // 返回最终值
  return result;
}

const obj1 = [
  1,
  'Hello!',
  { name: 'jsliang1' },
  [
    {
      name: 'LiangJunrong1',
    }
  ],
]
const obj2 = deepClone(obj1);
obj2[0] = 2;
obj2[1] = 'Hi!';
obj2[2].name = 'jsliang2';
obj2[3][0].name = 'LiangJunrong2';

console.log(obj1);
// [
//   1,
//   'Hello!',
//   { name: 'jsliang1' },
//   [
//     { name: 'LiangJunrong1' },
//   ],
// ]

console.log(obj2);
// [
//   2,
//   'Hi!',
//   { name: 'jsliang2' },
//   [
//     { name: 'LiangJunrong2' },
//   ],
// ]

下面讲解下这份深拷贝代码：

首先，我们先看检查类型的那行代码：Object.prototype.toString.call(target).slice(8, -1)。

在说这行代码之前，我们先对比下检测 JavaScript 数据类型的 4 种方式：

  • 方式一：typeof：无法判断 null 或者 new String() 等数据类型。
  • 方式二：instanceof：无法判断 'jsliang'、123 等数据类型。
  • 方式三：constructor：判断 null 和 undefined 会直接报错。
  • 方式四：Object.prototype.toString.call()：稳健地判断 JavaScript 数据类型方式，可以符合预期的判断基本数据类型 String、Undefined 等，也可以判断 Array、Object 这些引用数据类型。

详细研究可以看 jsliang 的学习文档：

然后，我们通过方法 targetType() 中的 Object.prototype.toString.call()，判断传入的数据类型属于那种，从而改变 result 的值为 {}、[] 或者直接返回传入的值（return target）。

最后，我们再通过 for...in 判断 target 的所有元素，如果属于 {} 或者 []，那么就递归再进行 clone() 操作；如果是基本数据类型，则直接传递到数组中……从而在最后返回一个深拷贝的数据。

---小节 3---

以上，我们的代码看似没问题了是不是？假设我们需要拷贝的数据如下：

const obj1 = {};
obj1.a = obj1;
console.log(deepClone(obj1));
// RangeError: Maximum call stack size exceeded

看，我们直接研制了个死循环出来！

那么我们需要怎么解决呢？有待实现！

乘我还没找到教好的解决方案之前，小伙伴们可以看下下面文章，思考下是否能解决这个问题：

……好的，虽然口头说着希望小伙伴们自行翻阅资料，但是为了防止被寄刀片，jsliang 还是在这里写下自己觉得 OK 的代码：

function isObject(obj) {
  return Object.prototype.toString.call(obj) === '[object Object]';
}

function deepClone(source, hash = new WeakMap()) {
  if (!isObject(source)) return source;
  // 新增代码，查哈希表
  if (hash.has(source)) return hash.get(source);

  var target = Array.isArray(source) ? [] : {};
  // 新增代码，哈希表设值
  hash.set(source, target);

  for (var key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (isObject(source[key])) {
        // 新增代码，传入哈希表
        target[key] = deepClone(source[key], hash);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}

/**
 * @name 正常深拷贝测试
 */
const a = {
  name: 'jsliang',
  book: {
    title: '深拷贝学习',
    price: 'free',
  },
  a1: undefined,
  a2: null,
  a3: 123
};
const b = deepClone(a);
b.name = 'JavaScriptLiang';
b.book.title = '教你如何泡妞';
b.a3 = 456;
console.log(a);
// { name: 'jsliang',
//   book: { title: '深拷贝学习', price: 'free' },
//   a1: undefined,
//   a2: null,
//   a3: 123 }
console.log(b);
// { name: 'JavaScriptLiang',
//   book: { title: '教你如何泡妞', price: 'free' },
//   a1: undefined,
//   a2: null,
//   a3: 456 }

/**
 * @name 解决死循环
 */
const c = {};
c.test = c;
const d = deepClone(c);
console.log(c);
// { test: [Circular] }
console.log(d);
// { test: [Circular] }

---小节 4---

既然搞定完死循环，咱们再看看另一个问题：

const checkedType = (target) => {
  return Object.prototype.toString.call(target).slice(8, -1);
}

const deepClone = (target) => {
  let result, targetType = checkedType(target);
  if (targetType === 'Object') {
    result = {};
  } else if (targetType === 'Array') {
    result = [];
  } else {
    return target;
  }

  for (let i in target) {
    let value = target[i];
    if (checkedType(value) === 'Object' || checkedType(value) === 'Array') {
      result[i] = deepClone(value);
    } else {
      result[i] = value;
    }
  }

  return result;
}

// 检测深度和广度
const createData = (deep, breadth) => {
  const data = {};
  let temp = data;

  for (let i = 0; i < deep; i++) {
    temp = temp['data'] = {};
    for (let j = 0; j < breadth; j++) {
      temp[j] = j;
    }
  }

  return data;
};

console.log(createData(1, 3)); 
// 1 层深度，每层有 3 个数据 { data: { '0': 0, '1': 1, '2': 2 } }

console.log(createData(3, 0));
// 3 层深度，每层有 0 个数据 { data: { data: { data: {} } } }

console.log(deepClone(createData(1000)));
// 1000 层深度，无压力 { data: { data: { data: [Object] } } }

console.log(deepClone(createData(10, 100000)));
// 100000 层广度，没问题，数据遍历需要时间

console.log(deepClone(createData(10000)));
// 10000 层深度，直接爆栈：Maximum call stack size exceeded

是的，你的深拷贝爆栈了！！！

虽然业务场景中可能爆栈的概率比较少，毕竟数据层级没那么多，但是还是会存在这种情况，需要怎么处理呢？

只想大致了解深拷贝可能出现问题的小伙伴可以跳过下面内容

举个例子，假设有数据结构：

const a = {
  a1: 1,
  a2: {
    b1: 1,
    b2: {
      c1: 1
    }
  }
};

如果我们将其当成数来看：

    a
  /   \
 a1   a2        
 |    / \         
 1   b1 b2     
     |   |        
     1  c1
         |
         1

那么，我们就可以采用迭代的方法，循环遍历这棵树了！

  1. 首先，我们需要借助栈。当栈为空就遍历完毕，栈里面存储下一个需要拷贝的节点
  2. 然后，往栈里放入种子数据，key 用来存储哪一个父元素的那一个子元素拷贝对象
  3. 最后，遍历当前节点下的子元素，如果是对象就放到栈里，否则直接拷贝。
const deepClone = (x) => {
  const root = {};

  // 栈
  const loopList = [
    {
      parent: root,
      key: undefined,
      data: x
    }
  ];

  while (loopList.length) {
    // 深度优先
    const node = loopList.pop();
    const parent = node.parent;
    const key = node.key;
    const data = node.data;

    // 初始化赋值目标，key 为 undefined 则拷贝到父元素，否则拷贝到子元素
    let res = parent;
    if (typeof key !== "undefined") {
      res = parent[key] = {};
    }

    for (let k in data) {
      if (data.hasOwnProperty(k)) {
        if (typeof data[k] === "object") {
          // 下一次循环
          loopList.push({
            parent: res,
            key: k,
            data: data[k]
          });
        } else {
          res[k] = data[k];
        }
      }
    }
  }

  return root;
}

这时候我们再通过 createData 进行广度和深度校验，会发现：

console.log(deepClone(createData(10, 100000)));
// 100000 层广度，没问题，数据遍历需要时间

console.log(deepClone(createData(100000)));
// 100000 层深度，也没问题了：{ data: { data: { data: [Object] } } }

这样，我们就解决了爆栈的问题。

这里推荐下引用思路来源于大佬的文章：深拷贝的终极探索，然后它附带了一个深拷贝库：@jsmini/clone，感兴趣的小伙伴可以去看看。

5.2 JSON.parse(JSON.stringify())

返回目录

其实利用工具，达到目的，是非常聪明的做法，下面我们讨论下 JSON.parse(JSON.stringify())。

  • JSON.stringify()：将对象转成 JSON 字符串。
  • JSON.parse()：将字符串解析成对象。

通过 JSON.parse(JSON.stringify()) 将 JavaScript 对象转序列化（转换成 JSON 字符串），再将其还原成 JavaScript 对象，一去一来我们就产生了一个新的对象，而且对象会开辟新的栈，从而实现深拷贝。

注意，该方法的局限性：
1、不能存放函数或者 Undefined，否则会丢失函数或者 Undefined；
2、不要存放时间对象，否则会变成字符串形式；
3、不能存放 RegExp、Error 对象，否则会变成空对象；
4、不能存放 NaN、Infinity、-Infinity，否则会变成 null；
5、……更多请自行填坑，具体来说就是 JavaScript 和 JSON 存在差异，两者不兼容的就会出问题。

const arr1 = [
  1,
  {
    username: 'jsliang',
  },
];

let arr2 = JSON.parse(JSON.stringify(arr1));
arr2[0] = 2;
arr2[1].username = 'LiangJunrong';
console.log(arr1);
// [ 1, { username: 'jsliang' } ]
console.log(arr2);
// [ 2, { username: 'LiangJunrong' } ]

5.3 函数库 Lodash

返回目录

Lodash 作为一个深受大家喜爱的、优秀的 JavaScript 函数库/工具库，它里面有非常好用的封装好的功能，大家可以去试试：

这里我们查看下它的 cloneDeep() 方法：

可以看到，该方法会递归拷贝 value。

在这里，我们体验下它的 cloneDeep()：

//  npm i -S lodash
var _ = require('lodash');

const obj1 = [
  1,
  'Hello!',
  { name: 'jsliang1' },
  [
    {
      name: 'LiangJunrong1',
    }
  ],
]
const obj2 = _.cloneDeep(obj1);
obj2[0] = 2;
obj2[1] = 'Hi!';
obj2[2].name = 'jsliang2';
obj2[3][0].name = 'LiangJunrong2';

console.log(obj1);
// [
//   1,
//   'Hello!',
//   { name: 'jsliang1' },
//   [
//     { name: 'LiangJunrong1' },
//   ],
// ]

console.log(obj2);
// [
//   2,
//   'Hi!',
//   { name: 'jsliang2' }, 
//   [
//     { name: 'LiangJunrong2' },
//   ],
// ]

这里我们使用的是 Node 安装其依赖包的形式，如果需要用 MDN 等，小伙伴可以前往它官网瞅瞅。（地址在本节开头）

5.4 框架 jQuery

返回目录

当然，不可厚非你的公司还在用着 jQuery，可能还需要兼容 IE6/7/8，或者你使用 React，但是有些场景还使用了 jQuery，毕竟 jQuery 是个强大的框架。

下面我们尝试下使用 jQuery 的 extend() 进行深拷贝：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>尝试 jQuery 深拷贝</p>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>
    $(function() {
      const obj1 = [
        1,
        'Hello!',
        { name: 'jsliang1' },
        [
          {
            name: 'LiangJunrong1',
          }
        ],
      ]
      const obj2 = {};
      /**
       * @name jQuery深拷贝
       * @description $.extend(deep, target, object1, object2...)
       * @param {Boolean} deep 可选 true 或者 false，默认是 false，所以一般如果需要填写，最好是 true。
       * @param {Object} target 需要存放的位置
       * @param {Object} object 可以有 n 个原数据
       */
      $.extend(true, obj2, obj1);
      obj2[0] = 2;
      obj2[1] = 'Hi!';
      obj2[2].name = 'jsliang2';
      obj2[3][0].name = 'LiangJunrong2';

      console.log(obj1);
      // [
      //   1,
      //   'Hello!',
      //   { name: 'jsliang1' },
      //   [
      //     { name: 'LiangJunrong1'},
      //   ],
      // ];

      console.log(obj2);
      // [
      //   2,
      //   'Hi!',
      //   { name: 'jsliang2' },
      //   [
      //     { name: 'LiangJunrong2' },
      //   ],
      // ];
    });
  </script>
</body>
</html>

这里由于 Node 直接引用包好像没尝试成功，所以咱通过 index.html 的形式，引用了 jQuery 的 CDN 包，从而尝试了它的深拷贝。

推荐通过 live-server 来实时监控 HTML 文件的变化

如果需要查看 jQuery.extend() 源码可以观看文章：
《深拷贝与浅拷贝的实现（一）》
《JavaScript 浅拷贝和深拷贝》

jQuery.extend 源码

jQuery.extend = jQuery.fn.extend = function() {
  var options,
    name,
    src,
    copy,
    copyIsArray,
    clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

  // Handle a deep copy situation
  if (typeof target === "boolean") {
    deep = target;

    // Skip the boolean and the target
    target = arguments[i] || {};
    i++;
  }

  // Handle case when target is a string or something (possible in deep copy)
  if (typeof target !== "object" && !jQuery.isFunction(target)) {
    target = {};
  }

  // Extend jQuery itself if only one argument is passed
  if (i === length) {
    target = this;
    i--;
  }

  for (; i < length; i++) {
    // Only deal with non-null/undefined values
    if ((options = arguments[i]) != null) {
      // Extend the base object
      for (name in options) {
        src = target[name];
        copy = options[name];

        // Prevent never-ending loop
        if (target === copy) {
          continue;
        }

        // Recurse if we're merging plain objects or arrays
        if (
          deep &&
          copy &&
          (jQuery.isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))
        ) {
          if (copyIsArray) {
            copyIsArray = false;
            clone = src && Array.isArray(src) ? src : [];
          } else {
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }

          // Never move original objects, clone them
          target[name] = jQuery.extend(deep, clone, copy);

          // Don't bring in undefined values
        } else if (copy !== undefined) {
          target[name] = copy;
        }
      }
    }
  }
  // Return the modified object
  return target;
};

六 总结

返回目录

很遗憾，我们就这样暂时完成了 浅拷贝和深拷贝 的第一期探索啦~

在写这系列内容中，jsliang 犹豫过，熬夜过，想放弃过……但还是坚持下来，过了一遍。

在查资料丰富这系列知识的过程中，jsliang 忽略了一些知识点探索，要不然会产生更多的疑惑，最终天天通宵达旦到晚上 04:00 还在精神抖擞折腾~

我们还未深入的一些点有：

  1. Lodash 如何实现深拷贝
  2. jQuery 如何实现深拷贝
  3. Object.assign 原理及其实现
  4. ……

可能有些小伙伴会觉得：

  • 啊，你不先折腾完，彻彻底底搞清楚，就发表出来，你不觉得羞耻吗！

enm...怎么说，首先在写这篇文章的时候，jsliang 做的是广度探索，即碰到的每一个知识点都接触了解一下，其实这样写非常累，但是进步是非常大的，因为你把一些知识点都挖掘出来了。

然后，jsliang 一开始的目标，只是想了解下手写深拷贝，以及一些工具快速实现深拷贝，所以个人觉得本次目标已经达到甚至超标了。

最后，还有一些知识点，例如手写一个 Object.assign() 或者了解 Lodash 的深拷贝源码，其实希望进一步了解的小伙伴，肯定会自行先探索，当然如果小伙伴希望有 “前人躺坑”，那么可以期待我的后续完善。

毕竟：不折腾的前端，跟咸鱼有什么区别！

所以，如果小伙伴们想持续跟进，可以到 jsliang 的 GitHub 仓库 首页找到我的公众号、微信、QQ 等联系方式。

那么，我们后期再会~

  • 参考文献：
  1. Lodash clone 系列
  2. 浅拷贝与深拷贝
  3. 深拷贝的终极探索
  4. 深拷贝与浅拷贝的实现（一）
  5. 深入浅出深拷贝与浅拷贝
  6. 什么是 js 深拷贝和浅拷贝及其实现方式
  7. JavaScript 浅拷贝和深拷贝
  8. js 深拷贝 vs 浅拷贝
  9. 深拷贝的终极探索（99%的人都不知道）
  10. 面试题之如何实现一个深拷贝

jsliang 广告推送：
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴需要续费云服务器
欢迎点击 云服务器推广 查看！

知识共享许可协议
jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/LiangJunron…上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

avatar
文章
阅读
粉丝