变量声明条件语法 [英] variable declaration conditional syntax

问题描述

当我看到以下内容时，我正在寻找一些很棒的d3.js 代码示例。

I was looking some great d3.js code examples when I saw something like:

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节点。

I didn't get immediately how the var nodes was being declared.

我的第一个猜测是将其翻译成：

My first guess was to translate it into:

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};
  }
});

但不再绘制链接。

这两种方法有什么区别？

What is the difference between the two methods?

初始语法的重点是，只是一条捷径还是增加了性能？

What is the point of the initial syntax, is that just a shortcut or do it increase performances?

在这种情况下是否有最佳做法？

Is there a best practice to follow in such cases ?

修改

所以如果我试图完全理解

So if I try to fully understand

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

1. 作为 nodes [link.source] 是一个对象 link.source 获取它的引用。总是会发生这种情况。

1. As nodes[link.source] is an object link.source takes its reference. This is always happening.

OR条件，我不确定会得到那部分。

OR condition, I'm not sure to get that part.

我想如果节点[link.source] 被定义 link.source = nodes [link.source] 返回true，我们不需要更进一步。

I guess if nodes[link.source] is defined link.source = nodes[link.source] return true we don't need go further.

如果没有定义并返回false，则OR条款强制进一步......

If it's not defined and return false, the OR clause force to go further...

节点[link.source] 得到一个值，因为引用 link.source 指向相同的值。

nodes[link.source] gets a value so thanks to the reference link.source is pointing to the same value.

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

I guess at this stage link.source is not yet containing a reference to nodes[link.source], but its initial value. It will contain the new reference after the comma.

我错了吗？第2点对我来说似乎很奇怪。

Am I wrong somewhere ? Point 2 seems strange to me.

推荐答案

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

The code used in the example is simply a syntactial shortcut. It is equivalent to

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];
  }
});

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

All of this is necessary because the nodes are only declared implicitly through the links -- that is, there's no list of nodes, it is only assembled by traversing the links and "harvesting" the sources and targets. This is what's stored in nodes -- it's a mapping from the ID of the node (from the links) to the object representing the node.

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

The code above simultaneously populates this map by creating new objects for unseen nodes (i.e. ones which are not present in the mapping) and inserting the respective mapping. The sources and targets of the links are then updated to point to those objects (which will later be operated on by the force layout to set their positions) instead of the ID of the node as referenced in the original data.

编辑：您编辑的解释是正确的。这基本上就是发生了什么。

Your edited interpretations are correct. This is basically what's happening.

这篇关于变量声明条件语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！