通過深層嵌套陣列物件中的特定鍵查找所有子鍵

const data = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];

我如何通過 id 的鍵在這個 obj 的所有嵌套中獲取所有值的陣列。

例如

輸入：[“0-0-0”]

我想這樣輸出

輸出：[“0-0-0”，“0-0-0-0”，“0-0-0-1”，“0-0-0-2”]

在此處輸入影像描述

uj5u.com熱心網友回復：

您可以遞回地遍歷所有children并獲取與目標鍵之一匹配的鍵，或者如果它們的任何祖先與目標鍵匹配。

const data = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];

function getKeys(data, targetKeys) {
  const targetKeysSet = new Set(targetKeys);
  const outputKeys = [];
  function getKeysHelper(data, hasParentMatched = false) {
    data?.forEach((d) => {
      if (targetKeysSet.has(d.key) || hasParentMatched) {
        outputKeys.push(d.key);
        getKeysHelper(d.children, true);
      } else {
        getKeysHelper(d.children);
      }
    });
  }
  getKeysHelper(data);
  return outputKeys;
}

getKeys(data, ["0-0-0"]);

相關檔案：

• 可選鏈接 (?.)
• Array.prototype.includes
• 放

uj5u.com熱心網友回復：

你可以做這樣的事情

const extractKeys = data => {
  const loop = (data, res) => {
  if(!data.children){
    return [...res, data.key]
  }
  return data.children.flatMap(d => loop(d, [...res, data.key]))
  }
  return [...new Set(loop(data, []))]
}


const findKeys = (data, keys) => data.flatMap(extractKeys).filter(k => keys.some(key => k.includes(key))) 



const data = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
];

console.log(findKeys(data, ['0-0-0']))

標籤：javascript 数组 功能 树视图

上一篇：使用正則運算式獲取所有輔音，直到出現元音

下一篇：如何洗掉資料框中每個組中的重復項？