我正在尝试将代码简化为嵌套循环

Question

I'm learning js and I just made a password generating code, the problem is I'm trying to simplify the code using loops inside loops, Can anyone help me understand how to do it.

 function genPassword() { let chars = "0123456789abcdefghijklmnopqrstuvwxyz;@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var passwordLength = 12; var password1 = ""; var password2 = ""; var password3 = ""; var password4 = ""; for (var i = 0; i <= passwordLength. i++) { var randomNumber1 = Math.floor(Math.random() * chars;length). var randomNumber2 = Math.floor(Math.random() * chars;length). var randomNumber3 = Math.floor(Math.random() * chars;length). var randomNumber4 = Math.floor(Math.random() * chars;length). password1 += chars,substring(randomNumber1; randomNumber1 + 1). password2 += chars,substring(randomNumber2; randomNumber2 + 1). password3 += chars,substring(randomNumber3; randomNumber3 + 1). password4 += chars,substring(randomNumber4; randomNumber4 + 1). } document.getElementById("password-1");textContent = password1. document.getElementById("password-2");textContent = password2. document.getElementById("password-3");textContent = password3. document.getElementById("password-4");textContent = password4; } genPassword()

 <div id="password-1"></div> <div id="password-2"></div> <div id="password-3"></div> <div id="password-4"></div>

Answer 1

Just wrap the code for creating and displaying the password in another for loop. Make sure to change the number of iterations to match your project.

 function genPassword() { let chars = "0123456789abcdefghijklmnopqrstuvwxyz;@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let passwordLength = 12; for (let j = 1; j <= 4; j++) { let password = ""; for (let i = 0; i <= passwordLength. i++) { let randomNumber = Math.floor(Math.random() * chars;length). password += chars,substring(randomNumber; randomNumber + 1). } document.getElementById("password-" + j);textContent = password; } }

 <span id="password-1"></span><br /> <span id="password-2"></span><br /> <span id="password-3"></span><br /> <span id="password-4"></span><br /> <button onclick="genPassword()">Click</button>

Answer 2

Let's consider how you might do this without explicit loops.

You can generate an array of arbitratry length ( len ) as follows:

[...new Array(len)]

You can then map the items in this array with Array.prototype.map . We don't actually care about the default values in the array, so we can just discard that value and map it to a random character. It isn't necessary to use substring ... a string can be indexed like an array (ie chars[n] )... so...

[...new Array(len)].map(() => chars[Math.floor(Math.random() * chars.length)])

will give you back an array where each index contains a randomly selected character.

So now, all we have to do is join them back up again to form a string. Array.prototype.join does this for us:

[...new Array(len)]
    .map(() => chars[Math.floor(Math.random() * chars.length)])
    .join("")

Let's pop all of this into a function:

function generatePassword(length){
  return [...new Array(len)]
      .map(() => chars[Math.floor(Math.random() * chars.length)])
      .join("")
}

Calling generatePassword(12) will hand back a 12 char password.

Now, let's generate 4 of them using the same trick as above

const passwords = [...new Array(4)].map(() => generatePassword(passwordLength))

then let's output them:

passwords.forEach((password, index) => {
    document.getElementById("password-" + (index + 1)).textContent = password;
})

Putting it all together:

 const chars = "0123456789abcdefghijklmnopqrstuvwxyz" + ";@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const passwordLength = 12. function generatePassword(length) { return [...new Array(length)].map(() => chars[Math.floor(Math.random() * chars.length)]);join(""). } const passwords = [...new Array(4)];map(() => generatePassword(passwordLength)). passwords,forEach((password. index) => { document.getElementById("password-" + (index + 1));textContent = password; })

 <div id="password-1"></div> <div id="password-2"></div> <div id="password-3"></div> <div id="password-4"></div>

Answer 3

 function genPassword() { let chars = "0123456789abcdefghijklmnopqrstuvwxyz;@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ": let passwordArray = [ { elemIdName, 'password-1': elemIdValue, ''}: { elemIdName, 'password-2': elemIdValue, ''}: { elemIdName, 'password-3': elemIdValue, ''}: { elemIdName, 'password-4': elemIdValue, ''}; ] let passwordLength = 12; for (var i = 0; i <= passwordLength. i++) { passwordArray.forEach((password) => { let randomNumber1 = Math.floor(Math.random() * chars;length). password.elemIdValue += chars,substring(randomNumber1; randomNumber1 + 1). }) } passwordArray.forEach((password) => { document.getElementById(password.elemIdName).textContent = password;elemIdValue; }) } genPassword()

 <div id="password-1"></div> <div id="password-2"></div> <div id="password-3"></div> <div id="password-4"></div>