在 JavaScript 中，了解浅拷贝和深拷贝，对于有效管理数据和防止出现意外的副作用至关重要。我们先来了解数据的存储方式。

基本数据类型

首先看看基本数据类型：https://developer.mozilla.org/zh-CN/docs/Glossary/Primitive

在 Quokka 中，创建一个新的变量，通过 log 观察变量的值。

将变量赋值给一个新变量 s2，实际上是创建了该值的副本。

修改 s2 的值，s1 的值仍然保持不变。测试

let s1 = 'bilibili'
console.log(s1)   // 'bilibili'

let s2 = s1
console.log(s2)   // 'bilibili'

s2 = 'qq'
console.log(s2)   // 'qq'
console.log(s1);  // 'bilibili'

这是因为基本数据类型的值存放在栈中，分别存放的是自己的值。

引用数据类型（数组和对象）

与基本数据类型不同，数组和对象属于引用数据类型。我们先将数组 a1 赋值给 a2。

const a1 = [1, 2, 3]
console.log(a1)    // [1, 2, 3]

const a2 = a1
console.log(a2)

当我们修改 a2 的元素时，a1 也随之改变了。

a2[1] = 6
console.log(a2)    // [1, 6, 3]
console.log(a1)    // [1, 6, 3]

引用类型赋值，是将对象的内存地址赋值到另一个对象，两个变量指向堆内存中同一个对象。

浅拷贝

那么，是否可以通过浅拷贝来解决这个问题呢？

循环赋值

经典的封装方法是创建一个新的对象或数组，并将源对象或数组的可枚举属性依次复制到新的对象或数组中。

function shallowCopy(obj) {
    const newObj = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
        if(obj.hasOwnProperty(key)){
            newObj[key] = obj[key]
        }
    }
    return newObj
}

Object.assign()

ES6 引入了 Object.assign() 方法，它可以将一个或多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象。

const a2 = Object.assign([], a1);

展开语法

还可以使用展开语法 …，它提供了一种更简洁的方式来实现浅拷贝。

const a2 = [...a1]

深拷贝

那么什么是深拷贝呢？我们创建一个新的对象，包括一个字符串和一个嵌套的数组。

const o1 = {
    s: 'bilibili',
    a: [1, 2, 3]
}
console.log(o1)    // { s: 'bilibili', a: [1, 2, 3] }

使用展开运算符创建了 o1 的浅拷贝 o2。

const o2 = { ...o1 }
console.log(o2)    // { s: 'bilibili', a: [1, 2, 3] }

虽然 o2 看起来像是 o1 的独立副本，但结果是修改 o2.a 也会影响 o1.a。

o2.a[1] = 6
console.log(o2)    // { s: 'bilibili', a: [1, 6, 3] }
console.log(o1)    // { s: 'bilibili', a: [1, 6, 3] }

这是因为浅拷贝意味着我们只得到了第一层的拷贝。也就是说，数组属性被复制到对同一数组的引用，不会创建嵌套对象或数组的副本。

递归赋值

因此为了实现深拷贝，需要递归地复制所有嵌套的对象或数组，确保每个属性值都是独立的副本。

function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  if (obj instanceof Date) return new Date(obj)
  if( obj instanceof RegExp) return RegExp(obj)

  const newObj = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }

  return newObj;
}

展开语法

对于结构简单的对象或数组，可以手动在每个级别进行浅拷贝。

const o2 = {
    ...o1,
    a: [...o1.a]
}

JSON

另一种选择是利用 JSON 的特性，使用 JSON.stringify() 将对象转换成字符串，然后再使用 JSON.parse() 将字符串解析回对象。

const o2 = JSON.parse(JSON.stringify(o1))

这种方法简单有效，但对于不可枚举属性、函数、Symbol 等类型的数据将无法被正确地复制。

const o1 = {
    s: 'bilibili',
    a: [1, 2, 3],
    d: new Date(123)
}

Lodash

另外，Lodash 的 cloneDeep 函数也是这个问题的一个非常常见的解决方案。

import cloneDeep from 'lodash/cloneDeep'

const o1 = {
  s: 'bilibili',
  a: [1, 2, 3],
  d: new Date(123)
}

const o2 = cloneDeep(o1)

structuredClone

实际上，JavaScript 还提供了一个更便捷的新方法：structuredClone，使用结构化克隆算法将给定的值进行深拷贝。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/structuredClone

const o2 = structuredClone(o1)

支持刚刚说的 Date 对象等，但需要注意并非所有类型的值都能被克隆，比如函数。

更简单地说，下面列表中未提到的都不能被克隆：

✅Array
✅ArrayBuffer
✅Boolean
✅DataView
✅Date
✅Error 类型（仅限部分 Error 类型）。
✅Map
✅Object 对象：仅限简单对象（如使用对象字面量创建的）。
✅除 symbol 以外的基本类型。
✅RegExp：lastIndex 字段不会被保留。
✅Set
✅String
✅TypedArray

速度对比

接下来我们使用 Benchmark 对速度进行检测。

浅拷贝

首先是浅拷贝，对于简单数组：

const arr = [1, 2, 3]

展开语法明显较循环赋值和 Object.assign() 快得多。

对于复杂点的数组，比如包含 100 个元素的数组。

const arr = new Array(100).fill(6)

也是展开语法最快。

对于对象而言：

{
    s: 'bilibili',
    name: "John Doe",
    age: 30,
    isStudent: false,
    height: 175.5,
}

排名也是一样的。

测试一个包含了不同基本数据类型的属性值对象：

{
    name: "John Doe",
    age: 30,
    isStudent: false,
    height: 175.5,
    weight: 70,
    favoriteColor: "blue",
    birthYear: 1993,
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
    zipCode: "12345",
    homePhone: "555-1234",
    workPhone: "555-5678",
    hobby1: "reading",
    hobby2: "traveling",
    hobby3: "coding",
    hasPets: true,
    petName: "Buddy",
    petType: "dog",
    petAge: 2
}

差异更加明显。

深拷贝

接下来是深拷贝的速度对比，也是先从简单的结构开始。

return {
    s: 'bilibili',
    a: [1, 2, 3]
}

手动对层级使用展开语法，并引入 Lodash 的 clonedeep。

// 速度 Ops/s: 7,590,770
const d = {
    ...DATA
    a:[...DATA.a]
}

// 速度 Ops/s: 2,815,083
const d = lodashclonedeep(DATA)

结果也是展开语法最快。

但对于复杂结构，就不能一层层手动展开了。

{
    name: "John Doe",
    age: 30,
    isStudent: false,
    height: 175.5,
    weight: 70,
    favoriteColor: "blue",
    birthYear: 1993,
    address: {
        street: "123 Main St",
        city: "Anytown",
        state: "CA",
        zipCode: "12345"
    },
    phoneNumbers: [
        {
            type: "home",
            number: "555-1234"
        },
        {
            type: "work",
            number: "555-5678"
        }
    ],
    hobbies: ["reading", "traveling", "coding"],
    hasPets: true,
    pet: {
        name: "Buddy",
        type: "dog",
        age: 2,
        favoriteToys: ["bone", "ball"]
    },
    education: {
        highSchool: {
            name: "Anytown High School",
            graduationYear: 2011
        },
        college: {
            name: "Anytown University",
            graduationYear: 2015
        }
    },
    workExperience: [
        {
            company: "Tech Corp",
            position: "Software Engineer",
            startDate: "2015-01-01",
            endDate: "2018-01-01"
        },
        {
            company: "Innovate Inc",
            position: "Senior Software Engineer",
            startDate: "2018-01-01",
            endDate: "2020-01-01"
        }
    ],
    skills: {
        programmingLanguages: ["JavaScript", "Python", "Java"],
        tools: ["Git", "Docker", "VSCode"]
    },
    certifications: [
        {
            name: "Certified JavaScript Developer",
            issuingOrganization: "JS Institute",
            year: 2018
        },
        {
            name: "Certified Python Developer",
            issuingOrganization: "Python Academy",
            year: 2020
        }
    ]
}

速度排名依次是递归赋值、JSON、Lodash 和 structuredClone。

总结

浅拷贝
- 缺点：嵌套结构的更改会影响原始结构和副本，可能会导致意外行为。
- 优点：速度更快，占用的内存更少，适用于简单结构。
深复制
- 缺点：速度较慢且消耗更多内存，可能存在循环引用问题。
- 优点：更改不会影响原始副本，适用于复杂结构。

总的来说，浅拷贝和深拷贝各有优缺点。选择哪种方式取决于数据的结构和具体需求。

暂无评论，快来试试评论吧！

文章目录