关于javascript:js深拷贝和浅拷贝

浅拷贝与深拷贝的区别

1. 解释:

   • 浅拷贝: 只是复制了对象属性或数组元素自身 (只是援用地址值)
   • 深拷贝: 不仅复制了对象属性或数组元素自身, 还复制了指向的对象 (应用递归)

2. 举例:

   • 浅拷贝: 只是拷贝了每个 person 对象的援用地址值, 每个 person 对象只有一份
   • 深拷贝: 每个 person 对象也被复制了一份新的

浅拷贝实现

1. 利用 ES6 语法

function shadowClone1(target) {
 // 如果是数组
 if (target instanceof Array) {
 /*
 应用数组的一些办法
 - return [...target]
 - return target.slice()
 - return [].concat(target)
 - return Array.from(target)
 - return target.filter(value => true)
 - return target.map(item => item)
 */
 return target.reduce((pre, item) => {
 // reduse, 不好了解的话用下面的都能够
 pre.push(item)
 return pre
 }, [])
 } else if (target !== null && typeof target === 'object') {
 // 是对象用三点
 return {...target}
 } else {
 // 如果不是数组或对象, 间接返回
 return target
 }
}
  
// 测试
const person = {name: '小通', age: 24, hobbies: ['篮球', '跑步'] }
const clonePerson = shadowClone1(person)
// 往克隆的喜好中增加一项
clonePerson.hobbies.push('打代码')
// 后果 person 和 clonePerson 中的 hobbies 都增加了
console.log(person.hobbies) // ['篮球','跑步','打代码']
console.log(clonePerson.hobbies) // ['篮球','跑步','打代码']

1. 利用 ES5 语法

function shadowClone2(target) {
 // 被解决的指标是数组 / 对象
 if (
 target instanceof Array ||
 (target !== null && typeof target === 'object')
 ) {
 // 依据 target instanceof Array 创立类型或对象
 const cloneTarget = target instanceof Array ? [] : {}
 // 循环遍历
 for (const key in target) {
 // 判断一下只拷贝本人身上的属性, 疏忽原型上的
 if (target.hasOwnProperty(key)) {cloneTarget[key] = target[key]
 }
 }
 // 返回
 return cloneTarget
 } else {
 // 如果不是数组或对象间接反回
 return target
 }
}
  
// 测试
const person = {name: '小通', age: 24, hobbies: ['篮球', '跑步'] }
const clonePerson = shadowClone2(person)
// 往克隆的喜好中增加一项
clonePerson.hobbies.push('打代码')
// 后果 person 和 clonePerson 中的 hobbies 都增加了
console.log(person.hobbies) // ['篮球','跑步','打代码']
console.log(clonePerson.hobbies) // ['篮球','跑步','打代码']

实现深拷贝

1. 投机取巧版: JSON.stringify 和 JSON.parse–(有问题)

   • 函数属性会失落
   • 循环援用会出错

   • 代码:

     function deepClone1(target) {return JSON.parse(JSON.stringify(target))
     }
     // 测试
     const person = {name: '小通', age: 24, hobbies: ['篮球', '跑步'] }
     const clonePerson = shadowClone1(person)
     // 往克隆的喜好中增加一项
     clonePerson.hobbies.push('打代码')
     // 对象数组没故障
     console.log(person.hobbies) //  ['篮球', '跑步']
     console.log(clonePerson.hobbies) // ['篮球','跑步','打代码']

2. 根底版本

/* 
 解决了: 函数属性会失落
 问题: 循环援用会出错
 */
function deepClone2(target) {
 // 被解决的指标是数组 / 对象
 if (
 target instanceof Array ||
 (target !== null && typeof target === 'object')
 ) {
 // 依据 target instanceof Array 创立类型或对象
 const cloneTarget = target instanceof Array ? [] : {}
 // 遍历一波
 for (const key in target) {
 // 判断一下只拷贝本人身上的属性, 疏忽原型上的
 if (target.hasOwnProperty(key)) {
 // 对属性值进行递归解决
 cloneTarget[key] = deepClone2(target[key])
 }
 }
 return cloneTarget
 } else {return target}
}
// 测试
const person = {name: '小通', age: 24, hobbies: ['篮球', '跑步'] }
const clonePerson = deepClone2(person)
// 往克隆的喜好中增加一项
clonePerson.hobbies.push('打代码')
// 没故障
console.log(person.hobbies) //  ['篮球', '跑步']
console.log(clonePerson.hobbies) // ['篮球','跑步','打代码']

1. 增强版本

/* 
 解决了: 函数属性会失落
 解决: 循环援用会出错 
 解决思路:
 指标: 同一个对旬 / 数组只能被克隆 1 次
 创立克隆对象前: 如果克隆对象曾经存在, 间接返回
 创立克隆对象后: 保留克隆对象 
 缓存容器构造: Map  key: target, value: cloneTaget
 */
function deepClone3(target, map = new Map()) {
 // 被解决的指标是数组 / 对象
 if (
 target instanceof Array ||
 (target !== null && typeof target === 'object')
 ) {
 // map 中存在对应的克隆对象, 间接将其返回
 let cloneTarget = map.get(target)
 if (cloneTarget) {return cloneTarget // 不要对同一个对象进行屡次 clone}
 // 创立克隆对象
 cloneTarget = target instanceof Array ? [] : {}
 // 保留到 map 容器
 map.set(target, cloneTarget)
 // 遍历一波
 for (const key in target) {
 // 判断一下只拷贝本人身上的属性, 疏忽原型上的
 if (target.hasOwnProperty(key)) {
 // 对属性值进行递归解决
 cloneTarget[key] = deepClone3(target[key], map)
 }
 }
 return cloneTarget
 } else {return target}
}
// 测试
const person = {name: '小通', age: 24, hobbies: ['篮球', '跑步'] }
const clonePerson = deepClone3(person)
// 往克隆的喜好中增加一项
clonePerson.hobbies.push('打代码')
// 相当完满
console.log(person.hobbies) //  ['篮球', '跑步']
console.log(clonePerson.hobbies) // ['篮球','跑步','打代码']

1. 增强版本 2(稍稍优化一点性能)

/* 
 数组: while | for | forEach() 优于 for-in | keys()&forEach() 
 对象: for-in 与 keys()&forEach() 差不多
 */
function deepClone4(target, map = new Map()) {
 // 被解决的指标是数组 / 对象
 if (
 target instanceof Array ||
 (target !== null && typeof target === 'object')
 ) {
 // map 中存在对应的克隆对象, 间接将其返回
 let cloneTarget = map.get(target)
 if (cloneTarget) {return cloneTarget // 不要对同一个对象进行屡次 clone}
 // 创立克隆对象
 if (target instanceof Array) {
 // 数组应用 forEach
 cloneTarget = []
 // 保留到 map 容器
 map.set(target, cloneTarget)
 // 向数组增加元素
 target.forEach((item, index) => {
 // 对属性值进行递归解决
 cloneTarget[index] = deepClone4(item, map)
 })
 } else {cloneTarget = {}
 // 保留到 map 容器
 map.set(target, cloneTarget)
 // 向对象增加属性
 for (const key in target) {
 // 数组应用 for-in
 if (target.hasOwnProperty(key)) {
 // 对属性值进行递归解决
 cloneTarget[key] = deepClone4(target[key], map)
 }
 }
 }
  
 return cloneTarget
 } else {return target}
}
// 测试
const person = {name: '小通', age: 24, hobbies: ['篮球', '跑步'] }
const clonePerson = deepClone4(person)
// 往克隆的喜好中增加一项
clonePerson.hobbies.push('打代码')
// 完满
console.log(person.hobbies) //  ['篮球', '跑步']
console.log(clonePerson.hobbies) // ['篮球','跑步','打代码']

完 …