Immutable提供了多個方法用於進行合併兩個及其以上的MAP物件。然而，選擇正確的方法是令人困惑的，除非你有一個非常棒的指南和豐富的例子 - 這些都是本教程的內容。

Merging Maps

將兩個或更多Map合併在一起有六種不同的方法。使用它們如下：

• originalMap.merge(Map1, Map2, Map3, ...Map-n) —— 將Maps合併在一起，將合併Maps的鍵/值對新增到originalMap的鍵/值對中,如果兩個鍵重複，則使用最後一個Map的值。巢狀的MAP不會被合併。
• originalMap.mergeWith((originalMapValue, mergedMapValue, key) => { /* conflict resolution */ }, Map1, Map2, Map3, ...Map-n);
  —— 合併多個Map，但是如果有衝突，你可以自行控制使用哪個值。
• originalMap.mergeDeep(Map1, Map2, Map3, ...Map-n) 合併巢狀的MAP
• originalMap.mergeDeepWith((originalMapValue, mergedMapValue, key) => { /* conflict resolution */ }, Map1, Map2, Map3, ...Map-n); 深層次合併，如有衝突可自行控制合併值
• const mergedMap = originalMap.mergeIn([keyPath], Map1, Map2, Map3, ...Map-n);
  合併keypath位置中的MAP,不合並巢狀的
• const mergedMap = originalMap.mergeDeepIn([keyPath], Map1, Map2, Map3, ...Map-n); 在由keyPath標識的位置深度合併

Map.merge()

通過將合併Map的鍵/值對新增到要合併到的Map的鍵/值對中，將兩個Map合併在一起。如果任何Maps的鍵都相同，則將使用最後一個要合併的Map中的重複鍵的值。

// Merge 
const avengers = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers'
});

const mergingAvengers = Immutable.Map({
  blackWidow: 'Natasha Romanova',
  theHulk: 'Bruce Banner'
});

const mergedAvengers = avengers.merge(mergingAvengers);

// Output:

{
  blackWidow: "Natasha Romanova",
  captainAmerica: "Steve Rogers",
  ironMan: "Tony Stark",
  theHulk: "Bruce Banner"
}

 

mergeWith()

將兩個或更多Map合併在一起，但是如果存在任何衝突，則可以控制使用哪個值。使用它如下：

const mergedMap = originalMap.Map((originalMapValue, mergedMapValue, key) => { /* conflict resolution */ }, mergedMap);

在下面的例子中，兩個Map將被正常合併，除非：

• 合併Map的值是未定義的
• "ironMan" 為key, 這個值不能變

// Merge two Maps using mergeWith
const avengers = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: undefined,
  blackWidow: 'Natasha Romanova',
});

const mergingAvengers = Immutable.Map({
  theHulk: 'Bruce Banner',
  blackWidow: undefined,
  ironMan: 'imposter!',
  captainAmerica: 'Steve Rogers',
});

const mergedAvengers = avengers.mergeWith((prev, next, key) => {
  // If mergingMap's value is undefined, return the originalMap's value
  if(!next) {
    return prev;
  }
  // If the key = 'ironMan', then use the originalMap's value
  if(key==='ironMan') {
    return prev;
  }
  // otherwise, use the mergingMap's value
  return next;
}, mergingAvengers);

// Output:

{
  blackWidow: "Natasha Romanova",
  captainAmerica: "Steve Rogers",
  ironMan: "Tony Stark",
  theHulk: "Bruce Banner"
}

mergeDeep()

mergeDeep（）將兩個或更多的地圖合併在一起，呃，深深的。使用標準的merge（），巢狀的地圖不會合並在一起 - 只有頂級Map中的鍵合併。通過mergeDeep（），無論巢狀層次結構的深度如何，所有巢狀的地圖都將被遞迴合併。

為了看到這一點，下面的例子顯示mergeDeep（）將兩個復仇者合併在一起。嘗試改變mergeDeep函式來合併，看看會發生什麼。

// Merge two Maps using mergeDeep
const ironMan = Immutable.fromJS({
  heroes: {
    ironMan: {
      name: 'Tony Stark'
    },
    captainAmerica: {
      name: 'Steve Rogers'
    }
  }
});

const mergingMan = Immutable.fromJS({
  heroes: {
    ironMan: {
      partner: 'Pepper Potts'
    }
  }
});

const mergedMan = ironMan.mergeDeep(mergingMan);

// Output:

[object Object] {
  heroes: [object Object] {
    captainAmerica: [object Object] { ... },
    ironMan: [object Object] { ... }
  }
}

mergeDeepWith()

mergeDeepWith（）將兩個或更多的地圖深度合併在一起（包括巢狀的地圖），並且可以控制在合併的地圖中存在重複鍵的情況下保留哪個值。

// Merge two Maps using mergeDeepWith
const avengers = Immutable.fromJS({
  heroes: {
    ironMan: {
      name: 'Tony Stark'
    },
    captainAmerica: {
      name: 'Steve Rogers'
    }
  }
});

const mergingAvengers = Immutable.fromJS({
  heroes: {
    ironMan: {
      name: 'Tony Starkless',
      partner: 'Pepper Potts'
    },
    captainAmerica: {
      name: 'Chris Evans'
    }
  }
});

const mergedAvengers = avengers.mergeDeepWith((prev, next, key) => {
  // If the key = 'name', then use the originalMap's value
  if(key==='ironMan') {
    return prev;
  }
  // otherwise, use the mergingMap's value
  return next;
}, mergingAvengers);


// Output:

{
  heroes: {
    captainAmerica: [object Object] { 
        name:"Chris Evans"
    },
    ironMan: [object Object] { 
        name:"Tony Starkless",
        partner: "Pepper Potts"
        
    }
  }
}

試試將 mergeDeepWith 改為 mergeWith 看看會發生什麼

mergeIn()

將兩個或更多Map合併在一個巢狀Map的特定點上。使用它如下：

const mergedMap = originalMap.mergeIn([keyPath], Map1, Map2, Map3, ...Map-n);

// Merge two Maps using mergeIn
const avengers = Immutable.fromJS({
  heroes: {
    ironMan: {
      name: 'Tony Stark'
    },
    captainAmerica: {
      name: 'Steve Rogers'
    }
  }
});

const mergingAvengers = Immutable.fromJS({
  partner: {
    realName: 'Pepper Potts',
    heroName: 'hera'
  }
});

const mergedAvengers = avengers.mergeIn(['heroes', 'ironMan'], mergingAvengers);

// Output:
{"heroes":{
    "ironMan":{
        "name":"Tony Stark",
        "partner":{
            "realName":"Pepper Potts",
            "heroName":"hera"
            
        }
    },
    "captainAmerica":{
        "name":"Steve Rogers"
    }
}}

mergeDeepIn()

將兩個或更多巢狀的Map在巢狀的Map中的特定點合併在一起。使用它如下：

const mergedMap = originalMap.mergeDeepIn([keyPath], Map1, Map2, Map3, ...Map-n);

這與mergeIn有著微妙的差別 - 實際上，它非常微妙，我最終通過不可變的原始碼尋找任何差異！

// Merge two Maps using mergeDeepIn
const avengers = Immutable.fromJS({
  heroes: {
    type: {
      human: {
        ironMan: {
          name: 'Tony Stark'
        },
        captainAmerica: {
          name: 'Steve Rogers'
        }
      },
      god: {
        thor : {
          name: 'Thor'
        }
      }
    },
  }
});

const mergingAvengers = Immutable.fromJS({
  human :{      
    blackWidow: {
      name: 'Natasha Romanova'
    }
  }
});

const mergedAvengers = avengers.mergeDeepIn(['heroes', 'type'], mergingAvengers);

// Output:

{"heroes":{
    "type":{
        "human":{
            "ironMan":{
                "name":"Tony Stark"
            },
            "captainAmerica":{
                "name":"Steve Rogers"
            },
            "blackWidow":{
            "name":"Natasha Romanova"
            }
        },
        "god":{
            "thor":{"name":"Thor"}
        }
    }
}}