我试图将代码简化为嵌套循环

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

让我们考虑一下在没有显式循环的情况下如何做到这一点。

您可以生成一个仲裁长度(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>

​

Answer 2

只需在另一个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 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>

​