【译】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

现在我们已经为各个地图做了各种各样的事情，现在该看看我们如何将两个或更多的地图合并在一起。当然，这并不像听起来那么简单，至少有六种不同的合并方式，取决于你想达到的目标。