js对象深度合并（多参数），js合并对象的方法，json合并

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多对象深度合并的方法；

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