JavaScript中如何用键名创建并更新数组值与索引

原代码问题分析 #

在JavaScript中，数组本质是特殊的对象，但它的"索引"仅指0、1、2...这类可转换为正整数的键。当你给数组添加"Name"、"Case"这类字符串键时，这些属于数组对象的额外属性，不会被算作数组的元素，也不会改变数组的length属性。你看到的[ NaN, NaN, NaN, Name: 0, Case: 0 ]大概率是后续误操作（比如尝试访问未初始化的数字索引）导致的，但核心问题是：原生数组无法同时满足自定义键名和索引访问的需求。

解决方案：自定义封装结构 #

我们可以通过封装一个对象，同时维护键名的顺序数组，来实现"既可以用键名访问，也可以用索引访问"的需求，同时初始化默认值为0。

方案1：函数封装的简易版 #

function createIndexedStruct(keyNames) {
  const struct = {};
  // 保存键名顺序，用于索引访问
  const keyOrder = [...keyNames];

  // 初始化所有键的默认值为0
  keyNames.forEach(key => {
    struct[key] = 0;
  });

  // 通过索引获取值
  struct.getByIndex = function(index) {
    const targetKey = keyOrder[index];
    return targetKey ? this[targetKey] : undefined;
  };

  // 通过索引设置值
  struct.setByIndex = function(index, value) {
    const targetKey = keyOrder[index];
    if (targetKey) {
      this[targetKey] = value;
    }
  };

  // 自定义toString，输出类似你预期的格式
  struct.toString = function() {
    const entries = keyOrder.map(key => `${key}: ${this[key]}`);
    return `[${entries.join(', ')}]`;
  };

  return struct;
}

// 使用示例
const keyNames = ["Name", "Case"];
const myStruct = createIndexedStruct(keyNames);

// 通过键名更新值
myStruct.Case = myStruct.Case + 1;
// 通过索引更新值
myStruct.setByIndex(0, 3);

// 通过键名获取值
console.log("Name:", myStruct.Name); // 输出 Name: 3
// 通过索引获取值
console.log("Case:", myStruct.getByIndex(1)); // 输出 Case: 1

// 打印自定义格式
console.log(myStruct.toString()); // 输出 [Name: 3, Case: 1]

方案2：ES6类封装（更易维护） #

如果需要更规范、可扩展的结构，用类封装更合适：

class IndexedKeyValue {
  constructor(keyNames) {
    // 保存键名顺序
    this.keyOrder = [...keyNames];
    // 初始化默认值0
    keyNames.forEach(key => {
      this[key] = 0;
    });
  }

  // 索引获取方法
  get(index) {
    const key = this.keyOrder[index];
    return key ? this[key] : undefined;
  }

  // 索引设置方法
  set(index, value) {
    const key = this.keyOrder[index];
    if (key) {
      this[key] = value;
    }
  }

  // 自定义格式输出
  toString() {
    const entries = this.keyOrder.map(key => `${key}: ${this[key]}`);
    return `[${entries.join(', ')}]`;
  }
}

// 使用示例
const keyNames = ["Name", "Case"];
const myStruct = new IndexedKeyValue(keyNames);

myStruct.Case += 1; // 键名更新
myStruct.set(0, 5); // 索引更新

console.log("Name:", myStruct.Name); // 5
console.log("Case:", myStruct.get(1)); // 1
console.log(myStruct.toString()); // [Name: 5, Case: 1]

关键说明 #

• 原生JS没有同时支持自定义字符串键和数字索引的数组结构，必须通过封装实现。
• 上述方案中，keyOrder数组负责维护键的顺序，保证索引访问的正确性。
• 自定义的toString方法可以让结构输出符合你预期的[Name: 0, Case: 1]格式。

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