【譯】Immutable.js : 操作Map - 6

我們知道如何創建Immutable Map，我們來看看如何從中獲取數據，以及如何添加和刪除項目，而不用改變它們。

Getters

Get a value from a Map with get()

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

// Get captainAmerica
avengersMap.get('captainAmerica');

如果要獲取的KEY 不存在，則提供一個默認值

通常，如果您嘗試從Map獲取（）不存在的鍵的值，您將獲得未定義的值。但是，Map.get（）允許您提供一個默認值，而不是undefined：

// Get a default value from a Map for a key that does not exist

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

// Get captainAmerica
avengersMap.get('blackWidow', 'Missing Avenger');

獲取深層次嵌套中的值

通過使用Map.getIn（）函數中的鍵名稱數組，可以遍歷深層嵌套的Map對象層次結構，每個鍵名都屬於層次結構下一層的Map。

// Get a value deeply embedded in a Map

// Note: we use Immutable.fromJS() to create our Map, as Map() itself 
// won't convert all the properties of a deeply nested object.
const avengers = Immutable.fromJS({
  hero1: {
    ironMan: {
      heroName: 'Iron Man'
    }
  }
});


// Get ironMan's heroName
avengers.getIn(['hero1', 'ironMan', 'heroName'])

Get the value of the first key in a Map

// Get a default value from a Map for a key that does not exist

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

// Get Tony Stark
avengersMap.first();

Get the value of the last key in a Map

// Get a default value from a Map for a key that does not exist

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

// Get Natasha Romanov
avengersMap.last();

使用has（）確定一個鍵是否存在於Map中

// Get a default value from a Map for a key that does not exist

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

// Does blackWidow exist?
avengersMap.has('blackWidow');

用hasIn（）確定一個關鍵字是否存在於深度嵌套的Map中

// Get a value deeply embedded in a Map
​
// Note: we use Immutable.fromJS() to create our Map, as Map() itself 
// won't convert all the properties of a deeply nested object.
const avengers = Immutable.fromJS({
  hero1: {
    ironMan: {
      heroName: 'Iron Man'
    }
  }
});


// Does the key 'heroName' exist?
avengers.hasIn(['hero1', 'ironMan', 'heroName']);

使用includes（）確定Map中是否存在一個值

// Get a default value from a Map for a key that does not exist

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

// Does Natasha Romanov exist?
avengersMap.includes('Natasha Romanov');

注意：你也可以使用.contains（）判斷 值是否存在。

Get all the keys from a Maps with keys()

您可以使用Map.keys（）從地圖中獲取所有的密鑰。但是，返回的值是一個ES6可迭代的，它本身並不是那么有用：

// Get all the keys from a Map

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

avengersMap.keys();

幸運的是，您可以使用iterator.next（）來訪問迭代器中的每個項目，或者更簡潔地（也可能是您希望首先獲得的），使用spread運算符將返回的迭代器轉換為數組。

- Using iterator.next()

// Get all the keys from a Map

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

const avengersKeys = avengersMap.keys();

// Each call to avengersKeys.next() will return the next key in avengersMap
// as a value in the next() function's returned object. Confused? This is
// just how iterables work in ES6. If you're looking to get an array of 
// keys, see the example with the ...spread operator below.
avengersKeys.next();

- Using the …spread operator

// Get all the keys from a Map

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

const [...avengersKeys] = avengersMap.keys();

avengersKeys;

使用values（）獲取Map中的所有值

從Map中獲取所有的值，作為一個JavaScript迭代返回。請參閱[獲取Map的所有鍵以獲取]如何訪問迭代中的值。

// Get all the values from a Map

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

const [...avengersValues] = avengersMap.values();

avengersValues;

使用entries()從Map中獲取鍵和值

// Get all the values from a Map

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

const [...avengersEntries] = avengersMap.entries();

OUTPUT:
avengersEntries

[["ironMan", "Tony Stark"], ["captainAmerica", "Steve Rogers"], ["blackWidow", "Natasha Romanov"]]

Setters

使用set（）將新的鍵/值對添加到Map

const updatedMap = oldMap.set(key, value)

// Add a new key/value to a Map

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

const moreAvengers = avengersMap.set('blackWidow', 'Natasha Romanov');

// Output:
moreAvengers;

注意：如果密鑰已經存在，其值將被更新為新的值。

使用setIn（）方法向深度嵌套的Map中的現有鍵添加新值

const updatedMap = oldMap.setIn(keyPath, value)

參數說明：

• keyPath: 用於沿着“Map”層次結構走向的一組鍵
• value:keyPath中最后一個鍵的新值

// Set a new value in a deeply-nested Map

const ironManMap = Immutable.fromJS({
  hero: {
    ironMan: {
      realName: 'Tony Stark',
      partner: 'Pepper Potts'
    }
  }
});

const updatedIronMan = ironManMap.setIn(['hero', 'ironMan', 'realName'], 'Anthony Stark'); 

// Output:
updatedIronMan;

請注意，與Map.set（）不同的是，Map.setIn（）將一個新的鍵/值對添加到Map中，替換了現有鍵的值。如果要在深度嵌套的Map中添加新的鍵/值對，則需要使用Map.updateIn（）或Map.mergeIn

Updaters

Map.set（）和Map.update（）之間的區別很微妙。它們都允許您更改Map中鍵的值，但是通過允許您提供自己的函數來管理更新,update（）使您可以更好地控制更新過程。

有三種方法可以使用它：

• 作用於整個Map
  • const newMap = oldMap.update((oldMap) => { /* update oldMap */ })
• 簡單的鍵/值 對
  • const newMap = oldMap.update(key, (value) => { /* update value */ })
• 作於於在單個鍵/值對上，並且如果該鍵不存在則提供默認值
  • const newMap = oldMap.update(key, 'defaultValue', (value) => { /* update value */ })

更新整個Map

// Act on the whole Map

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

const updatedAvengers = avengersMap.update((avengers) => {
  // avengers is a Map, so we need to return the value from set() to change
  // its values
  return avengers.set('ironMan', 'is Tony Stark');
});

// Output:
updatedAvengers

 {
  blackWidow: "Natasha Romanov",
  captainAmerica: "Steve Rogers",
  ironMan: "is Tony Stark"
}

鍵/值 對

// Act on a single key/value in a Map

const avengersMap = Immutable.Map({
  ironMan: 'Tony Stark',
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

const updatedAvengers = avengersMap.update('ironMan', (ironManValue) => {
  // ironManValue is a JavaScript type - no need for Immutable 
  // functions to modify it
  return ironManValue + ' is ironMan';
});

// Output:
updatedAvengers

對單個鍵/值進行操作，如果鍵不存在，則提供默認值

// Act on a single value in a Map, with a default value if the
// key doesn't exist

const avengersMap = Immutable.Map({
  captainAmerica: 'Steve Rogers',
  blackWidow: 'Natasha Romanov'
});

const updatedAvengers = avengersMap.update('theHulk', 'Bruce Banner', (theHulkValue) => {
  return theHulkValue + ' Smash!';
});

// Output:
updatedAvengers

Deleters

Delete a key from a Map

// Delete a key from a Map

const ironManMap = Immutable.Map({
  ironMan: 'Tony Stark',
  partner: 'Pepper Potts'
});

const lonelyIronMan = ironManMap.delete('partner'); 

// Output:
lonelyIronMan;

Delete a key from a Deeply Nested Map

// Delete a key from a deeply-nested Map

const ironManMap = Immutable.fromJS({
  hero: {
    ironMan: {
      realName: 'Tony Stark',
      partner: 'Pepper Potts'
    }
  }
});

const lonelyIronMan = ironManMap.deleteIn(['hero', 'ironMan', 'partner']); 

// Output:
lonelyIronMan;

Delete all values from a Map with clear()

// Clear all values from a Map

const ironManMap = Immutable.fromJS({
  hero: {
    ironMan: {
      realName: 'Tony Stark',
      partner: 'Pepper Potts'
    }
  }
});

const emptyIronMan = ironManMap.clear(); 

// Output:
emptyIronMan;

Merging Maps

現在我們已經為各個地圖做了各種各樣的事情，現在該看看我們如何將兩個或更多的地圖合並在一起。當然，這並不像聽起來那么簡單，至少有六種不同的合並方式，取決於你想達到的目標。