数组对象的深浅拷贝和深浅合并

对象&&数组的克隆(浅拷贝)

浅拷贝:只拷贝第一级内容,拷贝的对象和原始对象共用相同的第二级(及更深级)的内容

对象

@1展开运算符 @2.循环:把原始对象中的每一项 赋值给新对象

数组

@1.上述方案都可以,@2.基于slice处理,@3.基于concat处理

对象的克隆(深拷贝)

深拷贝后,新对象和原始对象不具备任何关系,我对象的一级及更深层级都拷贝一份

@1 JSON.stringify / JSON.stringify 来处理,存在局限性

先把对象转为字符串,再把字符串重新变为对象,(浏览器会重新开辟说有需要的堆内存)

• 无法处理 BigInt类型的属性值
• 属性值是 undefined / symbol/ function 类型的 属性名是symbol类型的会消失
• 如果是正则对象/错误对象会转为"{}",值和之前的不一样
• 日期对象变为字符串后就无法在转回日期对象了
• 一但内部出现套娃操作直接报错 obj.obj=obj
• 处理起来没有问题的类型:number  string  boolean 普通对象 数组对象

封装

let obj = {
        name: 'lisa',
        bool: true,
        n: null,
        u: undefined,
        Sym: Symbol('sym'),
        big: 10n,
        rge: '/\d+/',
        time: new Date,
        err: new Error('xxx'),
        list: [10, 20, 30],
        age: 18,
        ke: {
            js: '基础',
            web: '高级'
        },
        [Symbol('key')]: 100,
        fn: function () { }
    }
    /* 检测数据类型的 */
    const getProto = Object.getPrototypeOf,
        class2type = {},
        toString = class2type.toString,
        hasOwn = class2type.hasOwnProperty;
    // 检测是否为函数
    const isFunction = function isFunction(obj) {
        return typeof obj === "function" && typeof obj.nodeType !== "number" &&
            typeof obj.item !== "function";
    };
    // 检测是否为window对象
    const isWindow = function isWindow(obj) {
        return obj != null && obj === obj.window;
    };
    // 检测是否为数组或者类数组
    const isArrayLike = function isArrayLike(obj) {
        let length = !!obj && "length" in obj && obj.length,
            type = toType(obj);
        if (isFunction(obj) || isWindow(obj)) return false;
        return type === "array" || length === 0 ||
            typeof length === "number" && length > 0 && (length - 1) in obj;
    };
    // 通用检测数据类型的办法，返回结果：字符串、含小写的数据类型
    const toType = function toType(obj) {
        let reg = /^\[object (.+)\]$/;
        if (obj == null) return obj + "";
        return typeof obj === "object" || typeof obj === "function" ?
            reg.exec(toString.call(obj))[1].toLowerCase() :
            typeof obj;
    };
    // 检测是否为标准普通对象(纯粹对象)
    const isPlainObject = function isPlainObject(obj) {
        let proto, Ctor;
        if (!obj || toString.call(obj) !== "[object Object]") return false;
        proto = getProto(obj);
        if (!proto) return true;
        Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
        return typeof Ctor === "function" && Ctor === Object;
    };
    /* 迭代方法:迭代数组、类数组、对象(支持回调函数返回false结束循环) */
    const each = function each(obj, callback) {
        if (obj == null || !/^object$/.test(typeof obj)) throw new TypeError("obj must be an object/array/likeArray");
        if (typeof callback !== "function") throw new TypeError("callback is not a function");
        let item, keys, key;
        if (isArrayLike(obj)) {
            for (let i = 0; i < obj.length; i++) {
                item = obj[i];
                if (callback.call(item, item, i) === false) break;
            }
        } else {
            keys = Object.getOwnPropertyNames(obj);
            if (typeof Symbol !== "undefined") keys = keys.concat(Object.getOwnPropertySymbols(obj));
            for (let i = 0; i < keys.length; i++) {
                key = keys[i];
                item = obj[key];
                if (callback.call(item, item, key) === false) break;
            }
        }
        return obj;
    };

    const clone = function clone(obj, deep, exist) {
        if (obj == null) return obj;
        if (typeof deep !== "boolean") deep = false;
        let ctor = obj.constructor,
            type = toType(obj),
            isArray = Array.isArray(obj),
            isObject = isPlainObject(obj),
            result;
        // 其他类型值的处理
        if (/^(regexp|date)$/i.test(type)) return new ctor(obj);
        if (/^(error)$/i.test(type)) return new ctor(obj.message);
        if (typeof obj === "function") {
            return function (...params) {
                return obj.call(this, ...params);
            };
        }
        if (!isArray && !isObject) return obj;
        // 避免套娃出现死递归
        if (!Array.isArray(exist)) exist = [];
        if (exist.indexOf(obj) > -1) return obj;
        exist.push(obj);
        // 如果是数组&纯粹对象
        result = new ctor();
        each(obj, (value, key) => {
            if (deep) {
                result[key] = clone(value, deep, exist);
                return;
            }
            result[key] = value;
        });
        return result;
    };

    const merge = function merge() {
        let options,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            exist = arguments[length - 1],
            deep = false;
        if (typeof target === "boolean") {
            deep = target;
            target = arguments[i] || {};
            i++;
        }
        if (target == null || (typeof target !== "object" && !isFunction(target))) target = {};
        // 防止死递归
        Array.isArray(exist) && exist.isExist ? length-- : (exist = [], exist.isExist = true);
        for (; i < length; i++) {
            options = arguments[i];
            if (options == null) continue;
            if (exist.indexOf(options) > -1) return options;
            exist.push(options);
            each(options, (copy, name) => {
                let copyIsArray = Array.isArray(copy),
                    copyIsObject = isPlainObject(copy),
                    src = target[name];
                if (deep && copy && (copyIsArray || copyIsObject)) {
                    if (copyIsArray && !Array.isArray(src)) src = [];
                    if (copyIsObject && !isPlainObject(src)) src = {};
                    target[name] = merge(deep, src, copy, exist);
                } else if (copy !== undefined) {
                    target[name] = copy;
                }
            });
        }
        return target;
    };

    let newObj = clone(obj, true)
    console.log(newObj);
    console.log(obj);

标签：function,return,&&,length,深浅,typeof,数组,obj,拷贝
来源： https://blog.csdn.net/qq_63358859/article/details/122704133