JavaScript復(fù)制（合并）對象

vslam 發(fā)布于2019-08-21 16:58 / 2306人閱讀

摘要：實現(xiàn)合并對象的方法有很多種，比如也是用寫的，謝謝系列等，至于區(qū)別自己看文檔，文檔地址打造的一個不可變數(shù)據(jù)結(jié)構(gòu)庫的方法其中，為原生方法，但是存在以下兩個在具體應(yīng)用場景上的缺點瀏覽器兼容性問題只能進行淺合并關(guān)于淺合并深合并，碼友之述備矣，這里就

javascript實現(xiàn)合并對象的方法有很多種，比如：

1、Object.assign

2、jQuery.extend（jQuery也是用javascript寫的，謝謝）

3、lodash系列（lodash.merge、lodash.assign等，至于區(qū)別自己看文檔，文檔地址：https://lodash.com/docs）

4、Immutable.js（fackbook打造的一個不可變數(shù)據(jù)結(jié)構(gòu)JS庫）的 merge 方法

其中，Object.assign為javascript原生方法，但是存在以下兩個在具體應(yīng)用場景上的缺點：

1、瀏覽器兼容性問題

2、只能進行淺合并（關(guān)于淺合并深合并，碼友之述備矣，這里就不贅言，戳：https://juejin.im/entry/58df4...）

PS: 之所以說具體應(yīng)用場景的缺點，是因為假如項目是在高版本瀏覽器運行，并且只要對數(shù)據(jù)結(jié)構(gòu)進行淺合并，那就不存在上述兩個問題

而為了實現(xiàn)合并對象，特意引入上述的 jQuery、lodash、immutable這些庫，就有點夸張了（項目本身需要用到這些庫，那當(dāng)我什么也沒說）

好了，進入正題，下面是我自己實現(xiàn)的一個可配置的合并多個對象的方法

function EXT(options) {
    return new EXT.prototype.init(options);
}

EXT.fn = EXT.prototype = {
    type: function(o) {
        return Object.prototype.toString.call(o).slice(8, -1).toLowerCase();
    },
    typeMap: {
        object: function() {
            return {};
        },
        array: function() {
            return [];
        }
    },
    // 默認(rèn)配置項
    defaults: {
        // 是否深合并
        isDeep: true,
        // 是否遍歷合并源對象原型鏈上的屬性
        includePrototype: true,
        // 用于對每個合并項進行自定義修正
        forEach: function(target, name, sourceItem) {
            target[name] = sourceItem;
            return target;
        }
    },
    // 將配置項合并到默認(rèn)配置項
    init: function(options) {
        for (let name in options) {
            this.defaults[name] = options[name];
        }
        return this;
    },
    merge: function() {
        let self = this,
            _default = self.defaults,
            i = 1,
            length = arguments.length,
            target = arguments[0] || {},
            source,
            targetItem,
            sourceItem,
            tiType,
            siType,
            clone,
            name;

        for (; i < length; i++) {
            // 判斷源對象是否為空
            if ((source = arguments[i]) != null) {
                for (name in source) {
                    const hasPro = source.hasOwnProperty(name);
                    // 是否遍歷源對象的原型鏈
                    if (hasPro || _default.includePrototype) {
                        targetItem = target[name];
                        sourceItem = source[name];
                        tiType = self.type(targetItem);
                        siType = self.type(sourceItem);

                        // 防止出現(xiàn)回環(huán)
                        if (target === sourceItem) {
                            continue;
                        }

                        // 如果復(fù)制的是對象或者數(shù)組
                        if (_default.isDeep && sourceItem != null && self.typeMap[siType]) {
                            clone = targetItem != null && tiType === siType ? targetItem : self.typeMap[siType]();
                            // 遞歸
                            target[name] = self.merge(clone, sourceItem);
                        } else {
                            clone = hasPro ? target : target.__proto__;
                            // 處理每一個合并項
                            clone = _default.forEach.call(self, clone, name, sourceItem);
                        }
                    }
                }
            }
        }
        return target;
    }
};
EXT.fn.init.prototype = EXT.fn;

擼個demo先，先定義兩份數(shù)據(jù)

function Foo() {
    this.a = 1;
}

function Bar() {
    this.c = 3;
}

Foo.prototype.b = 2;
Bar.prototype.d = 4;

let data = {
    info: {
        name: "Leslie",
        age: 26,
        scores: [60, 66, 70, 80]
    }
};
let data2 = {
    info: {
        name: "Leslie",
        age: 32,
        scores: [99, 66, 70, {
            name: "john",
            age: 18
        },
        new Foo()]
    }
};

1、普通合并

let target = EXT().merge(data1, data2);

結(jié)果為：

2、自定義配置進行合并

isDeep：選擇是否進行深合并，設(shè)置為 false 則只進行淺合并，默認(rèn)為 true

let target = EXT({ isDeep: false }).merge(data1, data2);

includePrototype：選擇是否要遍歷對象的原型鏈，默認(rèn)為 true

let target = EXT({ includePrototype: false }).merge(data1, data2);

forEach：對每個合并項進行自定義處理

let target = EXT({
    forEach: function(target, name, sourceItem) {
        target[name] = sourceItem + ’hello， 自定義每個合并項‘;
        return target;
    }
}).merge(data1, data2);

好了，這就是這個方法的全部，還不知道怎么用的小伙伴可以私信我.

云服務(wù)器 GPU云服務(wù)器合并對象 php對象屬性合并 json對象數(shù)組合并 asp復(fù)制對象

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88963.html

發(fā)表評論

登陸后可評論

0條評論

vslam

男|高級講師

我要關(guān)注我要私信

TA的文章

olink cloud：德國/圣何塞AS9929線路VPS全場8折優(yōu)惠，服務(wù)器6折優(yōu)惠，$4/月起

閱讀 1360·2021-11-04 16:09
DMIT，中國香港cn2 gia vps/lite版大帶寬vps整理分享，月付$6.9起！

閱讀 3568·2021-10-19 11:45
貨運巨頭Forward Air報告勒索軟件數(shù)據(jù)泄露損失金額達750萬美元

閱讀 2455·2021-10-11 10:59
手撕C語言進階---字符串和內(nèi)存函數(shù)(詳解+實現(xiàn)+原碼)

閱讀 1053·2021-09-23 11:21
ssl證書有哪些種類?如何選擇SSL證書?

閱讀 2819·2021-09-22 10:54
SVG圖片文件轉(zhuǎn)換成Inline Code 的非完美解決方案

閱讀 1197·2019-08-30 15:53
前端資源分享-只為更好前端

閱讀 2657·2019-08-30 15:53
CSS的低權(quán)重原則—避免濫用子選擇器

閱讀 3525·2019-08-30 12:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript復(fù)制（合并）對象

相關(guān)文章

[譯] 為什么原型繼承很重要

**（JavaScript）合并數(shù)組的方法**

JavaScript深入理解對象方法——Object.assign()

JavaScript專題之從零實現(xiàn)jQuery的extend

JavaScript深拷貝、淺拷貝

發(fā)表評論

0條評論

vslam

男|高級講師

TA的文章

olink cloud：德國/圣何塞AS9929線路VPS全場8折優(yōu)惠，服務(wù)器6折優(yōu)惠，$4/月起

DMIT，中國香港cn2 gia vps/lite版大帶寬vps整理分享，月付$6.9起！

貨運巨頭Forward Air報告勒索軟件數(shù)據(jù)泄露損失金額達750萬美元

手撕C語言進階---字符串和內(nèi)存函數(shù)(詳解+實現(xiàn)+原碼)

ssl證書有哪些種類?如何選擇SSL證書?

SVG圖片文件轉(zhuǎn)換成Inline Code 的非完美解決方案

前端資源分享-只為更好前端

CSS的低權(quán)重原則—避免濫用子選擇器

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JavaScript復(fù)制（合并）對象

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！