流程圖控件GoJS教程：集合類
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
GoJS現已更新至最新版本2.0.17發布，修復了一些bug，增強用戶體驗，趕快下載試試吧~
GoJS提供了自己的集合類：List，Set和Map。您可以使用Iterator遍歷集合。
與將JavaScript數組用作列表或將對象用作地圖相比，這些集合類具有多個優點。如果自獲取迭代器以來對集合進行了修改，則在嘗試獲取迭代器的下一項時，它們會引發錯誤?？梢詫⑺鼈冊O為只讀，以避免意外的修改。它們提供了在簡單數組或對象（例如Iterator.any，Iterator.all和Iterator.each）上找不到的方法。如果您使用TypeScript編寫，則可以選擇對項目類型強制執行編譯時類型檢查。
在GoJS中，大多數返回描述圖結構的集合的屬性和方法都返回一個Iterator。那是因為集合的實現是內部的-您只需要知道如何遍歷結果集合即可。其他方法或屬性將允許您修改圖表。一個示例是Diagram.nodes，它以迭代器的形式返回圖中的Node和Group的當前集合。當程序員在模型中添加或刪除節點數據時，或者通過直接調用Diagram.add或Diagram.remove，將自動修改該集合 。
但是，有一些屬性可以返回允許修改的集合。示例包括通常在初始化后凍結的類的集合： Geometry.figures，PathFigure.segments和Brush.colorStops。其他示例包括很少被修改的集合，通常僅在圖初始化時才進行修改： ToolManager.mouseDownTools（和其他工具列表）和Diagram.nodeTemplateMap （和其他模板圖）。
列表
一個列表是由整數索引的一個從零小于計數值的有序集合。
var l = new go.List();
l.add("A");
l.add("B");
l.add("C");
assert(l.count === 3);
assert(l.elt(0) === "A");
assert(l.has("B"));
assert(l.indexOf("B") === 1);
l.setElt(1, "z"); // replace an item
assert(l.elt(1) === "z");
l.removeAt(1); // remove an item
assert(l.count === 2);
assert(l.elt(1) === "C");在2.0中，List構造函數的可選參數已刪除。但是，如果你在寫打字稿，GoJS集合類（List，Map，Set）現在是通用的，并會幫助你執行類型：
// TypeScript:
var l = new go.List<string>(); // Create a list of only strings
l.add("A");
l.add(23); // throws an error during compilation or in an IDE
l.add({}); // throws an error during compilation or in an IDE要遍歷List，請獲取其List.iterator，然后對其調用Iterator.next 以提高其在列表中的位置。它的Iterator.value將是一個列表項；它的Iterator.key將是列表中的相應索引。
var l = new go.List();
l.add("A");
l.add("B");
l.add("C");
var it = l.iterator;
while (it.next()) {
console.log(it.key + ": " + it.value);
}
// This outputs:
// 0: A
// 1: B
// 2: C組
一組是值的無序集合，不允許重復的值。此類類似于SetECMAScript 2015（ES6）中定義的對象。
Set構造函數 的可選參數指定可以添加到集合中的項的類型。
var s = new go.Set();
s.add("A");
s.add("B");
s.add("C");
s.add("B"); // duplicate is ignored
assert(s.count === 3);
assert(s.has("B"));
s.remove("B"); // remove an item
assert(s.count === 2);
assert(!s.has("B"));與List和一樣Map，在2.0中，Set構造函數的可選參數已刪除，但現在它是TypeScript中的泛型類，可以強制執行類型：
// TypeScript:
var s = new go.Set<string>(); // Create a set of only strings
s.add("A");
s.add(23); // throws an error during compilation or in an IDE
s.add({}); // throws an error during compilation or in an IDE遍歷Set中 的項目就像遍歷List一樣，只是項目的順序可能會有所不同。
var s = new go.Set();
s.add("A");
s.add("B");
s.add("C");
s.add("B"); // duplicate is ignored
var it = s.iterator;
while (it.next()) {
console.log(it.value);
}
// This might output, perhaps in different order:
// A
// B
// C地圖
一個地圖是由密鑰索引鍵-值對的無序集合。此類類似于MapECMAScript 2015（ES6）中定義的對象。
Map構造函數 的兩個可選參數指定鍵的類型以及可以添加到地圖的項目值的類型。
var m = new go.Map();
m.add("A", 1); // associate "A" with 1
m.add("B", 2);
m.add("C", 3);
assert(s.count === 3);
assert(s.has("B"));
assert(s.get("B") === 2);
m.add("B", 222); // replace the value for "B"
assert(s.get("B") === 222);
s.remove("B"); // remove an item
assert(s.count === 2);
assert(!s.has("B"));
assert(s.get("B") === null);與List和一樣Set，在2.0中，已刪除了Map構造函數的可選參數，但現在它是TypeScript中的泛型類，可以強制執行類型：
// TypeScript:
var m = new go.Map<string, number>(); // Create a map of strings to numbers
m.add("A", 1);
m.add(23, 23); // throws an error during compilation or in an IDE
m.add({}, 23); // throws an error during compilation or in an IDE遍歷Map中 的項目就像遍歷List一樣，但是提供對鍵和值的訪問。與Set一樣，項目的順序可能有所不同。
var m = new go.Map();
m.add("A", 1); // associate "A" with 1
m.add("B", 2);
m.add("C", 3);
m.add("B", 222); // replace the value for "B"
// Normal iteration lets you get both the key and its corresponding value:
var it = m.iterator;
while (it.next()) {
console.log(it.key + ": " + it.value);
}
// This might output, perhaps in different order:
// A: 1
// B: 222
// C: 3
// To get a collection of the keys, use Map.iteratorKeys:
var kit = m.iteratorKeys;
while (kit.next()) {
console.log(kit.value);
}
// This might output, perhaps in different order:
// A
// B
// C
// To get a collection of the values, use Map.iteratorValues:
var vit = m.iteratorValues;
while (vit.next()) {
console.log(vit.value);
}
// This might output, perhaps in different order:
// 1
// 222
// 3當需要將集合傳遞給采用Iterator的其他方法時， 通常使用Map.iteratorKeys或Map.iteratorValues。
更多迭代示例
這是司空見慣的遍歷選定部分一第圖：
for (var it = diagram.selection.iterator; it.next(); ) {
var part = it.value; // part is now a Node or a Group or a Link or maybe a simple Part
if (part instanceof go.Node) { . . . }
else if (part instanceof go.Link) { . . . }
}或者
diagram.selection.each(function(part) {
// part is now a Node or a Group or a Link or maybe a simple Part
if (part instanceof go.Node) { . . . }
else if (part instanceof go.Link) { . . . }
});有時一個需要遍歷節點 ■在一個圖表：
for (var it = diagram.nodes; it.next(); ) {
var n = it.value; // n is now a Node or a Group
if (n.category === "Special") { . . . }
}您還可以遍歷Node中的端口元素或連接到端口元素的Link：
for (var pit = node.ports; pit.next(); ) {
var port = pit.value; // port is now a GraphObject within the node
for (var lit = node.findLinksConnected(port.portId); lit.next(); ) {
var link = lit.value; // link is now a Link connected with the port
if (link.data.xyz === 17) { . . . }
}
}或者，也許您需要遍歷Panel的元素：
for (var it = panel.elements; it.next(); ) {
var elt = it.value; // elt is now a GraphObject that is an immediate child of the Panel
if (elt instanceof go.TextBlock) { . . . }
else if (elt instanceof go.Panel) { . . . recurse . . . }
}如果要查找作為Group直屬成員的Node：
for (var mit = group.memberParts; mit.next(); ) {
var part = mit.value; // part is now a Part within the Group
if (part instanceof go.Node) { . . . maybe work with part.data . . . }
}=====================================================
想要購買GoJS正版授權的朋友可以。
更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線