JavaScript中如何通过id正确访问动态命名数组（避免堆内存问题）

问题分析与解决方案 #

我来帮你搞定这个问题！你现在遇到的核心痛点是：直接拼接字符串得到的是文本内容（比如"this.family1"），而不是指向this上对应数组属性的引用，所以str[i]会去取字符串的第i个字符，完全不是你想要的数组元素。

快速修复：用方括号语法动态访问属性

JavaScript里访问对象属性有两种方式：点语法（this.family1）和方括号语法（this['family1']）。后者支持用动态生成的字符串作为属性名，刚好能解决你的问题。

修改你的代码片段如下：

const results = [];
// 这里假设你要遍历id从1到20，对应family1到family20
for (let i = 1; i <= 20; i++) {
  const id = i;
  // 用模板字符串生成属性名，通过方括号拿到对应数组
  const targetFamily = this[`family${id}`];
  const targetDogs = this[`dogs${id}`];

  // 注意：如果你的数组是0索引的，这里的elemIndex要根据数组长度调整
  for (let elemIndex = 0; elemIndex < targetFamily.length; elemIndex++) {
    const result = {
      familyType: targetFamily[elemIndex], // 现在能正确取到数组元素了
      protocol: targetDogs[elemIndex],
    };
    results.push(result);
  }
}

更优雅的重构方案：用集合管理数组

其实单独定义family1、family2...这种变量非常不利于维护，推荐把这些数组统一放到一个数组或对象里，管理起来更清晰：

方案1：用数组存储（适合id是连续数字的场景）

// 先把所有family和dogs数组整理到集合里
this.families = [
  family1Data, // 索引0对应原来的family1
  family2Data, // 索引1对应原来的family2
  // ... 依次添加到family20
];
this.dogsCollection = [
  dogs1Data,
  dogs2Data,
  // ... 依次添加到dogs20
];

// 后续访问就简单多了
const results = [];
for (let idIndex = 0; idIndex < this.families.length; idIndex++) {
  const currentFamily = this.families[idIndex];
  const currentDogs = this.dogsCollection[idIndex];
  
  for (let elemIndex = 0; elemIndex < currentFamily.length; elemIndex++) {
    results.push({
      familyType: currentFamily[elemIndex],
      protocol: currentDogs[elemIndex],
    });
  }
}

方案2：用对象映射（适合id不连续或有特殊命名的场景）

// 用键值对存储，id作为键
this.familyMap = {
  1: family1Data,
  5: family5Data,
  132: family132Data,
  // ... 其他id对应的数组
};
this.dogsMap = {
  1: dogs1Data,
  5: dogs5Data,
  132: dogs132Data,
  // ... 其他id对应的数组
};

// 访问时直接用id取对应数组
const targetId = 132;
const result = {
  familyType: this.familyMap[targetId][0],
  protocol: this.dogsMap[targetId][0],
};

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