是否有 if 语句的替代方案？

Question

我正在用 JavaScript 制作一个密码生成器，它的工作原理是从输入中获取一个数字，并生成一个密码，其长度与从输入中获得的长度相同。 我在 HTML 中添加了三个复选框，分别代表大写、数字和符号。 如果您不选中复选框，它将仅使用小写字母生成密码，但如果您选中大写复选框，它将使用小写和大写字母来创建密码，并且与其他复选框的工作方式相同。

为了评估哪些复选框被选中，我不得不使用大量的 if 语句，这是我的代码：

if (document.getElementById('caps').checked === true && 
        document.getElementById('numbers').checked === false && 
        document.getElementById('symbols').checked === false) 
    {
        const charsArray = lowercase.concat(caps);
        
        password = GeneratePassword(passwordLength, charsArray);
    } 
    else if (document.getElementById('caps').checked === false && 
            document.getElementById('numbers').checked === true && 
            document.getElementById('symbols').checked === false)
    {
        const charsArray = lowercase.concat(numbers);

        password = GeneratePassword(passwordLength, charsArray);
    }
    else if (document.getElementById('caps').checked === false && 
            document.getElementById('numbers').checked === false && 
            document.getElementById('symbols').checked === true)
    {
        const charsArray = lowercase.concat(symbols);

        password = GeneratePassword(passwordLength, charsArray);
    }
    else if (document.getElementById('caps').checked === true && 
            document.getElementById('numbers').checked === true && 
            document.getElementById('symbols').checked === false)
    {
        const charsArray = lowercase.concat(caps).concat(numbers);

        password = GeneratePassword(passwordLength, charsArray);
    }
    else if (document.getElementById('caps').checked === true && 
            document.getElementById('numbers').checked === true && 
            document.getElementById('symbols').checked === true)
    {
        const charsArray = lowercase.concat(caps).concat(numbers).concat(symbols);

        password = GeneratePassword(passwordLength, charsArray);
    }
    else if (document.getElementById('caps').checked === false && 
            document.getElementById('numbers').checked === true && 
            document.getElementById('symbols').checked === true)
    {
        const charsArray = lowercase.concat(numbers).concat(symbols);

        password = GeneratePassword(passwordLength, charsArray);
    }
    else if (document.getElementById('caps').checked === true && 
            document.getElementById('numbers').checked === false && 
            document.getElementById('symbols').checked === true)
    {
        const charsArray = lowercase.concat(caps).concat(symbols);

        password = GeneratePassword(passwordLength, charsArray);
    }
    else if (document.getElementById('caps').checked === true && 
            document.getElementById('numbers').checked === true && 
            document.getElementById('symbols').checked === false)
    {
        const charsArray = lowercase.concat(caps);

        password = GeneratePassword(passwordLength, charsArray);
    }
    else {
        password = GeneratePassword(passwordLength, lowercase);
    }

如您所见，它非常重复。 我知道编写好的代码的基础之一是 DRY，所以我想知道是否有另一种方法可以做到这一点而不会使其如此重复。 我知道 switch 是 if 语句的替代方案，但我认为这不能解决重复问题。

如果有人可以提供任何帮助，我将不胜感激:)

Answer 1

您有 3 个布尔条件，这确实导致了 9 种不同的密码生成方式。 不过，在您的情况下，您可以将逻辑更改为如下所示：

// Copy the lowercase characters
const chars = [...lowercase];

// Add to chars depending on the three conditions
if (useCaps) chars.push(...caps);
if (useNumbers) chars.push(...numbers);
if (useSymbols) chars.push(...symbols);

const password = GeneratePassword(passwordLength, chars);

Answer 2

您不需要检查每种可能性，只需使用简单的if语句（而不是if-else ）分别检查每个复选框。 仅使用lowercase重新分配连接值：

if (document.getElementById('caps').checked === true){
    lowercase= lowercase.concat(caps);
} 
if (document.getElementById('numbers').checked === true)
{
    lowercase= lowercase.concat(numbers);
}
if (document.getElementById('symbols').checked === true)
{
    lowercase= lowercase.concat(symbols);
}

password = GeneratePassword(passwordLength, lowercase);

Answer 3

您应该构建一个字母字符串，然后在随机索引处访问字符。

 const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const LOWER = 'abcdefghijklmnopqrstuvwxyz'; const NUMBERS = '0123456789'; const SYMBOLS = '!"#$%&\\'()*+,-./:;<=>?@[\\]^`_{|}~'; const defaultOptions = { includeUpper: true, includeLower: true, includeNumbers: true, includeSymbols: false }; const randomInt = (min, max) => { if (max === undefined) { max = min; min = 0; } return Math.floor(Math.random() * (max - min)) + min; } const randomChar = (str) => str[randomInt(str.length)]; const generatePassword = (length, options) => { const opts = { ...defaultOptions, ...options }; let alphabet = ''; if (opts.includeUpper) alphabet += UPPER; if (opts.includeLower) alphabet += LOWER; if (opts.includeNumbers) alphabet += NUMBERS; if (opts.includeSymbols) alphabet += SYMBOLS; return new Array(length).fill(0).map(() => randomChar(alphabet)).join(''); }; // Event handler const handleSubmission = (e) => { e.preventDefault(); const { target: { elements } } = e; const generatedPassword = generatePassword( +elements.size.value, { includeUpper: elements.upper.checked, includeLower: elements.lower.checked, includeNumbers: elements.numbers.checked, includeSymbols: elements.symbols.checked } ); document.querySelector('#generated').value = generatedPassword; }; // UI document.forms['password-generator'].addEventListener('submit', handleSubmission);

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; background: #222; color: #EEE; font-size: smaller; } form input[type="number"] { width: 3em; margin-left: 0.5em; } .bordered { border: thin solid #666; padding: 0.5em; background: #444; } .vertical-form { display: grid; grid-template-columns: 1fr; grid-row-gap: 0.25em; } #generated { font-family: monospace; }

 <form class="bordered vertical-form" name="password-generator"> <label>Length <input type="number" name="size" value="12" /></label> <label><input type="checkbox" name="upper" checked> Uppercase</label> <label><input type="checkbox" name="lower" checked> Lowercase</label> <label><input type="checkbox" name="numbers"> Numbers</label> <label><input type="checkbox" name="symbols"> Symbols</label> <button type="submit">Generate Password</button> </form> <label>Generated password <input type="text" id="generated" /></label>

Answer 4

如果可以正确维护缩进，则始终可以使用多个嵌套的三元运算符。