js深浅拷贝

js深浅拷贝的实现与区别

一、浅拷贝实现

function shallowCopy(source) {
  let newObj = {}
  for (let i in source){// 遍历源对象
      if (source.hasOwnProperty(i)){// copy属性给新对象
          newObj[i] = source[i]
      }
  }
  return newObj
}

2、浅拷贝应用

1、Object.assign()合并对象

2、展开运算符

3、Array.concat()

4、函数库lodash的_.clone方法

5、Array.map()也是浅拷贝的

	arr1 = [{name:'科比'},{name: '乔丹'},{name: '詹姆斯'}]
    let arr2 = arr1.map((item)=>{
        return item
    })
    console.log(arr1) // [{name:'科比'},{name: '乔丹'},{name: '詹姆斯'}]
    console.log(arr2) // [{name:'科比'},{name: '乔丹'},{name: '詹姆斯'}]
    arr2[0].name = '奥尼尔'
    console.log(arr1) // [{name:'奥尼尔'},{name: '乔丹'},{name: '詹姆斯'}]
    console.log(arr2) // [{name:'奥尼尔'},{name: '乔丹'},{name: '詹姆斯'}]

二、浅拷贝和赋值的区别

赋值:不会创建新的对象,且两个对象内存引用相同

// 赋值:
let a = {name:'A'}
let b = a
b.name = 'B'
console.log(a.name) // B
console.log(b.name) // B

浅拷贝:会创建一个新的对象，新的对象指向了新的内存地址

// 浅拷贝: copy一个对象，属性值为基本数据类型拷贝值，属性值为引用数据类型拷内存的地址
function shallowCopy(source) {
    let newObj = {}
    for (let i in source){// 便利源对象
        if (source.hasOwnProperty(i)){// copy属性给新对象
            newObj[i] = source[i]
        }
    }
    return newObj
}
let person = {name:'tylerYue'}
let person1 = shallowCopy(person)
console.log(person1.name) // tylerYue
person1.name = 'TYLERYUE'
console.log(person1.name) // TYLERYUE
console.log(person.name) //  tylerYue

三、深拷贝实现

1、实现一个深拷贝

copy一个对象、属性值为基本数据类型拷贝值、属性为引用数据类型则会创建一个新的对象

function deepClone(target) {
    const map = new WeakMap()
    
    function isObject(target) {
        return (typeof target === 'object' && target ) || typeof target === 'function'
    }

    function clone(data) {
        if (!isObject(data)) {
            return data
        }
        if ([Date, RegExp].includes(data.constructor)) {
            return new data.constructor(data)
        }
        if (typeof data === 'function') {
            return new Function('return ' + data.toString())()
        }
        const exist = map.get(data)
        if (exist) {
            return exist
        }
        if (data instanceof Map) {
            const result = new Map()
            map.set(data, result)
            data.forEach((val, key) => {
                if (isObject(val)) {
                    result.set(key, clone(val))
                } else {
                    result.set(key, val)
                }
            })
            return result
        }
        if (data instanceof Set) {
            const result = new Set()
            map.set(data, result)
            data.forEach(val => {
                if (isObject(val)) {
                    result.add(clone(val))
                } else {
                    result.add(val)
                }
            })
            return result
        }
        const keys = Reflect.ownKeys(data)
        const allDesc = Object.getOwnPropertyDescriptors(data)
        const result = Object.create(Object.getPrototypeOf(data), allDesc)
        map.set(data, result)
        keys.forEach(key => {
            const val = data[key]
            if (isObject(val)) {
                result[key] = clone(val)
            } else {
                result[key] = val
            }
        })
        return result
    }

    return clone(target)
}

2、深拷贝的实际应用

1、在vue项目中，做表单修改时，表单内容项存在双向绑定，对表单内容进行一个深拷贝，避免修改时改变原有内容

2、类库：lodash.js API: cloneDeep(source)

2、JSON.parse()和JSON.stringify()，出现function时copy无效