js中深浅拷贝的示例分析

这篇文章给大家分享的是有关js中深浅拷贝的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

js的深浅拷贝

JavaScript的深浅拷贝一直是个难点，如果现在面试官让我写一个深拷贝，我可能也只是能写出个基础版的。所以在写这条之前我拜读了收藏夹里各路大佬写的博文。具体可以看下面我贴的链接，这里只做简单的总结。

• 浅拷贝： 创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

• 深拷贝： 将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

浅拷贝的实现方式：

• Object.assign() 方法： 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

• **Array.prototype.slice()：**slice() 方法返回一个新的数组对象，这一对象是一个由 begin和end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。

• 拓展运算符...：

let a = {    name: "Jake",    flag: {        title: "better day by day",        time: "2020-05-31"    }}let b = {...a};

深拷贝的实现方式：

• 乞丐版： JSON.parse(JSON.stringify(object))，缺点诸多（会忽略undefined、symbol、函数；不能解决循环引用；不能处理正则、new Date()）

• 基础版（面试够用）： 浅拷贝+递归 （只考虑了普通的 object和 array两种数据类型）

function cloneDeep(target,map = new WeakMap()) {  if(typeOf taret ==='object'){     let cloneTarget = Array.isArray(target) ? [] : {};           if(map.get(target)) {        return target;    }     map.set(target, cloneTarget);     for(const key in target){        cloneTarget[key] = cloneDeep(target[key], map);     }     return cloneTarget  }else{       return target  } }

• 终极版：

const mapTag = '[object Map]';const setTag = '[object Set]';const arrayTag = '[object Array]';const objectTag = '[object Object]';const argsTag = '[object Arguments]';const boolTag = '[object Boolean]';const dateTag = '[object Date]';const numberTag = '[object Number]';const stringTag = '[object String]';const symbolTag = '[object Symbol]';const errorTag = '[object Error]';const regexpTag = '[object RegExp]';const funcTag = '[object Function]';const deepTag = [mapTag, setTag, arrayTag, objectTag, argsTag];function forEach(array, iteratee) {    let index = -1;    const length = array.length;    while (++index < length) {        iteratee(array[index], index);    }    return array;}function isObject(target) {    const type = typeof target;    return target !== null && (type === 'object' || type === 'function');}function getType(target) {    return Object.prototype.toString.call(target);}function getInit(target) {    const Ctor = target.constructor;    return new Ctor();}function cloneSymbol(targe) {    return Object(Symbol.prototype.valueOf.call(targe));}function cloneReg(targe) {    const reFlags = /\w*$/;    const result = new targe.constructor(targe.source, reFlags.exec(targe));    result.lastIndex = targe.lastIndex;    return result;}function cloneFunction(func) {    const bodyReg = /(?<={)(.|\n)+(?=})/m;    const paramReg = /(?<=\().+(?=\)\s+{)/;    const funcString = func.toString();    if (func.prototype) {        const param = paramReg.exec(funcString);        const body = bodyReg.exec(funcString);        if (body) {            if (param) {                const paramArr = param[0].split(',');                return new Function(...paramArr, body[0]);            } else {                return new Function(body[0]);            }        } else {            return null;        }    } else {        return eval(funcString);    }}function cloneOtherType(targe, type) {    const Ctor = targe.constructor;    switch (type) {        case boolTag:        case numberTag:        case stringTag:        case errorTag:        case dateTag:            return new Ctor(targe);        case regexpTag:            return cloneReg(targe);        case symbolTag:            return cloneSymbol(targe);        case funcTag:            return cloneFunction(targe);        default:            return null;    }}function clone(target, map = new WeakMap()) {    // 克隆原始类型    if (!isObject(target)) {        return target;    }    // 初始化    const type = getType(target);    let cloneTarget;    if (deepTag.includes(type)) {        cloneTarget = getInit(target, type);    } else {        return cloneOtherType(target, type);    }    // 防止循环引用    if (map.get(target)) {        return map.get(target);    }    map.set(target, cloneTarget);    // 克隆set    if (type === setTag) {        target.forEach(value => {            cloneTarget.add(clone(value, map));        });        return cloneTarget;    }    // 克隆map    if (type === mapTag) {        target.forEach((value, key) => {            cloneTarget.set(key, clone(value, map));        });        return cloneTarget;    }    // 克隆对象和数组    const keys = type === arrayTag ? undefined : Object.keys(target);    forEach(keys || target, (value, key) => {        if (keys) {            key = value;        }        cloneTarget[key] = clone(target[key], map);    });    return cloneTarget;}module.exports = {    clone};

感谢各位的阅读！关于"js中深浅拷贝的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！