js对象深度合并(多参数),js合并对象的方法,json合并

时间: 作者:admin 浏览:

js合并对象(json)有两种方法:
1、浅层合并;
2、深度合并;

浅层合并方法ES中已经实现:Object.assign(),可直接使用,但ES却没有对象深度合并的方法,于是小编只好自己来实现一下;

熟悉jquery的同学知道,jquery中的$.extend()方法就支持对象深度合并,但现在的vue框架一般不引入jquery了,容易混乱,所以我们只有自己实现;

今天我们就来整理和实现一下json对象合并的几种方法;

json对象的浅层合并方法

let newObj = Object.assign(obj1, obj2, obj3, ...)

这个方法一看就懂,将所有要合并的对象逐个放进去就可以,官方已经实现的方法,直接使用即可;

下面开始实现多参数的json对象深度合并的方法

逐步渐进,在实现复杂的多个对象合并方法之前,我们先实现最简单的,两个json对象的深度合并方法:

两个对象的深度合并方法

/**
*判断对象是否是一个纯粹的对象
*/
function isPlainObject(obj){
    return typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]'
}
/**
*深度合并两个对象的方法
*/
function deepAssign(target, source){
    if(isPlainObject(source)){
        if(!isPlainObject(target)){
            target = {}
        }
        for ( let s in source ) {
            if ( s === '__proto__' || target === source[s] ) {
                continue
            }
            if ( isPlainObject(source[s]) ) {
                target[s] = deepAssign(target[s], source[s])
            } else {
                target[s] = source[s]
            }
        }
        return target
    }
}

然后,在以上方法的基础上,用arguments属性代替原参数进行扩展,得到最终的方法:


/**
*判断对象是否是一个纯粹的对象
*/
function isPlainObject(obj){
    return typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]'
}

/**
*深度合并多个对象的方法
*/
function deepAssign( ){
    let len = arguments.length, target = arguments[0]
    if(!isPlainObject(target)){
        target = {}
    }
    for (let i = 1; i < len; i++){
        let source = arguments[i]
        if( isPlainObject( source ) ){
            for( let s in source ){
                if ( s === '__proto__' || target === source[s] ) {
                    continue
                }
                if( isPlainObject( source[s] ) ){
                    target[s] = deepAssign(target[s], source[s])
                }else{
                    target[s] = source[s]
                }
            }
        }
    }
    return target
}

可以看到,目标方法其实就是将原方法的target与source参数用arguments来替换,整体逻辑变化不大;

  • 用法
    let newObj = deepAssign(obj1, obj2, obj3, ...)
    

实现多参数对象深度合并的优势

因为在开发过程中会经常需要考虑不改变原对象,从上面两个对象深度合并方法发现,target对象合并后是会被修改的,这样就污染原对象了,如下图所示:

let a = { name: "小明", age: 18}
let b = { height: 180, scopes: { math: 99, arts: 86 } }
deepAssign(a, b)

结果图:

可以看到a对象前后发生了改变。

因此,多个参数的实现,显得很有必要,实现后我们可以将第一个参数设置为空对象:{},这样,所有传入的对象均不会被修改,如下图所示:

let a = { name: "小明", age: 18}
let b = { height: 180, scopes: { math: 99, arts: 86 } }
deepAssign({}, a, b)

结果图:

可以看到a对象前后没有变化。

到此,我们就实现了js多对象深度合并的方法;

好啦,今天就到这里,快去试试吧

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4