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