如何访问对象中索引数组的键值以实现内容展示？

核心问题 #

你代码里的两个关键错误：

• forEach循环中的writer是对象的键名字符串（比如"abitbol"），不是对应的数据对象，直接访问writer.quote、writer.name自然拿不到值。
• karamazov项的结构和其他项不统一，其他项是{name: 作者名, quote: 引用内容}，但它是{"Serge Karamazov": 引用内容}，需要单独处理或者调整结构。

修复方案 #

步骤1：统一数据结构（可选但推荐）

先把karamazov的结构改成和其他项一致，避免额外的判断逻辑：

var quotes = {
  karamazov: [{
    name: "Serge Karamazov",
    quote: "Barrez vous **** de mimes."
  }],
  abitbol: [{
    name: "Georges Abitbol",
    quote: "Le train de tes injures roule sur le rail de mon indifférence.",
  }],
  bath: [{
    name: "Hubert Bonisseur de la Bath",
    quote: "Ça ne prenait pas beaucoup plus de temps.",
  }],
  moulinier: [{
    name: "Moulinier ",
    quote: "L'habit ne fait pas le moine, mais il fait l'agent... Même non titularisé.",
  }],
  welles: [{
    name: "Orson Welles",
    quote: "C'est du vol et du plagiat. j'aime pas trop les voleurs et...",
  }],
};

步骤2：修正循环中的数据访问逻辑

通过quotes[writer]拿到对应数组，再取数组第一个元素（因为每个属性都是长度为1的数组），然后访问它的name和quote：

const quotesWrap = document.querySelector('#quotes-wrap');

Object.keys(quotes).forEach(function(key) {
  // 拿到当前键对应的数组，取第一个元素
  const quoteData = quotes[key][0];
  
  const citationWrap = document.createElement("div");
  quotesWrap.appendChild(citationWrap);
  const citation = document.createElement("p");
  const auteur = document.createElement("p");
  citationWrap.appendChild(citation);
  citationWrap.appendChild(auteur);

  citationWrap.classList.add("quote");
  citation.classList.add("citation");
  auteur.classList.add("auteur");

  // 访问quoteData里的属性
  citation.innerHTML = `"${quoteData.quote}"`;
  auteur.innerHTML = quoteData.name;
});

如果不想修改karamazov的结构

可以在循环里加判断处理这种特殊结构：

Object.keys(quotes).forEach(function(key) {
  const quoteData = quotes[key][0];
  let name, quote;
  
  // 处理karamazov的特殊结构
  if (Object.keys(quoteData).length === 1 && !quoteData.name) {
    const [authorName] = Object.keys(quoteData);
    name = authorName;
    quote = quoteData[authorName];
  } else {
    name = quoteData.name;
    quote = quoteData.quote;
  }
  
  // 后续创建元素和赋值逻辑不变
  const citationWrap = document.createElement("div");
  quotesWrap.appendChild(citationWrap);
  const citation = document.createElement("p");
  const auteur = document.createElement("p");
  citationWrap.appendChild(citation);
  citationWrap.appendChild(auteur);

  citationWrap.classList.add("quote");
  citation.classList.add("citation");
  auteur.classList.add("auteur");

  citation.innerHTML = `"${quote}"`;
  auteur.innerHTML = name;
});

效果说明 #

修复后，每个引用的作者和内容都会正确渲染到页面的#quotes-wrap容器中。

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