如何使用JavaScript确保JSON对象中id属性始终排在首位？

一、处理现有JSON数组中的对象 #

针对你已有的jsonData数组，可以通过一个通用格式化函数，把每个对象的id移至属性首位：

// 格式化卡片，强制id为第一个属性
const formatCard = (card) => {
  const { id, ...restProps } = card;
  return { id, ...restProps };
};

// 批量处理现有数组
const formattedJsonData = jsonData.map(formatCard);

执行后，formattedJsonData内所有对象的id都会固定在第一个位置。

二、修改添加新卡片的函数 #

调整你的handleAddCard函数，确保新增卡片也遵循id前置的规则，同时修正当前代码中添加原始card而非带时间戳的newCard的问题：

const handleAddCard = async (card) => {
    try {
      // 先构造包含lastModified的临时对象
      const tempCard = {
        ...card,
        lastModified: new Date().toISOString(),
      };
      // 格式化确保id在首位
      const newCard = formatCard(tempCard);

      const res = await fetch("http://localhost:3001/flashcards", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(newCard),
      });

      if (!res.ok) {
        throw new Error("Failed to add card");
      }

      // 将格式化后的新卡片加入列表
      setFlashCards([...flashcards, newCard]);

      setNewCard(false);
      setCardAdded(true);
    } catch (error) {
      console.error("Error adding card:", error);
    }
};

三、补充说明 #

• ES6及以上版本的JS引擎会保留对象字面量的属性顺序（字符串键），因此{ id, ...restProps }的写法能稳定将id放在第一位；
• 如果后端返回的卡片数据id位置不固定，可在获取数据后用formatCard统一格式化，保证前后端数据格式一致。

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