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

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>