如何使這個大的if語句在JavaScript中更具可讀性

Question

我需要使下面的大if語句在JavaScript中更具可讀性。

任何想法？

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語句中的各種邏輯測試。讀取單個語句並在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 2

你不能縮短它，因爲你有所有的變量。但是你可以做的是一樣的東西，這使得它更易於閱讀：

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 3

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 
} 

Answer 4

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 5

當你有複雜的測試，這是一個很好的做法，在明確定義的功能測試和（2）得到這些功能好名字，說明該功能的目的（1）提取部分。

通過這種方式閱讀方法名就足以瞭解函數在做什麼和返回。

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