vue 深拷贝

发布时间 2023-12-12 11:08:10作者: 醒日是归时

方法一: cloneDeep

import { cloneDeep } from 'lodash-es'

// 直接使用
const items = cloneDeep(multipleSelection)

方法二: ​通过JSON.parse(JSON.stringify(obj))

优缺点
满足一般使用场景,用JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象。
但这种方法的缺陷是会破坏原型链,并且无法拷贝属性值为function的属性

方法三:通过递归方式实现深拷贝

优缺点
比较全面的深拷贝,缺点是较为繁琐

//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空,并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}

注意:

Object.assign 是用于将一个或多个源对象的属性复制到目标对象中的方法。然而,需要注意的是,Object.assign 执行的是浅拷贝,而不是深拷贝。

浅拷贝意味着只有对象的属性被复制,而不是对象的嵌套属性。如果源对象的属性值是对象或数组,那么目标对象中的对应属性将保持对相同对象的引用,而不是复制这些对象的内容。