打字稿：在循环外访问变量答案

【问题标题】：Typescript: Access variable outside of a loop打字稿：在循环外访问变量
【发布时间】：2018-01-25 08:07:49
【问题描述】：

我创建了一个数组并希望在循环之外访问创建的元素。我知道它们不在范围内，并且在它前面写 this. 也不会使它们可访问。

colIdx = colIdx + this.columns.findIndex(c => c.editable);
this.focusInput(rowIdx, colIdx);
this.autocompletes.toArray().forEach(el => {
   console.log(el);
})

我有一张表格，里面有很多带有自动完成功能和建议面板的输入字段。我还有一个自定义方法，可以让用户使用 Enter 键进行选项卡。然而一开始，使用回车键并没有关闭自动完成的建议面板，因此过了一会儿所有的建议面板都打开了。

这就是我创建上述方法的原因。您实际上可以忽略前两行，因为使用 enter 进行制表时需要它们。

this.autocompletes 是一个包含我所有输入元素的查询列表。我把它们变成了一个数组，并把每个元素称为el。这样我就可以在 el 上调用 closePanel() 方法来关闭自动完成方法的建议面板。但是，这样做会关闭所有 el 元素的建议面板。这就是为什么我需要用户关注的 el 的索引并关闭它。

为此，我必须在创建它的 for 循环之外访问 el。

【问题讨论】：

你真正想要什么？它不清楚。你想做什么？
对不起，我会尽快编辑信息
为什么你需要el外面，你的意思是forEach用于过滤然后你可以.find或.filter或.some
What is the scope of variables in JavaScript?的可能重复

标签： javascript angular typescript frontend

【解决方案1】：

您可以像var arr: type = emptyArr[]; 这样在循环外初始化一个空数组，然后从循环内部将数据（el）推入其中。

要推送，请执行以下操作：arr.push(el) 从循环内部，然后在循环外部访问它。

【讨论】：

【解决方案2】：

最简单的方法是将它们分配给循环范围之外的数组：

elements: any[] = [];
colIdx = colIdx + this.columns.findIndex(c => c.editable);
this.focusInput(rowIdx, colIdx);
this.autocompletes.toArray().forEach(el => {
    console.log(el);
    this.elements.push(el);
});

// You can now loop over `this.elements` and do what you need with them.

【讨论】：

这只会推动元素数组中的所有 el 导致重复甚至错误的值
不知道为什么你会得到“错误”的值。重复，是的，但这基本上是问题所要求的。我不太确定他们为什么要循环然后在外面处理一些事情，但是如果没有那个上下文，你就无法给出更好的答案。
错误的值，例如如果从自动完成中删除了某些值，但它仍会出现在元素中。嗯，是的，这取决于他在做什么，但它仍然会导致错误和重复值。

【解决方案3】：

this.autocompletes 是一个包含我所有输入元素的查询列表

这意味着自动完成不会改变，您可以在 Init 调用中将其保存到局部变量中。

ex：如果您的表单有 4 个输入，它仍将包含 4，除非您将其从 dom 中删除。在创建/初始化期间将其保存在局部变量中。取决于您如何编写代码。

这是你可以做的。

//do not do .toArray again and again its just not usefull as your data is constant
elements: Array<any> = this.autocompletes.toArray();

...

elements.forEach(el => {
   //work on elements here
   //to check focus on el you could do something like this el.is(":focus")
});

【讨论】：