声明一个let变量没有在Javascript中赋值，为什么?

Question

我在Javascript.info中发现了这个:在这里输入链接描述。

这是一个事件委托演示:一个9单元格的表格，当我们点击其中一个单元格时，单元格(event.target)将其颜色变为红色，而我们之前点击的单元格将返回其原始颜色。

我在徘徊如何可能声明let变量selectedTd而不赋值?(我在js代码中做了一个注释，以便向您展示代码使我困惑的地方)。谢谢你的帮助。

let table = document.getElementById('bagua-table');
let selectedTd;
table.onclick = function(event) {
let target = event.target;
while (target != this) {
if (target.tagName == 'TD') {
highlight(target);
return;
}
target = target.parentNode;
}
}
function highlight(node) {
if (selectedTd) {  // what does the "selectedTd" representes while it doesn't even has a value ?  
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}

#bagua-table th {
text-align: center;
font-weight: bold;
}
#bagua-table td {
width: 150px;
white-space: nowrap;
text-align: center;
vertical-align: bottom;
padding-top: 5px;
padding-bottom: 12px;
}
#bagua-table .nw {
background: #999;
}
#bagua-table .n {
background: #03f;
color: #fff;
}
#bagua-table .ne {
background: #ff6;
}
#bagua-table .w {
background: #ff0;
}
#bagua-table .c {
background: #60c;
color: #fff;
}
#bagua-table .e {
background: #09f;
color: #fff;
}
#bagua-table .sw {
background: #963;
color: #fff;
}
#bagua-table .s {
background: #f60;
color: #fff;
}
#bagua-table .se {
background: #0c3;
color: #fff;
}
#bagua-table .highlight {
background: red;
}

<table id="bagua-table">
<tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
</td>
</tr>
<tr>
<td class="w"><strong>West</strong>
<br>Metal
<br>Gold
<br>Youth
</td>
<td class="c"><strong>Center</strong>
<br>All
<br>Purple
<br>Harmony
</td>
<td class="e"><strong>East</strong>
<br>Wood
<br>Blue
<br>Future
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong>
<br>Earth
<br>Brown
<br>Tranquility
</td>
<td class="s"><strong>South</strong>
<br>Fire
<br>Orange
<br>Fame
</td>
<td class="se"><strong>Southeast</strong>
<br>Wood
<br>Green
<br>Romance
</td>
</tr>
</table>

Answer 1

当代码第一次进入onclick函数时，它的值是未定义的(因为还没有选择tds)，所以它不会进入if语句并执行它之后的下一行:

selectedTd = node;

因此，当用户下一次单击其中一个td时，该值被设置并且不再是未定义的，因此它进入if语句并删除先前选定td的背景色。

Answer 2

让我们来跟踪流程，在开始

1. selectedId is undefined
2. 点击单元格，函数运行
3. 它忽略If条件来移除高亮，因为之前没有选定的单元格
4. 它突出显示单元格并使被选中携带该节点的值，则函数退出
5. 我点击另一个单元格现在它运行If条件删除当前单元格的高亮部分并重复步骤4

Answer 3

function highlight(node) {
if (selectedTd) {  
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}

selectedTd开始为undefined，这个if语句检查它是否为真或返回一个值，如果是，则删除' highlight '类。

if (selectedTd) {  
selectedTd.classList.remove('highlight');
}

如果selectedTd返回undefined, false或没有值，这里我们将其设置为node，并添加'highlight'类。

selectedTd = node;
selectedTd.classList.add('highlight');

我们将node传递到这里的突出显示函数中，如果我们选择的目标是td元素，那么将其传递给突出显示函数并设置selectedTd =为目标。

while (target != this) {
if (target.tagName == 'TD') {
highlight(target);
return;
}