JavaScript基于两个数组创建字典功能不生效问题求助

问题根因 #

• 脚本加载完成后会立即执行CreateDict()，此时你还没有点击按钮输入内容，NameArray、IdArray都是空数组，遍历空数组生成的对象自然是空的，这就是你控制台看到空对象的原因。
• 你的按钮放在<form>标签内部，点击按钮时会触发表单默认提交行为，导致页面刷新，所有存储在变量里的数据都会被清空，就算后续调用生成字典的方法也拿不到数据。

修复方案 #

你可以按下面的逻辑调整代码：

1. 取消表单默认提交行为，避免页面刷新
2. 把CreateDict()的调用放到getName()执行之后，也就是你输入内容、把数据塞进两个数组之后再生成字典

修改后的JS代码示例 #

const NameArray = [];
const IdArray = [];
let Dict = {};

function getName(e) {
  // 阻止表单默认提交刷新页面
  e.preventDefault();
  const Input = document.getElementById("input").value;
  const list_names = Input.split(", ");

  for (let i of list_names) {
    NameArray.push(i);
    IdArray.push(i);
  };
  console.log(NameArray, IdArray);
  // 填完数据之后再生成字典
  CreateDict();
};

function CreateDict() {
  NameArray.forEach((key, i) => Dict[key] = IdArray[i]);
  // 搭配JSON.stringify打印可以避免浏览器引用类型实时预览的干扰
  console.log('生成的字典：', Dict);
  console.log('字典序列化结果：', JSON.stringify(Dict, null, 2));
};

修改后的HTML按钮部分 #

把按钮的点击事件调整为传入事件对象：

<button onclick="getName(event);">Get Data</button>

验证方式 #

在输入框里输入类似张三, 李四, 王五的内容，点击按钮后再看控制台，就能看到正常生成的字典对象了，后续你直接用Dict.键名或者Dict['键名']的方式就能访问对应值。

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