如何获取数组全部元素并输出至控制台？（含用户输入添加场景）

你的需求是用户输入姓名点击按钮后将姓名添加至数组，再获取数组所有元素输出到控制台。现有代码已经实现了getAllUsers函数，但存在核心问题：它仅在页面初始化时执行一次（此时数组为空），后续添加用户后不会自动触发输出。以下是具体调整方案：

调整方案 #

方案1：添加用户后自动输出最新数组 #

修改addUser函数，在完成用户添加后立即调用getAllUsers，这样每次添加用户都能在控制台看到最新的数组内容：

const userNameInput = document.getElementById("user-name");
const userButton = document.getElementById("add-user");
const usersArr = [];

// 补充原代码缺失的输入清空函数
const clearInputs = () => {
  userNameInput.value = '';
};

// 补充原代码缺失的用户名校验函数（基础非空校验）
const checkUserName = () => {
  return userNameInput.value.trim() !== '';
};

userButton.addEventListener("click", (event) => {
  event.preventDefault();
  if (checkUserName()) {
    addUser();
  }
});

const addUser = () => {
  usersArr.push(userNameInput.value.trim()); // 去除输入首尾空格，避免无效内容
  clearInputs();
  getAllUsers(); // 添加用户后立即输出数组
};

const getAllUsers = () => {
  console.log('当前所有用户：');
  // 用console.table更直观地展示数组
  console.table(usersArr);
  // 也可以保留原有的逐个输出方式
  // usersArr.forEach((user, index) => {
  //   console.log(`第${index+1}位用户：${user}`);
  // });
};

方案2：添加独立按钮触发输出 #

如果不需要每次添加都输出，可新增一个按钮，点击时手动触发数组输出：

<!-- 在HTML中新增按钮 -->
<button id="show-all-users">查看所有用户</button>

// 在JS中为新增按钮绑定事件
const showUsersBtn = document.getElementById("show-all-users");
showUsersBtn.addEventListener("click", getAllUsers);

关键提示 #

• console.table(usersArr)比逐个输出更直观，能以表格形式展示数组元素
• 必须补充原代码中缺失的clearInputs和checkUserName函数，否则代码会报错
• 对输入内容做trim()处理，可避免空字符串或纯空格被误加入数组

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