在 JSON reviver 函數中傳播

Question

我希望能夠在JSON.parse reviver 函數中分散條目的值，同時刪除原始密鑰。 返回一個擴展的值似乎並沒有做到這一點。

這是一個例子：

 const json = {a: 'foo', b: {c: 1, d: '2'}} const stringify = JSON.stringify(json) const parsed = JSON.parse(stringify, function(k, v) { if(k === 'b') { return {...v} } else { return v } }) document.getElementById("app").innerHTML = `<pre>${JSON.stringify(parsed, null, 2)}</pre>`;

 <div id="app"></div>

在上面所需的輸出應該是

{
  "a": "foo",
  "c": 1,
  "d": "2"
}

Answer 1

雖然我不推薦它，因為它不是很直觀，但您可以使用Object.assign(this, v)與替換器中的this值合並。 這會將b屬性的對象合並到b屬性出現的對象中，暫時為您提供：

{a: 'foo', b: {c: 1, d: '2'}, c: 1, d: '2'}

然后在我們為該路徑返回undfined時刪除b ，給出：

{a: 'foo', c: 1, d: '2'}

 const json = {a: 'foo', b: {c: 1, d: '2'}}; const stringify = JSON.stringify(json) const parsed = JSON.parse(stringify, function(k, v) { if(k === 'b') { Object.assign(this, v); } else { return v; } }); document.getElementById("app").innerHTML = `<pre>${JSON.stringify(parsed, null, 2)}</pre>`;

 <div id="app"></div>

Answer 2

JSON.parse reviver 僅轉換鍵“b”處的值並將其設置在該鍵上。 我會把它想象成一張地圖。 您的解決方案應該在 reviver 功能之外。 以下是您的代碼的示例：

let { b, ...parsed } = JSON.parse(stringify);
if (b) {
  parsed = { ...parsed, ...b };
}

Answer 3

@Geo Mircean 的答案是正確的，但您的評論為問題添加了新信息。

如果你有一個復雜的結構，我認為沒有更簡單的選擇。 想到的第一個是迭代對象，看看是否需要傳播每個字段。 判斷你是否需要傳播的邏輯取決於你，但它會是這樣的：

let parsed = {...jsonObject};
for(let key in jsonObject)
{
  if (typeof jsonObject[key] === 'object') // if you want to spread
  {
    delete parsed[key]; // delete the actual key
    Object.assign(parsed, jsonObject[key]); // add fields to object
  }
}

請注意， parsed后的變量將得到我們的結果。 首先它獲取整個對象，然后我們遍歷結果，刪除字段並傳播字段值本身。

Object.assign來自這個 StackOverflow 問題，在 IE9 中不起作用（但我個人並不關心這一點）。