阅读 5004

浅拷贝和深拷贝(较为完整的探索)

开篇点题:

  • 本文将用递归学习的方式探索关于《浅拷贝和深拷贝》中涉及的知识点,希望小伙伴们在脑海中深拷贝这些知识点,在面试或者工作中能够灵活使用。
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...infor...of 相似,于是分别查了 for...infor...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() 不会改变原数组。

详细可以看下 jsliangconcat 或者直接看 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:判断 nullundefined 会直接报错。
  • 方式四: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 的深拷贝源码,其实希望进一步了解的小伙伴,肯定会自行先探索,当然如果小伙伴希望有 “前人躺坑”,那么可以期待我的后续完善。

毕竟:不折腾的前端,跟咸鱼有什么区别!

所以,如果小伙伴们想持续跟进,可以到 jsliangGitHub 仓库 首页找到我的公众号、微信、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… 处获得。

关注下面的标签,发现更多相似文章
评论