当前位置: 首页 > 工具软件 > pepper.js > 使用案例 >

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

范飞翰
2023-12-01

我们知道如何创建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

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

转载于:https://www.cnblogs.com/hxling/articles/8056039.html

 类似资料: