JavaScript数组元素关联多个值的方法

在 JavaScript 中，数组本身无法直接让“一个索引位置”对应两个独立值，但可通过对象或嵌套数组结构实现同一项携带多个关联数据。

JavaScript 数组的本质：索引映射结构

JavaScript 的数组是索引映射结构——每个下标（如 arr[0]）只能指向一个值。这个值可以是任意类型：数字、字符串、对象、数组等。因此，“一个选项关联两个值”的本质不是让数组存储“双值”，而是将多个值封装在一个单元内，再存入数组。

方案一：使用对象字面量封装多个值

最直接也最清晰的方案是使用对象字面量，为每个数组项定义多个命名属性，这样代码一目了然：

const items = [
  { result: "1. text1", value1: 30, value2: 8 },
  { result: "2. text2", value1: 1.95, value2: 9 },
  { result: "3. text3.", value1: 10.9, value2: 10 }
];

访问时也很明确：

console.log(items[0].value1); // 30
console.log(items[0].value2); // 8

方案二：使用数组字段实现多值聚合

另一种更简洁、更符合“多值聚合”语义的方式是使用数组字段，比如 values: [30, 8]，这样可以把相关联的值打包在一起：

const items = [
  { result: "1. text1", values: [30, 8] },
  { result: "2. text2", values: [1.95, 9] },
  { result: "3. text3.", values: [10.9, 10] }
];

// 解构使用，安全且可读性强
items.map(({ result, values }) => {
  const [value1, value2] = values; // 解构赋值
  console.log(`${result}: ${value1}, ${value2}`);
});

常见报错分析：Cannot read properties of undefined

这里要特别提醒一下：原始报错 Cannot read properties of undefined (reading 'toString') 通常源于尝试对 undefined 调用方法（如 .toString()），常见的情况包括：

• 访问了不存在的数组索引（如 arr[5] 为空）；
• 对未定义的属性（如 item.value1 为 undefined）直接调用 .toString()；
• 在 .map() 中未正确解构或校验数据。

关键要点总结

• 用好对象封装：用对象字面量或数组字段把多个值打包，而不是硬塞到同一个索引下；
• 安全取值：避免裸用 item.value1.toString()，改用 String(item.value1) 或可选链 item.value1.toString()；
• 优先具名属性：如果值有固定顺序和语义（比如“价格”和“数量”），用 price、quantity 这样的命名属性，比用数组下标更易维护。

总的来说，JavaScript 数组本身不支持“一索引双值”，但通过对象或嵌套数组，完全可以优雅、安全地实现同一逻辑项承载多个关联值的目标。