深拷贝和浅拷贝的区别

文字概述：假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

一、浅拷贝

function clone1(target){
    // 判断{} [] null
    if(typeof(target) === 'object' && target !== null){
        // 如果是数组
        if(Array.isArray(target)){
            return [...target]
        }else{
            return {...target}
        }
    }else{
        // 基础数据类型
        return target
    }
}

 const obj = {
    x:'abc',
    y:{m:1}
}
const str = '1uduhfghi'
const num = 250
const arr = [1,2,4,'str']
// const result = clone1(obj) // {"x": "abc","y": {"m": 1}}
// const result = clone1(str) // '1uduhfghi'
// const result = clone1(num) // 250
const result = clone1(obj) // [1, 2, 4, 'str']
obj.y.m = 2
console.log(obj)  // {"x": "abc","y": {"m": 2}}
console.log(result) // {"x": "abc","y": {"m": 2}}

二、浅拷贝

function clone1(target){
    // 判断{} [] null
    if(typeof(target) === 'object' && target !== null){
        // 创建一个容器
        const result = Array.isArray(target) ? [] : {}
        // 遍历target数据
        for(let key in target){
            // 判断当前对象身上是否包含该属性
            if(target.hasOwnProperty(key)){
                // 将属性设置到 result 结果数据中
                result[key] = target[key]
            }
        }
        return target
    }else{
        // 基础数据类型
        return target
    }
}

const obj = {
    x:'abc',
    y:{m:1}
}
const str = '1uduhfghi'
const num = 250
const arr = [1,2,4,'str']
// const result = clone1(obj) // {"x": "abc","y": {"m": 1}}
// const result = clone1(str) // '1uduhfghi'
// const result = clone1(num) // 250
const result = clone1(obj) // [1, 2, 4, 'str']
obj.y.m = 2
console.log(obj)  // {"x": "abc","y": {"m": 2}}
console.log(result) // {"x": "abc","y": {"m": 2}}