Javascript 理解“无阴影变量”tslint 警告
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44853057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making Sense of 'No Shadowed Variable' tslint Warning
提问by Ademo
I have a function that checks for the current stage in a sequential stream, based on a particular discipline that is passed in, and, according to that value, assigns the next value in my Angular 2 app. It looks something like this:
我有一个函数，它根据传入的特定学科检查顺序流中的当前阶段，并根据该值在我的 Angular 2 应用程序中分配下一个值。它看起来像这样：
private getNextStageStep(currentDisciplineSelected) {
const nextStageStep = '';
if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
const nextStageStep = 'step 2';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
const nextStageStep = 'step 3';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
const nextStageStep = 'step 4';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
const nextStageStep = 'step 5';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
const nextStageStep = 'step 6';
}
return nextStageStep;
}
What I'm doing here is returning the value of "nextStageStep", because that's what I'll be then passing in order for the correct stage step to happen.
我在这里做的是返回“nextStageStep”的值，因为这就是我将要传递的值，以便正确的阶段步骤发生。
Right now, my tslint is underlining each of the "nextStageStep" variable occurrences with the warning "no shadowed variables". If I remove the line where I initialize to an empty string that warning goes away, but then I get the error, "Cannot find nextStageStep" showing up in my return statement.
现在，我的 tslint 在每个“nextStageStep”变量出现下划线，并带有警告“无阴影变量”。如果我删除初始化为警告消失的空字符串的行，但随后我收到错误消息，“无法找到 nextStageStep”出现在我的返回语句中。
What is the issue with the original shadowed variable warning, and is there an alternative way to write this, and/or should I simply ignore the tslint warning in this situation?
原始阴影变量警告有什么问题，有没有其他方法可以写这个，和/或在这种情况下我应该简单地忽略 tslint 警告？
回答by toskv
The linter complains because you are redefining the same variable multiple times. Thus replacing the ones in the closure containing it.
linter 抱怨是因为您多次重新定义同一个变量。因此替换包含它的闭包中的那些。
Instead of redeclaring it just use it:
而不是重新声明它只是使用它：
private getNextStageStep(currentDisciplineSelected) {
let nextStageStep = '';
if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
nextStageStep = 'step 2';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
nextStageStep = 'step 3';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
nextStageStep = 'step 4';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
nextStageStep = 'step 5';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
nextStageStep = 'step 6';
}
return nextStageStep;
}
回答by LLai
This has to do with defining the same variable in different scopes. You are defining nextStageStepwithin the function scope & also within each if block. One option is to get rid of the variable declarations in the if blocks
这与在不同范围内定义相同的变量有关。您nextStageStep在函数范围内以及每个 if 块内进行定义。一种选择是去掉 if 块中的变量声明
if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 1') {
nextStageStep = 'step 2';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 2') {
nextStageStep = 'step 3';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 3') {
nextStageStep = 'step 4';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 4') {
nextStageStep = 'step 5';
} else if (this.stageForDiscipline(this.currentDisciplineSelected) === 'step 5') {
nextStageStep = 'step 6';
}
Here is a good resource on shadowed variables http://eslint.org/docs/rules/no-shadow
这是一个关于阴影变量的好资源http://eslint.org/docs/rules/no-shadow
回答by Charles Hebdough
Addording to : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
添加到：https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
ES6 const is BLOCK-SCOPED, thus:
ES6 const 是块范围的，因此：
{
const TAG='<yourIt>';
console.log(TAG);
}
{
const TAG = '<touchingBase NoImNOt="true">';
console.log(TAG);
}
console.log(TAG); // ERROR expected
AFAICT, this is NOTa case of shadowing - each of the constants is soped correctly within its braces.
AFAICT，这不是阴影的情况 - 每个常量都在其大括号内正确地变了。
If we cannot re-use variable names, we will wind up with unreadable programs that obscure. rather than inform.
如果我们不能重用变量名，我们最终会得到一些晦涩难懂的程序。而不是通知。
I believe the warning is wrong-headed
我相信警告是错误的
回答by FatL
You are re-declaring the same variable const nextStageStepin each if block.
您正在const nextStageStep每个 if 块中重新声明相同的变量。
Juste replace const nextStageStep = 'step 2';with nextStageStep = 'step 2';(and all the other if cases) and it'll be all right.
Juste 替换const nextStageStep = 'step 2';为nextStageStep = 'step 2';（以及所有其他情况），就可以了。
回答by Junaid
In general this error occurs When a variable in a local scope and a variable in the containing scope have the same name, shadowing occurs. Shadowing makes it impossible to access the variable in the containing scope and obscures to what value an identifier actually refers
通常，当局部作用域中的变量和包含作用域中的变量具有相同名称时，会发生此错误。阴影使得无法访问包含范围内的变量，并掩盖了标识符实际引用的值
Refer to this articlefor code samples explaining this.
回答by Sridhar K
First of all, even if you proceed with the warnings, your function "getNextStageStep()" will always return the empty value,
首先，即使您继续警告，您的函数“ getNextStageStep()”也将始终返回空值，
Because "
const" a is block-scopedvariable, andIt does not supports re-definingof value [Initialized value cannot be changed].
因为 "
const" a 是块范围的变量，并且不支持重新定义值[初始化的值不能改变]。
In returnblock variable "nextStageStep" contains empty string value, and inner blocks "nextStageStep" variables will not mask or override the outer block's "nextStageStep" variable value.
在return块变量“ nextStageStep”包含空字符串值，和内部块“ nextStageStep”变量将不会掩蔽或覆盖外块的“ nextStageStep”变量的值。
So whenever you return "nextStageStep", it will always return empty string.
所以每当你返回“ nextStageStep”时，它总是会返回空字符串。
Inner blocks "nextStageStep" variables scope is within that if block only and here outer block "nextStageStep" variable is completely different from inner block "nextStageStep" variables.
内部块“ nextStageStep”变量范围仅在 if 块内，这里外部块“ nextStageStep”变量与内部块“ nextStageStep”变量完全不同。
So if you want your code to workand if you mustwant to use constvariables, then use multiple return statements within if blocks.
因此，如果您希望您的代码正常工作并且您必须要使用const变量，那么请在 if 块中使用多个 return 语句。
Below is the code I checked and working fine. you can use it according to your requirement.
下面是我检查的代码并且工作正常。您可以根据您的要求使用它。
function getNextStageStep(currentDisciplineSelected) {
const nextStageStep = '';
if (currentDisciplineSelected === 'step 1') {
const nextStageStep = 'step 2';
return nextStageStep;
} else if (currentDisciplineSelected === 'step 2') {
const nextStageStep = 'step 3';
return nextStageStep;
} else if (currentDisciplineSelected === 'step 3') {
const nextStageStep = 'step 4';
return nextStageStep;
} else if (currentDisciplineSelected === 'step 4') {
const nextStageStep = 'step 5';
return nextStageStep;
} else if (currentDisciplineSelected === 'step 5') {
const nextStageStep = 'step 6';
return nextStageStep;
}
return nextStageStep;
}
console.log(getNextStageStep('step 1'));
But instead writing these many return statements better to use letvariable which allows you to re-define the variable value. For your problem I think @toskvsolution is suitable.
但是，最好使用let允许您重新定义变量值的变量来编写这么多返回语句。对于您的问题，我认为@toskv解决方案是合适的。
回答by Pierrie Mostert
Locate and open your tslint.json file and set the following setting to false
找到并打开您的 tslint.json 文件并将以下设置设置为 false
"no-shadowed-variable": false,
When using visual studio, a restart of visual studio might be required.
使用 Visual Studio 时，可能需要重新启动 Visual Studio。
