如何解构用户点击按钮后才填充数据的数组？

你的persons数组初始为空，直接解构或访问persons[0]会得到undefined，甚至引发报错。以下是几种安全操作的实现方式：

1. 基础安全访问：先判断数组长度 #

在需要访问第一个元素的逻辑里，先检查数组是否有内容，再执行后续操作。比如在defineTotal函数中添加展示第一个人的逻辑：

function defineTotal() {
  let list = "";
  let total = 0;
  // 假设你在HTML里新增了这个元素用于展示第一个人
  const firstPersonEl = document.getElementById("first-person");

  // 处理第一个人的展示逻辑
  if (persons.length > 0) {
    const firstPerson = persons[0];
    firstPersonEl.innerHTML = `第一个输入的人：${firstPerson.name}，金额：${firstPerson.amount}`;
  } else {
    firstPersonEl.innerHTML = "还未输入任何人";
  }

  // 原有循环计算逻辑
  for (let i = 0; i < persons.length; i++) {
    total += persons[i].amount
    list += `${persons[i].name}: ${persons[i].amount} <br>`;
  }

  const iva = 1.21;
  const totalWithIVA = total * iva;

  totalHTMLelemento.innerHTML = totalWithIVA;
  personsListHTMLelemento.innerHTML = list;
  // 避免数组为空时除以0得到NaN
  splitHTMLelemento.innerHTML = persons.length > 0 ? totalWithIVA / persons.length : 0;
}

2. 解构赋值+默认值 #

如果想用解构语法获取第一个元素，可设置默认值避免undefined：

// 解构第一个元素，数组为空时使用默认对象
const [firstPerson = { name: "无", amount: 0 }] = persons;
// 即使数组为空，也能安全访问属性
console.log(firstPerson.name); // 数组为空时输出"无"

3. 配合DOM更新的完整示例 #

先在HTML中新增展示第一个人的区域：

<!-- 插入到现有DOM结构中 -->
<p>第一个输入的人：<span id="first-person"></span></p>

再修改defineTotal函数，整合解构与安全判断：

function defineTotal() {
  let list = "";
  let total = 0;
  const firstPersonEl = document.getElementById("first-person");

  // 解构第一个元素并处理空数组情况
  if (persons.length > 0) {
    const { name, amount } = persons[0];
    firstPersonEl.innerHTML = `${name}: ${amount}`;
  } else {
    firstPersonEl.innerHTML = "暂无数据";
  }

  // 原有循环逻辑
  for (let i = 0; i < persons.length; i++) {
    total += persons[i].amount
    list += `${persons[i].name}: ${persons[i].amount} <br>`;
  }

  const iva = 1.21;
  const totalWithIVA = total * iva;

  totalHTMLelemento.innerHTML = totalWithIVA;
  personsListHTMLelemento.innerHTML = list;
  // 保留两位小数，优化显示
  splitHTMLelemento.innerHTML = persons.length > 0 ? (totalWithIVA / persons.length).toFixed(2) : 0;
}

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