如何遞回遍歷陣列并替換某些值？

我正在嘗試決議 JSON 結構，json 結構如下所示：

{
    children: [
        {
            type: "p",
            children: [{
                text: ""
            }]
        },
        {
            type: "social_embed",
            children: [{
                text: ""
            }]
            source_url: "some_url"
        },
        {
            type: "p",
            children: [{
                type: "p",
                children: [{
                    type: "p",
                    children: [{
                        text: ""
                    }]
                }]
            }]
        },
    ]
}

輸出將如下所示：

{
    children: [
        {
            type: "p",
            children: [{
                text: ""
            }]
        },
        {
            type: "p",
            children: [{
                text: "some_url"
            }]
        },
        {
            type: "p",
            children: [{
                type: "p",
                children: [{
                    type: "p",
                    children: [{
                        text: ""
                    }]
                }]
            }]
        },
    ]
}

這是我正在嘗試的代碼：

 if (currentBlock.type == "card" || currentBlock.type =="card_body") 
       {
          parsedBlocks.map((block: any, index: any) => {
            block.children = parseBlocks(block.children)
          })

          console.log("Blocks after parsing", parsedBlocks)

          editor.insertFragment(parsedBlocks);
          return true
        }

        const parseBlocks = (blocks: any): any => {

        blocks.forEach((block: any) => {
          console.log("Block ", block)
          if (block.type == "social_embed") {
            const newBlock = {
                type: "p",
                children: [
                  {
                    text: block.source_url
                  }
                ]
              }
              blocks[blocks.indexOf(block)] = newBlock
          }
          if (block.children) {
            return parseBlocks(block.children)
          }
        })
        return blocks
      }

我想遞回遍歷所有子級，直到物件中沒有 children 屬性，當我遇到型別為：“social_embed”的物件時，我想將其替換為型別：“p”，文本為 source_url 并修改整個陣列，孩子們可以有無限的嵌套，但 social_embed 除了 {text: ""} 之外，它的孩子們不能有任何東西

uj5u.com熱心網友回復：

您可以將新物件映射到子物件，并采用舊物件的新物件。

const
    update = ({ children = [], ...object }) => {
        if (object.type === "social_embed") {
            const
                type= 'p',
                text = object.source_url;
            return { type, children: [{ text }] };
        }
        children = children.map(update);
        return children.length
            ? { ...object, children }
            : object;
    },
    tree = { children: [{ type: "p", children: [{ text: "" }] }, { type: "social_embed", children: [{ text: "" }], source_url: "some_url" }, { type: "p", children: [{ type: "p", children: [{ type: "p", children: [{ text: "" }] }] }] }] };

tree.children = tree.children.map(update);

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

uj5u.com熱心網友回復：

這樣的事情怎么樣：

const parse = node => {
  if (node.type === "social_embed") {
    return {
      type: "p",
      children: [{ text: node.source_url}]
    }
  }

  return node.children ? {
    ...node,
    children: node.children.map(parse)
  } : node;
}

https://replit.com/@jamiedixon/ParseTree#index.js

如果您想更進一步，您可以根據 定義節點的訪問者type并以這種方式處理它們。

const socialEmbed = node => ({
  type: "p",
  children: [{ text: node.source_url }]
})

const visitors = {
  "social_embed": [socialEmbed]
}

const parse = node => {
  const _visitors = visitors[node.type] || [x => x];
  const result = _visitors.reduce((agg, fn) =>  fn(agg), node);

  return result.children ? {
    ...result,
    children: result.children.map(parse)
  } : result;
}

https://replit.com/@jamiedixon/ParseTree#visitors.js

uj5u.com熱心網友回復：

您可以執行一個遞回函式，該函式在您的樹上回圈并在遇到 social_embed

const input = {children: [{type: "p",children: [{text: ""}]},{type: "social_embed",children: [{text: ""}], source_url: "some_url"},{type: "p",children: [{type: "p",children: [{type: "p",children: [{text: ""}]}]}]}]}

function rec(input) {
    if (input.type === "social_embed") {
        input.children = [{text: input.source_url}]
        input.type = "p"
        delete input.source_url
    }
    input.children?.forEach(rec)
}
rec(input)

console.log(JSON.stringify(input, null, 4))

.as-console-wrapper { max-height: 100% !important; top: 0; }

如果您更喜歡生成一個新物件并保持原始物件完好無損，您可以這樣做

顯示代碼片段

const input = {children: [{type: "p",children: [{text: ""}]},{type: "social_embed",children: [{text: ""}], source_url: "some_url"},{type: "p",children: [{type: "p",children: [{type: "p",children: [{text: ""}]}]}]}]}

function rec(input) {
  const output = {...input}
    if (input.type === "social_embed") {
        output.children = [{text: input.source_url}]
        output.type = "p"
    delete output.source_url
    } else if (input.children) {
    output.children = input.children.map(rec)
  }
  return output
}
const output = rec(input)

console.log(JSON.stringify(output, null, 4))

.as-console-wrapper { max-height: 100% !important; top: 0; }

標籤：javascript 数组 递归

上一篇：Yieldreturn保存迭代器的下一個狀態

下一篇：為fold_left定義正確的函式