赋值与深浅拷贝详解

永远不会太晚

已于 2022-07-03 22:32:48 修改

阅读量2.1k

点赞数 2

文章标签：前端

于 2022-04-24 12:48:40 首次发布

本文链接：https://blog.csdn.net/qq_42611074/article/details/124380330

版权

赋值与深浅拷贝

JavaScript中存在两大数据类型：

基本类型，数据保存在在栈内存中
引用类型，数据保存在堆内存中，引用类型的变量是一个指向堆内存中实际对象的引用(指针)，存在栈中

赋值

赋值是将一个变量赋给另一个变量的操作

因为 JavaScript中的两大数据类型，所以赋值也分为两类：

1、基本类型：赋值，赋值之后两个变量互不影响

2、引用类型：赋址，实际上是把一个变量的地址赋给另一个变量，两个变量具有相同的引用，指向堆内存中同一个对象，修改其中一个变量的值，相互之间有影响

// 基本类型两个值不会互相影响
let a = "test"
let b = a
b = "change"
console.log(a, b)  // test change

// 引用类型的两个值会互相影响
let c = { name: "test" }
let d = c
d.name = "change"
console.log(c, d) // { name: "change" } { name: "change" }

let e = [0, 1, 2]
let f = e
f[0] = 4
console.log(e, f) // [4,1,2]

很多时候，我们想要的结果是两个初始值相同的变量互不影响，由上可知我们其实只需要处理引用类型的变量

所以就要使用到拷贝（分为深浅两种）来处理引用类型

我的理解是，赋值跟深浅拷贝是两个概念，可以理解为深浅拷贝是处理赋值中的引用类型的问题，深浅拷贝的原理是基于赋值的基本类型的特性

深浅拷贝定义

综上，让我们整理一下深浅拷贝的定义：

基本类型没有深浅拷贝的概念，从内存堆栈的角度来说，深浅拷贝只针对引用类型

浅拷贝

浅拷贝，拷贝一个引用类型的基本类型, 该引用类型中的引用类型则仍是相同引用
修改浅拷贝后的引用类型中的基本类型，不会影响原引用类型，修改浅拷贝后的引用类型中的引用类型，则会影响原引用类型
什么意思？举个例子，下方obj对象是一个引用类型，其基本类型为name,num，其引用类型为fisrtObj,testArr
浅拷贝后修改name，num基本类型不会影响原变量，而修改fisrtObj，testArr引用类型就会影响obj对象

const obj = {
  name: "name",
  num:0,
  fisrtObj: {
    name: "name"
  },
  testArr:[1,2,3]
}

对象浅拷贝

分别使用

遍历对象属性与值来新建对象
Object.assign
拓展运算符

遍历对象属性与值来新建对象

实现一个方法

function shallowClone(obj) {
    const newObj = {}
    for(let prop in obj) {
        if(obj.hasOwnProperty(prop)){
            newObj[prop] = obj[prop]
        }
    }
    return newObj
}

由输出结果，可知只是拷贝基本类型，引用类型则仍是相同引用，属于浅拷贝

const obj = {
  name: "name",
  testObj: {
    name: "name"
  }
}
const cloneObj = shallowClone(obj)
cloneObj.name = "test"
cloneObj.testObj.name = "test"
console.log(obj, cloneObj) 
// 打印结果：
//  {                  {
//  name: "name",       name: "test", 
//  testObj: {          testObj: {
//    name: "test"      name: "test"
//  }                     }
// }                    }

Object.assign

由输出结果，可知只是拷贝基本类型，引用类型则仍是相同引用，属于浅拷贝

const obj = {
  num: 0,
  arr: ["one", "two"],
}
const cloneObj = Object.assign({}, obj)
cloneObj.num = 10
cloneObj.arr[0] = "test"
console.log(obj, cloneObj)
// 打印结果：
//  {                       {
//    num: 0,                 num: 10, 
//    arr: ["test", "two"]    arr: ["test", "two"]
// }                         }

解构赋值

解构赋值属于赋值的概念，不属于深浅拷贝的概念

由输出结果，可知即使是基本类型的修改，也会影响原变量，因为没有拷贝原引用类型，所以不属于深浅拷贝

const obj = {
   testObj: {
     name: "name"
  }
}
const { testObj } = obj
testObj.name = "test"
console.log(obj, testObj)
// 打印结果：
//  {                        
//    testObj: {             {
//      name: "test"            name: "test"
//    }                      }
// }

拓展运算符

由输出结果，可知只是拷贝基本类型，引用类型则仍是相同引用，属于浅拷贝

const obj = {
   testObj: {
     name: "name",
     arr: [1, 2, 3]
  }
}
// 属于赋值，不属于深浅拷贝
const { testObj } = obj
testObj.name = "test"
testObj.arr[0] = [4]
// 拓展运算符，属于浅拷贝
const cloneObj = { ...testObj }
cloneObj.name = "last" // 修改基本类型不会影响原引用类型
cloneObj.arr[1] = [5]  // 浅拷贝修改引用类型仍是相同引用
console.log(obj, testObj, cloneObj)
// 打印结果：
//  {                        
//    testObj: {        {                   {
//      name: "test",     name: "test",       name: "last",
//      arr: [4, 5, 3]    arr: [4, 5, 3]      arr: [4, 5, 3]
//    }                 }                   }
// }

数组浅拷贝

分别使用slice, concat,拓展运算符

slice

由输出结果，可知只是拷贝基本类型，引用类型则仍是相同引用，属于浅拷贝

const arr = [{ name: "name" }, "one", "two"]
const cloneArr = arr.slice(0)
cloneArr[0].name = "test"
cloneArr[1] = "three"
console.log(arr, cloneArr) // [{ name: "test" }, "one", "two"]  [{ name: "test" }, "three", "two"]

concat

由输出结果，可知只是拷贝基本类型，引用类型则仍是相同引用，属于浅拷贝

const arr = [{ name: "name" }, "one", "two"]
const cloneArr = arr.concat([])
cloneArr[0].name = "test"
cloneArr[1] = "three"
console.log(arr, cloneArr) // [{ name: "test" }, "one", "two"]  [{ name: "test" }, "three", "two"]

拓展运算符

由输出结果，可知只是拷贝基本类型，引用类型则仍是相同引用，属于浅拷贝

const arr = [{ name: "name" }, "one", "two"]
const cloneArr = [...arr]
cloneArr[0].name = "test"
cloneArr[1] = "three"
console.log(arr, cloneArr) // [{ name: "test" }, "one", "two"]  [{ name: "test" }, "three", "two"]

深拷贝

深拷贝完全拷贝一个引用类型，不但拷贝了这个引用类型中的所有基本类型，还为这个引用类型中的所有的引用类型开辟新栈新堆新指针

所以修改一个深拷贝后的引用类型的属性或元素，不会影响原引用类型的属性或元素，无论是修改其属性或元素中的基本类型还是引用类型

常用的深拷贝方法

JSON.parse(JSON.stringify())
循环递归

JSON.parse(JSON.stringify())

const obj2= JSON.parse(JSON.stringify(obj1))

JSON.stringify()：用于将JavaScript值转换为JSON字符串
JSON.parse()：用于将一个JSON字符串转换为JavaScript对象

但是这种方式存在局限性，会忽略undefined、symbol和函数

const obj = {
    name: 'A',
    name1: undefined,
    name3: function() {},
    name4: Symbol('A')
}
const obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj2) // {name: "A"}

循环递归

写法不是固定的，自行写得出一种即可

function deepClone(source) {
  const targetObj = source.constructor === Array ? [] : {} // 判断复制的目标是数组还是对象
  for (let keys in source) {
    // 遍历目标
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') {
        // 如果值是对象，就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {}
        targetObj[keys] = deepClone(source[keys])
      } else {
        // 如果不是，就直接赋值
        targetObj[keys] = source[keys]
      }
    }
  }
  return targetObj
}
const obj = {
  num: 0,
  testObj: {
    name: "name"
  }
}

const shallowobj = obj
const deepobj = deepClone(obj)
// 浅拷贝
shallowobj.num = 1
shallowobj.testObj.name = "test"
// 深拷贝
deepobj.num = 2
deepobj.testObj.name = "last"
console.log(obj) 
console.log(shallowobj) 
console.log(deepobj) 
// 打印结果：
//  {   
//    num:1,            num:1,              num:2
//    testObj: {        {                   {
//      name: "test",     name: "test",       name: "last",
//    }                 }                   }
// }