浅拷贝的五种实现方式

浅拷贝的五种实现方式

浅拷贝与深拷贝是一道经久不衰的面试题，今日先总结一下有哪些浅拷贝的方式，以及各自的优缺点

首先，看一下什么是浅拷贝

自己创建一个新的对象，来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型，复制的就是基本类型的值给新对象；但如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，肯定会影响到另一个对象。

Object.assign

Object.assign 是 Object 的一个方法，该方法可以用于 JS 对象的合并等多个用途，其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象，后面的参数是拷贝的来源对象（也可以是多个来源）。

const obj = {};
const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};

Object.assign(obj, source);
console.log(obj); // {name: 'nordon', info: {…}}
复制代码

如此很便捷的完成了钱拷贝，接下来可以修改一下数据

source.info.age = 20;
console.log(obj);
console.log(source);
复制代码

修改之后，obj和source的age都变成了20，满足浅拷贝定义

注意点：

• 它不会拷贝对象的继承属性；
• 它不会拷贝对象的不可枚举的属性；
• 可以拷贝 Symbol 类型的属性。

const obj = {};

const source = {
  name: 'nordon',
  symbol: Symbol()
};

Object.defineProperty(source, 'innumerable' ,{
    value:'innumerable',
    enumerable:false
});

Object.assign(obj, source);
console.log(obj); // {name: 'nordon', symbol: Symbol()}
复制代码

常见的继承属性toString等也并没有被Object.assign浅拷贝过来

扩展运算符

使用扩展运算符也可以完成浅拷贝

const source = {
  name: 'nordon',
  info: {
    age: 18
  }
};
const obj = {...source};

Object.assign(obj, source);
source.info.age = 20;
console.log(obj);
console.log(source);
复制代码

上述代码和使用Object.assign功能相同，其注意事项也相同，两者在使用上基本是可以相互转换

Array.prototype.concat

数组的 concat 方法其实也是浅拷贝，使用场景比较少，使用concat连接一个含有引用类型的数组时，需要注意修改原数组中的元素的属性，因为它会影响拷贝之后连接的数组

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.concat();
newArr[2].name = 'wy';
console.log(arr); 
console.log(newArr);
复制代码

会发现arr和newArr索引2的数据都由**{name: 'nordon'}变成了{name: 'wy'}**

Array.prototype.slice

数组的 slice 方法其实也是浅拷贝，使用场景比较少，同cancat

const arr = [1, 2, {name: 'nordon'}];
const newArr = arr.slice();
newArr[2].name = 'wy';
复制代码

使用第三方库&手动实现

社区存在一些优秀工具函数库，在开发过程中可以直接利用这些库暴露的函数直接实现浅拷贝，比如lodash就提供了clone方法供用户进行浅拷贝

最终让我们自己动手实现一个浅拷贝函数

根据前文浅拷贝的定义，可以明确知道浅拷贝核心点在于：

• 对于基础数据类型数据直接拷贝
• 对于引用类型数据仅拷贝第一层对象的属性，重新开辟一个地址将其存储（深拷贝和浅拷贝的重要差异）

接下来直接上代码：

const clone = (target) => {
  // 如果是引用类型
  if (typeof target === "object" && target !== null) {
    // 判断是数据还是对象，为其初始化一个数据
    const cloneTarget = Array.isArray(target) ? [] : {};
    
    // for in 可以遍历数组 对象
    for (let prop in target) {
      if (target.hasOwnProperty(prop)) {
        cloneTarget[prop] = target[prop];
      }
    }

    return cloneTarget;
  } else {
    // 基础类型 直接返回
    return target;
  }
};