谈谈前端工具包中对象、数组的深拷贝函数封装

2023-10-14 13:46:46

在前端开发中，我们经常会封装一些公共函数来作为我们的工具来简化代码或者复用代码，而其中最常见的就是对象、数组的深拷贝函数了。

在理解深拷贝之前，我们先来回顾一下浅拷贝，在JavaScript中，对象和数组都是引用类型，也就是说，当我们给一个变量赋值一个对象或数组时，实际上是把这个对象的引用赋值给了这个变量，而不是把对象本身赋值给了这个变量。因此，如果我们对这个变量进行修改，那么原始对象也会受到影响。

而深拷贝就是为了解决这个问题而诞生的，深拷贝是指将一个对象或数组的所有属性和值复制到一个新的对象或数组中，这样我们就可以对这个新的对象或数组进行修改，而不会影响到原始对象或数组。

实现深拷贝的方法有很多，其中最常见的就是递归。我们可以使用递归来遍历对象或数组的所有属性和值，然后将它们复制到一个新的对象或数组中。

下面我们来看一下如何封装一个深拷贝函数：

function deepClone(obj) {
  // 如果是基本类型，直接返回
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 如果是数组，使用Array.prototype.slice()进行深拷贝
  if (Array.isArray(obj)) {
    return obj.slice();
  }

  // 如果是对象，使用Object.assign()进行深拷贝
  if (typeof obj === 'object') {
    return Object.assign({}, obj);
  }

  // 如果是其他类型，直接返回
  return obj;
}

这个函数可以对任何类型的数据进行深拷贝，包括对象、数组、字符串、数字、布尔值等。

在使用这个函数时，我们可以像这样：

const obj = {
  name: '张三',
  age: 18,
  hobbies: ['篮球', '足球', '游泳']
};

const newObj = deepClone(obj);

newObj.name = '李四';
newObj.hobbies.push('跑步');

console.log(obj); // { name: '张三', age: 18, hobbies: ['篮球', '足球', '游泳'] }
console.log(newObj); // { name: '李四', age: 18, hobbies: ['篮球', '足球', '游泳', '跑步'] }