Estoy aprendiendo js y acabo de crear un código de generación de contraseñas, el problema es que estoy tratando de simplificar el código usando bucles dentro de bucles. ¿Alguien puede ayudarme a entender cómo hacerlo?
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>Simplemente envuelva el código para crear y mostrar la contraseña en otro bucle for. Asegúrese de cambiar el número de iteraciones para que coincida con su proyecto.
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>Consideremos cómo puede hacer esto sin bucles explícitos.
Puede generar una matriz de longitud arbitraria ( len ) de la siguiente manera:
[...new Array(len)] A continuación, puede asignar los elementos de esta matriz con Array.prototype.map . En realidad, no nos importan los valores predeterminados en la matriz, por lo que podemos descartar ese valor y asignarlo a un carácter aleatorio. No es necesario usar una substring ... una cadena se puede indexar como una matriz (es decir chars[n] )... así que...
[...new Array(len)].map(() => chars[Math.floor(Math.random() * chars.length)])le devolverá una matriz donde cada índice contiene un carácter seleccionado al azar.
Así que ahora, todo lo que tenemos que hacer es volver a unirlos para formar una cadena. Array.prototype.join hace esto por nosotros:
[...new Array(len)] .map(() => chars[Math.floor(Math.random() * chars.length)]) .join("")Vamos a meter todo esto en una función:
function generatePassword(length){ return [...new Array(len)] .map(() => chars[Math.floor(Math.random() * chars.length)]) .join("") } Llamar a generatePassword(12) devolverá una contraseña de 12 caracteres.
Ahora, generemos 4 de ellos usando el mismo truco que el anterior.
const passwords = [...new Array(4)].map(() => generatePassword(passwordLength))entonces vamos a generarlos:
passwords.forEach((password, index) => { document.getElementById("password-" + (index + 1)).textContent = password; })Poniendolo todo junto:
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> 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>