Immutable's Map與JavaScript物件很相似，但是如果你不知道它是如何工作的話，它可能會嚴重地影響你。這篇文章是第一次深入瞭解Immutable Maps，向您展示如何以正確的方式使用它們。

認識認識 Immutable 中的Map

一個不可變對映是鍵/值對的無序集合，乍一看似乎與JavaScript物件相似。但是，它具有以下附加屬性：

1. 您可以迭代Map中的鍵
2. 迭代的鍵的順序不會改變（儘管你不知道什麼順序會提前）
3. 所有的鍵都被轉換成字串。
4. 一個鍵可以是任何型別的 - 甚至是NaN和一個數組
5. 如果Immutable.is(map1，map2)返回true，則兩個對映是相同的
6. 一個不可變的集合（例如List，Map，Seq等）可以是一個Key

Create an empty Map

// Empty Map:
const map = Immutable.Map();

// Output:
map;

Create a populated Map of data

您可以使用Map()建構函式或Map.of()方法根據現有資料建立Map，具體取決於您用於建立Map的資料型別：

• Map.of()從一組函式引數中建立Map時使用，每對引數都被解釋為一個鍵和一個值;
• Map()使用其他方式建立Map時使用。

Create a new Map from…

…a JavaScript Array

要從陣列建立一個新的Map，實際上需要一個數組中的陣列，每個陣列項都是一個元組（即有兩個值）。每個陣列項的第一個值將被用作MAP中的一個鍵，第二個項將是它的值。

// New Map from JavaScript array
const avengersArray = [
  ['heroName1', 'ironMan'], 
  ['heroName2', 'captainAmerica']
];
const avengersMap = Immutable.Map(avengersArray);

// Output:
avengersMap;

{
  heroName1: "ironMan",
  heroName2: "captainAmerica"
}

重要提示：請記住，金鑰名稱必須是唯一的。嘗試在上面的程式碼中將“heroName2”更改為“heroName1”，看看會發生什麼。這是因為不可變將覆蓋它看作是一個重複的金鑰。

…a JavaScript Object

// New Map from JavaScript object
const avengersObj = {
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers'
};
const avengersMap = Immutable.Map(avengersObj);

// Output:
{
  captainAmerica: "Steve Rogers",
  ironMan: "Tony Stark"
}

...深度巢狀的JavaScript物件或JSON編碼的資料

Immutable的Map不能在深度巢狀的物件上工作，因為它只會進行淺轉換（例如，obj.key中的鍵將被轉換為Map，但obj.key.subkey中的子鍵將保持不變 - 也就是說，如果subkey是一個JavaScript物件，它將保持一個JavaScript物件，而不是一個不可變的對映）。

為了從一個複雜的物件或JSON編碼的資料建立一個新的Map，因此，您需要使用fromJS()。

// New Map from deeply nested JavaScript object
const avengers = {
  hero1: {
    ironMan: {
      realName: 'Tony Stark'
    }
  },
  hero2: {
    captainAmerica: {
      realName: 'Steve Rogers'
    }
  }
};

// Create the Map
const avengersMap = Immutable.Map(Immutable.fromJS(avengers));

// Test that we have a deeply nested Map
const ironMan = avengersMap.getIn(['hero1', 'ironMan']);

// Output:
Immutable.Map.isMap(ironMan);

嘗試從上面的程式碼中刪除Immuable.fromJS，你應該看到輸出轉為false。這是因為，如果沒有fromJS（），深層巢狀的物件將不會被轉換為一個Map。

…a set of function arguments

您可以從任意數量的函式引數建立一個Map，每個引數對被解釋為一個鍵/值對。只要記住用Map.of()建立你的Map

// New Map from function arguments
const avengersMap = Immutable.Map.of(
  'ironMan', 'Tony Stark', 'captainAmerica', 'Steve Rogers'
);

// Output:
avengersMap;

…a JavaScript iterator

可以使用內建的（例如一個數組）或使用者定義的任何ES6可迭代物件來建立一個新的不可變對映。

// New Map from existing JavaScript iterator (Array.map example)

// Note: an ES6 object is not an iterator, so we'll use an array instead
const avengersArray = ['ironMan' , 'captainAmerica'];

const avengersMap = Immutable.Map(avengersArray.map(
  (item, index) => ([ 'heroName' + index, item ])));

// Output:
avengersMap;

…an Immutable List

就像從陣列建立Map一樣，List必須包含List列表，每個List項都是一個元組，它將被Map用作鍵/值對。

// New Map from existing List
const avengersList = Immutable.List([['heroName1', 'ironMan'], ['heroName2', 'captainAmerica']]);
const avengersMap = Immutable.Map(avengersList);

// Output:
avengersMap;

{
  heroName1: "ironMan",
  heroName2: "captainAmerica"
}

…an Immutable Map

// New Map from existing Map
const avengersMap = Immutable.Map({
  hero1: 'ironMan',
  hero2: 'captainAmerica',
  hero3: 'blackWidow'
});

const newAvengersMap = Immutable.Map(avengersMap);

// Output:
newAvengersMap;


 {
  hero1: "ironMan",
  hero2: "captainAmerica",
  hero3: "blackWidow"
}

…other Immutable objects

您可以使用任何不可變物件建立新的Map，其中包括：

• List
• Map
• OrderedMap
• Set
• OrderedSet
• Stack
• Record

OrderedMap

一個OrderedMap和Map一樣，但是保證迭代的鍵順序總是一樣的。您可以使用Map執行的其他操作，OrderedMap也可以使用。

請注意，OrderedMap比Map更慢，所以如果你不關心被迭代的鍵的順序，可以使用Map。

Get, Set, Update and Delete Map properties

如你所看到的，建立地圖可能會非常複雜。一旦建立，他們提供了一個強大的方式來執行資料操作。本系列的下一篇文章將介紹如何從Map中獲取，設定，更新和刪除。