JSON对象引用实现咨询：如何在给定前端代码中完成引用操作

嘿，我来帮你搞定这个问题！首先得明确：原生JSON字符串本身不支持引用功能，但在JavaScript对象中，我们可以通过几种简单的方式实现复用/引用，完美适配你的前端代码场景。下面结合你的代码给出具体方案：

方法1：提取共用变量直接引用（最常用） #

把需要重复使用的内容抽成独立变量，然后在对象定义中直接引用，这样既减少重复代码，后续修改也只需改一处。

修改你的代码如下：

<p id="demo"></p>
<p id="options"></p>
<script>
// 先定义共用的变量
const correctBasketballAnswer = "Huston Rocket";
const commonMathOptions = ["10", "11", "12", "13"];

var myObj;
myObj = {
  "quiz": {
    "sport": {
      "q1": {
        "question": "Which one is correct team name in NBA?",
        "options": [
          "New York Bulls",
          "Los Angeles Kings",
          "Golden State Warriros",
          correctBasketballAnswer // 引用预定义变量
        ],
        "answer": correctBasketballAnswer // 再次引用
      }
    },
    "maths": {
      "q1": {
        "question": "5 + 7 = ?",
        "options": commonMathOptions, // 引用共用选项数组
        "answer": "12"
      }
    }
  }
};

// 渲染到页面
document.getElementById("demo").innerHTML = 
  `${myObj.quiz.sport.q1.question}<br>正确答案：${myObj.quiz.sport.q1.answer}`;
document.getElementById("options").innerHTML = 
  `${myObj.quiz.maths.q1.question}<br>选项：${myObj.quiz.maths.q1.options.join(", ")}`;
</script>

方法2：引用对象内部已有的属性 #

如果需要引用同一个对象内的其他属性，可以在对象创建后赋值，或者用getter函数实时获取：

方式A：创建对象后手动引用 #

// 创建对象后，让maths的q1答案引用sport q1的第四个选项
myObj.quiz.maths.q1.answer = myObj.quiz.sport.q1.options[3];

方式B：用getter函数动态引用 #

myObj = {
  "quiz": {
    "sport": {
      "q1": {
        "question": "Which one is correct team name in NBA?",
        "options": [
          "New York Bulls",
          "Los Angeles Kings",
          "Golden State Warriros",
          "Huston Rocket"
        ],
        "answer": "Huston Rocket"
      }
    },
    "maths": {
      "q1": {
        "question": "5 + 7 = ?",
        "options": ["10", "11", "12", "13"],
        // 用getter动态返回目标值
        get answer() {
          return this.options[2]; // 返回第三个选项"12"
        }
      }
    }
  }
};

方法3：纯JSON字符串的自定义引用解析（如果需要处理JSON字符串） #

如果你的场景是处理纯JSON字符串（而非JS对象），可以自定义$ref标记，再写解析函数替换引用：

// 带自定义引用标记的JSON字符串
const myJSON = `{
  "quiz": {
    "sport": {
      "q1": {
        "question": "Which one is correct team name in NBA?",
        "options": ["New York Bulls", "Los Angeles Kings", "Golden State Warriros", "Huston Rocket"],
        "answer": "Huston Rocket"
      }
    },
    "maths": {
      "q1": {
        "question": "5 + 7 = ?",
        "options": ["10", "11", "12", "13"],
        "answer": "$ref:quiz.sport.q1.answer"
      }
    }
  }
}`;

// 解析引用的函数
function resolveReferences(obj, parent = obj) {
  for (const key in obj) {
    if (typeof obj[key] === 'string' && obj[key].startsWith('$ref:')) {
      const path = obj[key].slice(5).split('.');
      let value = parent;
      for (const part of path) {
        value = value[part];
      }
      obj[key] = value;
    } else if (typeof obj[key] === 'object' && obj[key] !== null) {
      resolveReferences(obj[key], parent);
    }
  }
  return obj;
}

// 使用解析函数
const parsedObj = resolveReferences(JSON.parse(myJSON));
console.log(parsedObj.quiz.maths.q1.answer); // 输出：Huston Rocket

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