JS浅拷贝与深拷贝

前言

该文章记录一些js拷贝相关基本知识，慢慢将会添加更多相关拷贝赋值知识，所有内容均从网上整理而来，加上自己得理解做一个整合，方便工作中使用。

一、浅拷贝

浅拷贝简约来说只对对象的第一层复制，如果都是基础类型的数据，深浅拷贝都一样；如果是复杂类型的数据，那么浅拷贝无法拷贝

• 展开运算符(内容必须是都是基本数据类型)
• Object.assgin( {空对象}, 要复制的对象 )

  let arr = [{ name: '胡歌' }, { name: '李白' }]
  let obj = {
    a: { name: '胡歌' },
    b: { name: '李白' }
  }

  //浅拷贝
  //...扩展符
  let arr1 = [...arr]
  console.log(arr1 === arr)//输出false
  console.log(arr1[0] === arr[0])//输出true

  let obj1 = { ...obj }
  console.log(obj1 === obj)//输出false
  console.log(obj1.a === obj.a)//输出true
  
  //Object.assign()
  let arr2 = Object.assign([], arr)
  console.log(arr2 === arr)//输出false
  console.log(arr2[0] === arr[0])//输出true

  let obj2 = Object.assign({}, obj)
  console.log(obj2 === obj)//输出false
  console.log(obj2.a === obj.a)//输出true

二、深拷贝

深拷贝不仅仅复制对象本身，还复制对象中的属性和元素，通常情况不使用深拷贝

• structuredClone(value--被克隆的对象)
• JSON.parse(JSON.stringify(value--被克隆的对象))，缺点：
  • 如果有时间对象，时间将只是字符串的形式，而不是对象的形式
  • 如果 obj 里有 RegExp(正则表达式的缩写)、Error 对象，则序列化的结果将只得到空对象
  • 如果 obj 里有函数，undefined，则序列化的结果会把函数或 undefined丢失
  • 如果 obj 里有 NaN、Infinity 和-Infinity，则序列化的结果会变成 null
• Lodash --- JavaScript 实用工具库（其中有个方法：_.cloneDeep( value )）

  let arr = [{ name: '胡歌' }, { name: '李白' }]

  //浅拷贝
  let arr1 = [...arr]
  console.log(arr1[0] === arr[0])//输出true

  //深拷贝
  //structuredClone(value--被克隆的对象)
  let arr2 = structuredClone(arr)
  console.log(arr[0] === arr2[0]) //输出false

  //1.JSON.stringify(value) -->将对象全部复制转化为JSON字符串
  //2.JSON.parse( JSON字符串 ) -->将JSON字符串恢复成对象格式
  let arr3 = JSON.parse(JSON.stringify(arr))
  console.log(arr[0] === arr3[0]) //输出false