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

Question

我正在学习 js，我刚刚制作了一个密码生成代码，问题是我正在尝试使用循环中的循环来简化代码，任何人都可以帮助我了解如何去做。

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

只需将用于创建和显示密码的代码包装在另一个 for 循环中即可。确保更改迭代次数以匹配您的项目。

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

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>

Answer 3

让我们考虑一下如何在没有显式循环的情况下执行此操作。

可以生成一个任意长度的数组（len），如下：

[...new Array(len)]

然后您可以使用 Array.prototype.map 映射此数组中的项目。我们实际上并不关心数组中的默认值，因此我们可以丢弃该值并将其映射到随机字符。没有必要使用 substring... 字符串可以像数组一样进行索引（即 chars[n]）... 所以...

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

会给你一个数组，其中每个索引包含一个随机选择的字符。

所以现在，我们所要做的就是将它们重新连接起来形成一个字符串。 Array.prototype.join 为我们做了这个：

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

让我们将所有这些放入一个函数中：

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

调用 generatePassword(12) 将返回一个 12 个字符的密码。

现在，让我们使用与上述相同的技巧生成其中的 4 个

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

然后让我们输出它们：

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

综合起来：

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>

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

I'm trying to simplify the code to a nested loop

javascript

loops