JavaScript中保持对象键名顺序的方法：超越数组的思考

// 创建一个普通对象，以数字字符串作为键名
const obj = {
  "10": "ten",
  "2": "two",
  "1": "one",
  "5": "five"
};

// 遍历对象键名
console.log("对象键名遍历:");
for (const key in obj) {
  console.log(key); // 输出: 1, 2, 5, 10 (自动排序!)
}

// 注意：数组也是对象
const arr = [];
arr["10"] = "ten";
arr["2"] = "two";
arr["1"] = "one";
arr["5"] = "five";

console.log("\n数组作为对象遍历:");
for (const key in arr) {
  console.log(key); // 输出: 1, 2, 5, 10 (同样排序!)
}

// 使用Map保持键名顺序
const myMap = new Map();

// 以任意顺序添加键值对
myMap.set("10", "ten");
myMap.set("2", "two");
myMap.set("1", "one");
myMap.set("5", "five");
myMap.set("z", "最后添加的字符串键");

console.log("Map键名顺序:");
for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}
// 输出顺序与插入顺序完全一致:
// 10: ten
// 2: two
// 1: one
// 5: five
// z: 最后添加的字符串键

// 获取所有键名（保持顺序）
console.log([...myMap.keys()]); // ['10', '2', '1', '5', 'z']

// 方案1：添加前缀避免数字键名
const objWithPrefix = {
  "key-10": "ten",
  "key-2": "two",
  "key-1": "one",
  "key-5": "five"
};

console.log("带前缀的键名遍历:");
for (const key in objWithPrefix) {
  console.log(key); // 保持插入顺序
}

// 方案2：使用非数字字符
const objWithNonNumeric = {
  "item10": "ten",
  "item2": "two",
  "item1": "one",
  "item5": "five"
};

class OrderedObject {
  constructor() {
    this.keys = [];
    this.values = {};
  }
  
  set(key, value) {
    if (!this.values.hasOwnProperty(key)) {
      this.keys.push(key);
    }
    this.values[key] = value;
    return this;
  }
  
  get(key) {
    return this.values[key];
  }
  
  forEach(callback) {
    this.keys.forEach(key => {
      callback(this.values[key], key);
    });
  }
  
  entries() {
    return this.keys.map(key => [key, this.values[key]]);
  }
}

// 使用示例
const orderedObj = new OrderedObject();
orderedObj.set("10", "ten");
orderedObj.set("2", "two");
orderedObj.set("1", "one");
orderedObj.set("5", "five");

console.log("自定义有序对象:");
orderedObj.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 严格保持插入顺序

function createNonSortingObject() {
  const storage = new Map();
  const insertionOrder = [];
  
  return new Proxy({}, {
    set(target, prop, value) {
      if (!storage.has(prop)) {
        insertionOrder.push(prop);
      }
      storage.set(prop, value);
      return true;
    },
    
    get(target, prop) {
      if (prop === 'keysInOrder') {
        return () => [...insertionOrder];
      }
      return storage.get(prop);
    },
    
    ownKeys() {
      return [...insertionOrder];
    },
    
    getOwnPropertyDescriptor() {
      return { enumerable: true, configurable: true };
    }
  });
}

const nonSortingObj = createNonSortingObject();
nonSortingObj["10"] = "ten";
nonSortingObj["2"] = "two";
nonSortingObj["1"] = "one";
nonSortingObj["5"] = "five";

console.log("Proxy控制的属性顺序:");
console.log(Object.keys(nonSortingObj)); // ['10', '2', '1', '5']

// 场景1：需要严格保持插入顺序 → 使用Map
const userSessions = new Map();

// 场景2：键名是标识符，顺序不重要 → 使用对象
const userProfiles = {
  "user123": { name: "Alice" },
  "user456": { name: "Bob" }
};

// 场景3：需要混合访问模式 → 考虑组合方案
const indexedData = {
  data: new Map(),      // 保持顺序
  index: {},            // 快速查找
  order: []             // 顺序记录
};

class ResponseOrderManager {
  constructor() {
    this.responses = new Map();
  }
  
  addResponse(requestId, data) {
    this.responses.set(requestId, {
      data,
      timestamp: Date.now()
    });
  }
  
  getResponsesInOrder() {
    return Array.from(this.responses.entries());
  }
}

class DynamicForm {
  constructor() {
    this.fields = new Map(); // 保持字段添加顺序
  }
  
  addField(name, config) {
    this.fields.set(name, config);
    this.render();
  }
  
  render() {
    // 字段按添加顺序渲染
    for (const [name, config] of this.fields) {
      this.renderField(name, config);
    }
  }
}