【譯】Immutable.js : 操作 Set -8

阿新 • • 發佈：2019-01-15

不可變集提供了強大的集合操作，如相交，聯合和減法。本教程將向您展示如何使用它們，以及何時使用它們來代替合併列表

什麼時候使用Sets和Union，Intersect和Subtract方法

Set的獨特性質是其值始終是唯一的。不可變的設定方法強制這種唯一性，並會自動防止重複被新增到一個集，而不會引發異常。

當使用三個特定於Set的方法（union，intersect和subtract）時，一個Set真正進入自己的狀態。

Set.union()將兩個值的值組合在一起，確保不存在重複。 Union返回Set B的值與Set A的值，刪除重複項。它不同於List.merge（），List.merge（）覆蓋列表A的值與列表B中存在於同一索引處的值。相反，Set.union（）結合了兩組值。

Set.intersect()提供了兩個集合A和B，並返回一個只包含A和B中存在的值的集合。
Set.subtract()需要兩個集合A和B，並返回一個只包含A中存在的值但不存在於B中的集合。

How to operate on an Immutable Set

原始值（number,string）

當執行Set操作時（即減法，相交或聯合），您需要了解JavaScript如何處理相等性。使用JavaScript原始值（布林值，數字，字串，空值和未定義值），等同於您所期望的：例如，2總是等於2，而'string'=== string'。

Working with JavaScript Objects

但是，使用JavaScript物件則是非常不同的。具體而言，一個物件只有等於自己。使用相同的鍵和值建立兩個獨立的物件不會使它們相等。

這是因為物件是通過引用（即它們在記憶體中的位置）進行比較的，而基元是通過值進行比較的。如果兩個數字具有相同的值，則認為它們是相等的。然而，具有相同值的兩個物件將總是駐留在兩個不同的儲存器位置，因此不能相等。

const obj1 = { key: 'value' };
const obj2 = { key: 'value' }

// The values assigned obj1 and obj2 reside in two different memory locations. 
// They are therefore not equal:
obj1 === obj2;

// OUTPUT

false

為什麼這很重要？因為一個集合必須有唯一的值，為了檢查重複，它需要知道（你也是這樣！）是什麼使一個值等於另一個值。在基元的情況下，它本身就是值，但是在物件的情況下，平等就是記憶體的位置。

// NOTE: does NOT work

// Create a Set of objects, none of which are assigned to a variable
const avengersSet = Immutable.Set([{ blackWidow: 'Natasha Romanov' }, { captainAmerica: 'Steve Rogers' }]);

// Try to remove blackWidow using the key/value pair, and it won't work
avengersSet.subtract([{ blackWidow: 'Natasha Romanov' }]);

在這個例子中傳遞給Set的每個物件都存在於一個特定的記憶體位置，但是因為它沒有被分配給一個變數，所以沒有辦法引用它。僅僅使用鍵/值對作為subtract（）方法中的引數是不夠的，因為這只是在不同的記憶體位置建立單獨的物件，因此具有不同的標識。

對於兩個被視為相等的物件，您必須建立一個物件，為其分配兩個不同的變數，然後比較這些變數是否相等。這樣，記憶體中只有一個物件，分配給它的每個變數指向記憶體中的單個位置;因此，這兩個變數是相等的，因為它們都指向相同的物件。

const obj1 = { key: 'value' };
const obj2 = obj1;
obj1 === obj2;

// OUTPUT: true

將其應用於Set的函式，為了安全地使用物件集合中的相減(subtract)，相交(intersect)或聯合(union)，我們必須建立一組分配的物件：也就是，一組變數，其中每個變數都被分配給一個物件，而不是一組物件直接。

// Create variables and assign them to objects
const blackWidow = {
  blackWidow: 'Natasha Romanov'
};

const captainAmerica = {
  captainAmerica: 'Steve Rogers'
}

// Create a Set of variables, each of which is assigned to an object
const avengersSet = Immutable.Set([captainAmerica, blackWidow]);

// Output:
avengersSet.subtract([blackWidow]);

[[object Object] {
  captainAmerica: "Steve Rogers"
}]

Working with Immutable objects (Map, List, Set, etc.)

由於使用JavaScript物件的困難，Immutable以Immutable.is（）方法的形式為其物件（Map，List，Set等）提供了自己的等式方法，它將兩個不可變物件視為等於if他們的價值是相等的。

也就是說，即使它們是兩個不同的物件（即它們駐留在不同的儲存器位置中），以下兩個不可變對映也被視為相等：

// Create variables and assign them to objects
const obj1 = Immutable.Map({ key: 'value' });
const obj2 = Immutable.Map({ key: 'value' });

Immutable.is(obj1, obj2);

// OUTPUT: true

這適用於任何不可變的物件，而不僅僅是地圖。 Immutable.is（）方法由Set的方法在內部使用，以確定在對不可變物件進行操作時的相等性，這使得使用這些物件的集合比使用普通JavaScript物件的集合更容易。

因此，考慮到這一切，讓我們看看一些不可變的Set操作實際工作的例子。

Subtract

…a string from a Set of strings

請記住，即使只有一個要減去的值，Set.subtract（）中的引數也必須始終是一個數組。

// Subtract an string from a Set of strings
const avengersSet = Immutable.Set(['ironMan', 'captainAmerica', 'blackWidow']);

// Output:
avengersSet.subtract(['blackWidow']);

["ironMan", "captainAmerica"]

…an array of strings from a Set of strings

// Subtract an string from a Set of strings
const avengersSet = Immutable.Set(['ironMan', 'captainAmerica', 'blackWidow']);
avengersSet.subtract(['blackWidow', 'captainAmerica']);

// Output:
["ironMan"]

…an object from a Set of objects

// Subtract an object from a Set of objects

// Subtract blackWidow from avengersSet
const blackWidow = {
  blackWidow: 'Natasha Romanov'
};

const avengersSet = Immutable.Set([{
  ironMan: 'Tony Stark'
}, {
  captainAmerica: 'Steve Rogers'
}, blackWidow]);

// Output:
avengersSet.subtract([blackWidow]);

[[object Object] {
  ironMan: "Tony Stark"
}, [object Object] {
  captainAmerica: "Steve Rogers"
}]

請注意，名為blackWidow的變數首先分配給物件{blackWidow：'Natasha Romanova'}，然後新增為avengersSet的一部分。我們這樣做是為了在subtract（）方法中使用blackWowow來識別我們要減去的物件。

值得重複的是，您不能使用鍵/值對來標識要從物件集合中減去的物件：您必須先將物件分配給物件，然後在subtract（）方法中使用該變數名稱。

…an array of objects from a Set of objects

// Subtract an object from a Set of objects

// Subtract blackWidow and captainAmerica from avengersSet
const blackWidow = {
  blackWidow: 'Natasha Romanov'
};

const captainAmerica = {
  captainAmerica: 'Steve Rogers'
}

const avengersSet = Immutable.Set([{
  ironMan: 'Tony Stark'
}, captainAmerica, blackWidow]);

// Output:
avengersSet.subtract([blackWidow, captainAmerica]);



[[object Object] {
  ironMan: "Tony Stark"
}]

…a Map from a Set of Maps

// Subtract a Map from a Set of Maps

// First, create our Maps
const ironMan = Immutable.fromJS([{
  ironMan: 'Tony Stark'
}, {
  captainAmerica: 'Steve Rogers'
}, {
  blackWidow: 'Natasha Romanov'
}]);

// Create a Set of Maps
const avengersSet = Immutable.Set(ironMan);

// Now subtract blackWidow (sorry Natasha)
avengersSet.subtract([Immutable.fromJS({
  blackWidow: 'Natasha Romanov'
})]);

// OUTPUT

[[object Object] {
  ironMan: "Tony Stark"
}, [object Object] {
  captainAmerica: "Steve Rogers"
}]

…a List from a Set of Lists

// Subtract a List from a Set of Lists

// First, create our Lists
const avengers = Immutable.fromJS([
  ['ironMan', 'Tony Stark'], 
  ['captainAmerica', 'Steve Rogers'],
  ['blackWidow', 'Natasha Romanov']]);

// Create a Set of Lists
const avengersSet = Immutable.Set(avengers);

// Now subtract ironMan (so long, Tony)
const ironMan = Immutable.List(['ironMan', 'Tony Stark'])

// Remember, subtract requires its arguments to be placed in an array
avengersSet.subtract([ironMan]);

…one Set from another

// Subtract a Set from another Set

// First, create our Sets
const ironMan = Immutable.Set(['ironMan', 'Tony Stark']);

const captainAmerica = Immutable.Set(['captainAmerica', 'Steve Rogers']);

const blackWidow = Immutable.Set(['blackWidow', 'Natasha Romanov']);

// Create a Set of Sets
const avengersSet = Immutable.Set([ironMan, captainAmerica, blackWidow]);

// Now subtract captainAmerica (bye Steve)
avengersSet.subtract([Immutable.Set(['captainAmerica', 'Steve Rogers'])]);

Union

…two sets of strings

// Create a union of two Sets of strings
const avengersCast = Immutable.Set(['ironMan', 'captainAmerica', 'blackWidow']);
const civilWarCast = Immutable.Set(['ironMan', 'antMan', 'spiderMan']);

// Output:
avengersCast.union(civilWarCast);

…a Set of strings and an array of strings

// Create a union of two Sets of strings
const avengersCast = Immutable.Set(['ironMan', 'captainAmerica', 'blackWidow']);

// Output:
avengersCast.union(['ironMan', 'antMan', 'spiderMan']);

…a Set of objects and an object

// Add an object to a set of objects with union

// Add blackWidow to avengersSet
const blackWidow = {
  blackWidow: 'Natasha Romanov'
};

const avengersSet = Immutable.Set([{
  ironMan: 'Tony Stark'
}, {
  captainAmerica: 'Steve Rogers'
}, blackWidow]);

// Output:
avengersSet.union([blackWidow]);

…a Set of Maps and a Map

// Add a Map to a Set of Maps

// First, create our Maps
const ironMan = Immutable.fromJS([{
  ironMan: 'Tony Stark'
},{
  captainAmerica: 'Steve Rogers'
}]);

// Create a Set of Maps
const avengersSet = Immutable.Set(ironMan);

// Now add blackWidow (hello Natasha)
avengersSet.union([Immutable.Map({
  blackWidow: 'Natasha Romanov'
})]);

…a Set of Maps and an object

// Add a Map to a Set of Maps

// First, create our Maps
const ironMan = Immutable.fromJS([{
  ironMan: 'Tony Stark'
},{
  captainAmerica: 'Steve Rogers'
}]);

// Create a Set of Maps
const avengersSet = Immutable.Set(ironMan);

// Now add blackWidow (hello Natasha)
avengersSet.union([{
  blackWidow: 'Natasha Romanov'
}]);

…a Set of Lists and a List

// Add a List to a Set of Lists

// First, create our Lists
const ironMan = Immutable.List(['ironMan', 'Tony Stark']);

const captainAmerica = Immutable.List(['captainAmerica', 'Steve Rogers']);

const blackWidow = Immutable.List(['blackWidow', 'Natasha Romanov']);

// Create a Set of Lists
const avengersSet = Immutable.Set([captainAmerica, blackWidow]);

// Now add ironMan (Hi, Tony)
avengersSet.union([ironMan]);

…two Sets

// Add a Set to another Set

// First, create our Sets
const ironMan = Immutable.Set(['ironMan', 'Tony Stark']);

const captainAmerica = Immutable.Set(['captainAmerica', 'Steve Rogers']);

const blackWidow = Immutable.Set(['blackWidow', 'Natasha Romanov']);

// Create a union of two Sets
const avengersSet = Immutable.Set([ironMan, blackWidow]);

// Now add captainAmerica
avengersSet.union([captainAmerica]);

Intersect

兩個集合的交集是僅包含兩個集合中存在的那些值的集合。如果一個值存在於集合A中，而不是集合B（反之亦然），那麼它不包含在返回的相交集合中。

…two Sets of objects

// Intersect two Sets of objects

// intersect avengersCast with civilWar cast
const blackWidow = {
  blackWidow: 'Natasha Romanov'
};

const ironMan = {
  ironMan: 'Tony Stark'
};

const captainAmerica = {
  captainAmerica: 'Steve Rogers'
};

const theHulk = {
  theHulk: 'Bruce Banner'
};

const antMan = {
  antMan: 'Scott Lang'
};

const spiderMan = {
  spiderMan: 'Peter Parker'
};

const avengersCast = Immutable.Set([ironMan, captainAmerica, blackWidow, theHulk]);
const civilWarCast = Immutable.Set([ironMan, captainAmerica, blackWidow, antMan, spiderMan]);

// Output: who was in Avengers and Civil War?
avengersCast.intersect(civilWarCast);

…two Sets of arrays

// Intersect two Sets of arrays

const ironCapArray = ['ironMan', 'captainAmerica'];
const blackHulkArray = ['blackWidow', 'theHulk'];
const spiderAntArray = ['spiderMan', 'antMan'];

const avengersCast = Immutable.Set([ironCapArray, blackHulkArray]);
const civilWarCast = Immutable.Set([ironCapArray, spiderAntArray]);

// Output:
avengersCast.intersect(civilWarCast);

…two Sets of Maps

// Intersect two Sets of Maps

// First, use fromJS() to create a List of Maps
const avengersCast = Immutable.fromJS([{
  blackWidow: 'Natasha Romanov'
}, {
  ironMan: 'Tony Stark'
}, {
  captainAmerica: 'Steve Rogers'
}, {
  theHulk: 'Bruce Banner'
}]);

const civilWarCast = Immutable.fromJS([{
  blackWidow: 'Natasha Romanov'
}, {
  ironMan: 'Tony Stark'
}, {
  captainAmerica: 'Steve Rogers'
}, {
  antMan: 'Scott Lang'
}, {
  spiderMan: 'Peter Parker'
}]);

// Now create two Sets of Maps
const avengersSet = Immutable.Set(avengersCast);
const civilWarSet = Immutable.Set(civilWarCast);

// Output: who was in Avengers and Civil War?
avengersSet.intersect(civilWarCast);

…two Sets of Lists

// Intersect two Sets of arrays

const ironCapList = Immutable.List(['ironMan', 'captainAmerica']);
const blackHulkList = Immutable.List(['blackWidow', 'theHulk']);
const spiderAntList = Immutable.List(['spiderMan', 'antMan']);

const avengersCast = Immutable.Set([ironCapList, blackHulkList]);
const civilWarCast = Immutable.Set([ironCapList, spiderAntList]);

// Output:
avengersCast.intersect(civilWarCast);

…two Sets of Sets

// Intersect two Sets of arrays

const ironCapSet = Immutable.Set(['ironMan', 'captainAmerica']);
const blackHulkSet = Immutable.Set(['blackWidow', 'theHulk']);
const spiderAntSet = Immutable.Set(['spiderMan', 'antMan']);

const avengersCast = Immutable.Set([ironCapSet, blackHulkSet]);
const civilWarCast = Immutable.Set([ironCapSet, spiderAntSet]);

// Output:
avengersCast.intersect(civilWarCast);