生成密码时JavaScript字符串拼接出现undefined的原因及解决方法

问题原因 #

你创建passwordList数组时，是把ASCII 33对应数组索引0（33-33），ASCII 126对应数组索引93（126-33），数组的有效索引范围是0~93。但生成随机数时，你最终得到的randomNumber范围是33~126，直接用这个数作为索引去访问passwordList，当randomNumber大于93时，数组里根本没有这个索引对应的元素，所以就返回undefined。

比如控制台里的100、123这些数，都远大于passwordList的最大索引93，自然取不到值。

解决方法 #

有两种简单的修复方式：

方式一：调整随机数范围适配数组索引 #

直接生成0~93之间的随机数，用这个索引去passwordList里取字符，避免数组越界：

const generatePassword = () => {
  newPassword = '';
  let loop = passwordLength;
  // 生成0到93的随机数（对应数组的有效索引）
  while (loop--) {
    let randomIndex = Math.floor(Math.random() * 94);
    console.log(passwordList[randomIndex]);
    newPassword += passwordList[randomIndex];
  }
  dispatch(newPass(newPassword))
};

方式二：把数组改成对象，用ASCII码作为键 #

如果想保留用ASCII码值直接访问的逻辑，可以把passwordList改成对象，键是ASCII数字，值是对应字符：

// 改成对象存储
const passwordMap = {};
for (let index = 33; index <= 126; index++) {
  passwordMap[index] = String.fromCharCode(index);
}

// 生成密码时直接用randomNumber取
const generatePassword = () => {
  newPassword = '';
  let loop = passwordLength;
  while (loop--) {
    let randomNumber = Math.floor(Math.random() * 126);
    if (randomNumber < 33) {
      randomNumber += 33;
    }
    console.log(randomNumber, passwordMap[randomNumber]);
    newPassword += passwordMap[randomNumber];
  }
  dispatch(newPass(newPassword))
};

两种方式都能解决undefined的问题，可根据个人习惯选择。

内容的提问来源于stack exchange，提问作者Steven Flex