如何使这个大的if语句在JavaScript中更具可读性

Question

我需要在JavaScript中使以下大if语句更具可读性。

有任何想法吗？

if ( Tools.Array.contains( that.pAutocompleteAliasUsed[i], this.currentString) !== false  &&
    ( this.autocomplete.list.length === 0 ) || ( this.currentString.toLowerCase() !== this.autocomplete.list[0].target.alias.toLowerCase() ) )
{
    make something
}

Answer 1

 if( Tools.Array.contains( that.pAutocompleteAliasUsed[i], this.currentString) !== false  &&
        ( this.autocomplete.list.length === 0 ) || 
        ( this.currentString.toLowerCase() !== this.autocomplete.list[0].target.alias.toLowerCase() )
   )
 {
          // something
 }

Answer 2

使事情更具可读性可以做的一件事是从if语句中提取各种逻辑测试。 读取单个语句然后在if测试中很好地命名布尔参数要容易得多。

我已经为这个例子中的第一个测试做了这个，我已经和其他人一起去了，但是你知道他们正在测试什么，你可以比我更好地命名。

var toolsContainsString = Tools.Array.contains(that.pAutocompleteAliasUsed[i], this.currentString) !== false;
var isAutoCompleteEmpty = this.autocomplete.list.length === 0;
var isTargetMatch = this.currentString.toLowerCase() !== this.autocomplete.list[0].target.alias.toLowerCase();

if (toolsContainsString && (isAutoCompleteEmpty || isTargetMatch)) {
    //make something
}

Answer 3

当你进行复杂的测试时，最好（1）在明确定义的函数中提取部分测试，（2）给这些函数提供良好的名称，以解释函数的用途。

通过这种方式，只需读取方法名称即可了解函数正在执行和返回的内容。

 if (isAutoCompleteAliasUsed(i, currentString) 
          && notEmptyOrFirst(this.autocomplete, currentString){
     // make something
 }

 function isAutoCompleteAliasUsed(index, currentString){
     return Tools.Array.contains(that.pAutocompleteAliasUsed[i], currentString);
 }

 function notEmptyOrFirst(autocomplete,currentString){
     return autocomplete.list.length === 0 
        || (currentString.toLowerCase() !== autocomplete.list[0].target.alias.toLowerCase() );
 }

Answer 4

你不能真正缩短它，因为你有各种各样的变量。 但是你可以做的就是这样，它使它更具可读性：

var list = this.autocomplete.list,
    currentString = this.currentString,
    containsCurrentString = Tools.Array.contains( that.pAutocompleteAliasUsed[i], currentString);

if ( containsCurrentString !== false  &&
        ( list.length === 0 ) || ( currentString.toLowerCase() !== list[0].target.alias.toLowerCase() ) )
{
    // make something
}

Answer 5

var bListEmpty  = !!this.autocomplete.list.length,
    sCurrent = this.currentString.toLowerCase(),
    sTarget  = this.autocomplete.list[0].target.alias.toLowerCase(),
    bContains   = Tools.Array.contains(that.pAutocompleteAliasUsed[i], this.currentString),
    bSameString = (sCurrent === sTarget);

if (bContains && bListEmpty || bSameString) {
    // do something
}

要么

if (Tools.Array.contains( that.pAutocompleteAliasUsed[i], this.currentString) !== false 
        && this.autocomplete.list.length === 0
        || this.currentString.toLowerCase() !== this.autocomplete.list[0].target.alias.toLowerCase())
{
    // do something
}