变量声明条件语法

Question

当我看到类似的东西时，我正在寻找一些很棒的 d3.js code examples：

var links = [
  {source: "test1", target: "test2"},
  {source: "test1", target: "test3"},
  {source: "test2", target: "test3"},
  {source: "test3", target: "test4"}
];

var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

我没有立即知道如何声明 var 节点。

我的第一个猜测是把它翻译成：

links.forEach(function(link) {
  if(link.source != nodes[link.source]){
    nodes[link.source] = {name: link.source};
  }
  if(link.target != nodes[link.target]){
    nodes[link.target] = {name: link.target};
  }
});

但是链接不再绘制了。

这两种方法有什么区别？

初始语法的意义是什么，它只是一种快捷方式还是可以提高性能？

在这种情况下是否有最佳实践可以遵循？

编辑

所以如果我尝试完全理解

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

1. 由于 nodes[link.source] 是一个对象，link.source 需要它的引用。这总是在发生。

2. OR 条件，我不确定能得到那部分。

   我猜如果 nodes[link.source] 被定义 link.source = nodes[link.source] 返回 true 我们不需要更进一步。 p>

   如果没有定义并返回 false，OR 子句强制执行...

3. nodes[link.source] 获得了一个值，因此感谢引用 link.source 指向相同的值。

   我猜在这个阶段 link.source 还没有包含对 nodes[link.source] 的引用，而是它的初始值。它将包含逗号后的新引用。

我在某个地方错了吗？第 2 点对我来说似乎很奇怪。

Answer 1

示例中使用的代码只是一个语法快捷方式。相当于

links.forEach(function(link) {
  if(nodes[link.source]) { // we already know about the source of this link
    link.source = nodes[link.source];
  } else { // we haven't seen this source before, create a new node for it
    nodes[link.source] = {name: link.source};
    link.source = nodes[link.source];
  }

  if(nodes[link.target]) { // we already know about the target of this link
    link.target = nodes[link.target];
  } else { // we haven't seen this target before, create a new node for it
    nodes[link.target] = {name: link.target};
    link.target = nodes[link.target];
  }
});

所有这些都是必要的，因为节点只是通过链接隐式声明的——也就是说，没有节点列表，它只是通过遍历链接和“收获”源和目标来组装的。这是存储在nodes 中的内容——它是从节点 ID（来自链接）到代表节点的对象的映射。

上面的代码同时通过为看不见的节点（即映射中不存在的节点）创建新对象并插入相应的映射来填充此映射。然后更新链接的源和目标以指向这些对象（稍后将由力布局对其进行操作以设置其位置），而不是原始数据中引用的节点 ID。

编辑：您编辑的解释是正确的。基本上就是这样。

Answer 2

我的理解

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

是，如果nodes[link.source] 不存在

那么就做link.source = nodes[link.source] = {name: link.source};

Answer 3

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

可以翻译成：

if(!nodes[link.source]) {
    nodes[link.source] = {name: link.source};
}
link.source = nodes[link.source];

（与link.target 相同）。

所以：

var links = [
  {source: "test1", target: "test2"},
  {source: "test1", target: "test3"},
  {source: "test2", target: "test3"},
  {source: "test3", target: "test4"}
];

将被转换为：

links = [
  {source: { name: "test1" }, target: { name: "test2" }},
  {source: { name: "test1" }, target: { name: "test3" }},
  {source: { name: "test2" }, target: { name: "test3" }},
  {source: { name: "test3" }, target: { name: "test4" }}
];

和节点将等于：

nodes = {
    "test1": { name: "test1" },
    "test2": { name: "test2" },
    "test3": { name: "test3" },
    "test4": { name: "test4" },
}