教你徒手写深浅克隆

1.浅克隆,简单粗暴，这里有三种方法

//1.直接赋值
  var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
  var o = {};

//2.遍历
  var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
  var o2 = {};
        for (var k in obj) {
            // k 是属性名   obj[k] 属性值
            o2[k] = obj[k];
        };

//3.方法
  var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            }
        };
   Object.assign(o, obj);

2.0深克隆，利用递归

 var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18,
                sex: 'man'
            },
            color: ['pink', 'red']
        };
        var o = {};
    // 封装函数 
        function deepCopy(newobj, oldobj) {
            for (var k in oldobj) {
                // 判断我们的属性值属于那种数据类型
                // 1. 获取属性值  oldobj[k]
                var item = oldobj[k];
                // 2. 判断这个值是否是数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item)
                } else if (item instanceof Object) {
                    // 3. 判断这个值是否是对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
                    // 4. 属于简单数据类型
                    newobj[k] = item;
                }
            }
        }
        deepCopy(o, obj);

2.1深克隆，利用JSON转换

//深拷贝
function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};

2.2深克隆，

//深拷贝
 function clone(o) {
            var temp = {}
            for (var key in o) {
                if (typeof o[key] == 'object') {
                    temp[key] = clone(o[key])
                } else {
                    temp[key] = o[key]
                }
            }
            return temp
        }

3.0树形结构的克隆修改key

        let tree = [
            {
                id: '1',
                title: '节点1',
                children: [
                    {
                        id: '1-1',
                        title: '节点1-1'
                    },
                    {
                        id: '1-2',
                        title: '节点1-2'
                    }
                ]
            },
            {
                id: '2',
                title: '节点2',
                children: [
                    {
                        id: '2-1',
                        title: '节点2-1',
                        children: [
                            {
                                id: '3-1',
                                title: '节点3-1',
                                children: []
                            }
                        ]
                    }
                ]
            }
        ]
        let newTree = [];
        handleTree(newTree, tree)
        console.log(newTree, 'newTree');
        function handleTree(newTree, oldTree) {
            for (let i = 0; i < oldTree.length; i++) {
                newTree[i] = {};
                for (const key in oldTree[i]) {
                    if (key == 'children' && oldTree[i].children.length > 0) {
                        newTree[i][key + "s"] = [];
                        handleTree(newTree[i][key + "s"], oldTree[i].children)
                    } else {
                        if (Object.hasOwnProperty.call(oldTree[i], key)) {
                            const element = oldTree[i][key];
                            if (key == "id") {
                                // console.log(newTree[i]);
                                newTree[i]["ids"] = element
                            } else if (key == 'title') {
                                newTree[i]["titles"] = element
                            }
                        }
                    }
                }
            }
        }