通過檢查其屬性來更新父陣列：Javascript

我有一個arr1具有某些屬性的深度嵌套物件陣列，并給出另一個陣列arr2作為輸入，需要比較這些中的相應名稱并獲取值并將其附加到陣列之一。如果 name 不存在，arr2則設定為默認配置，即{ val1: false, val2: false, applyToChildren: false } 其父項applyToChildren設定為false. 如果它設定為 true，則將其父配置復制到結果中。

結構看起來像，

const arr1 = [
  {
    name: "internalcorp.com",
    children: [
      {
        name: "internalcorp.com.child1",
        children: [
          {
            name: "internalcorp.com.grandchild1",
            children: []
          }
        ]
      },
      {
        name: "internalcorp.com.child2",
        children: []
      }
    ]
  },
  {
    name: "internalcorpwebsite.com",
    children: []
  }
];

const arr2 = [
  {
    name: "internalcorp.com",
    val1: false,
    val2: false,
    applyToChildren: true
  },
  {
    name: "internalcorp.com.child1",
    val1: true,
    val2: true,
    applyToChildren: true
  },
  {
    name: "internalcorp.com.child2",
    val1: true,
    val2: false,
    applyToChildren: true
  },
  {
    name: "internalcorpwebsite.com",
    val1: false,
    val2: false,
    applyToChildren: true
  }
];

輸出應該是這樣的

const output = [
  {
    name: "internalcorp.com",
    config: {
      val1: false,
      val2: false,
      applyToChildren: true
    },
    children: [
      {
        name: "internalcorp.com.child1",
        config: {
          val1: true,
          val2: true,
          applyToChildren: true
        },
        children: [
          {
            name: "internalcorp.com.grandchild1",
            children: [],
            config: {
              val1: true,
              val2: true,
              applyToChildren: true
            }
          }
        ]
      },
      {
        name: "internalcorp.com.child2",
        children: [],
        config: {
          val1: true,
          val2: false,
          applyToChildren: true
        }
      }
    ]
  },
  {
    name: "internalcorpwebsite.com",
    children: [],
    config: {
      val1: false,
      val2: false,
      applyToChildren: true
    }
  }
];

這里internalcorp.com.grandchild2不存在于 arr2 中，并且由于它的父項applyToChildren存在true，因此我將其配置復制到結果中

我試過的代碼

const addConfig = (items) =>
  items.map(item => {
    const { val1, val2, applyToChildren } = arr2.find(p => p.name === item.name);
    return {
      ...item,
      config: {
        val1,
        val2,
        applyToChildren
      },
      children: addConfig(item.children)
    };
  });

const result = addConfig(arr1);

uj5u.com熱心網友回復：

你可以用一個簡單的 Array.forEach

邏輯。

• 回圈遍歷每個物件 arr1
• 檢查 中的每個物件arr1，如果 中name存在相同的值arr2。
• 如果存在，則更新該config節點的。
• 如果沒有，請檢查其父級是否已applyToChildren設定。
• 如果設定，請使用父級的配置
• 否則使用默認配置
• 我已用作JSON.parse(JSON.stringify(arr1))引數，以確保執行深復制

作業的小提琴

const arr1 = [{name: "internalcorp.com", children: [{name: "internalcorp.com.child1",children: [ { name: "internalcorp.com.grandchild1", children: [] } ]},{name: "internalcorp.com.child2",children: []}]},{name: "internalcorpwebsite.com",children: []}];

const arr2 = [{ name: "internalcorp.com", val1: false, val2: false, applyToChildren: true },{ name: "internalcorp.com.child1", val1: true, val2: true, applyToChildren: true },{ name: "internalcorp.com.child2", val1: true, val2: false, applyToChildren: true },{ name: "internalcorpwebsite.com", val1: false, val2: false, applyToChildren: true }];

const defaultConfig = { val1: false, val2: false, applyToChildren: false };

const addConfig = (items, parentNode) => {
  items.forEach((node) => {
    const valueNode = arr2.find(value => value.name === node.name);
    if(valueNode) {
      const { name, ...config } = valueNode;
      node.config = config;
    } else {
      if (parentNode && parentNode.config && parentNode.config.applyToChildren) {
        node.config = parentNode.config;
      } else {
        node.config = defaultConfig;
      }
    }
    if(node.children && node.children.length > 0) {
      node.children.forEach(child => addConfig(node.children, node))
    }
  })
  return items;
}

const result = addConfig(JSON.parse(JSON.stringify(arr1)), null);
console.log(result);

uj5u.com熱心網友回復：

以下提供的解決方案使用基于遞回map的方法。此外，它還利用了經常被遺忘的thisArg引數，該引數可以作為map的第二個引數thisArg提供，然后作為回呼的（映射函式的）this背景關系提供。

該解決方案還將子項config陣列轉換為一個物件，該物件用于基于項的name. 并且為了將父特定配置更深入地傳遞到遞回中，系結的配置資料被提供為{lookup, config}wherelookup保存整個配置資料并config保存最近父項配置的參考。

function recursivelyAggregateChildItemFromBoundConfigData(item) {
  const { lookup, config: parentConfig } = this;
  const { name, children = [] } = item;
  const config = { ...(lookup[name] ?? parentConfig) };
  // { ...{} } decouples any direct `config` reference.
  return {
    name,
    config,
    children: children.map(
      recursivelyAggregateChildItemFromBoundConfigData,
      { lookup, config }
    ),
  };
}

const nestedData = [{
  name: "internalcorp.com",
  children: [{
    name: "internalcorp.com.child1",
    children: [{
      name: "internalcorp.com.grandchild1",
      children: [],
    }],
  }, {
    name: "internalcorp.com.child2",
    children: [],
  }],
}, {
  name: "internalcorpwebsite.com",
  children: []
}];

const itemConfigList = [{
  name: "internalcorp.com",
  val1: false,
  val2: false,
  applyToChildren: true
}, {
  name: "internalcorp.com.child1",
  val1: true,
  val2: true,
  applyToChildren: true
}, {
  name: "internalcorp.com.child2",
  val1: true,
  val2: false,
  applyToChildren: true
}, {
  name: "internalcorpwebsite.com",
  val1: false,
  val2: false,
  applyToChildren: true
}];

console.log(
  'lookup table/index/map ...',
  Object.fromEntries(
    itemConfigList.map(({ name:key, ...value }) => [key, value])
  )
);
console.log(
  'recursively mapped nested data ...',
  nestedData.map(recursivelyAggregateChildItemFromBoundConfigData, {
    lookup: Object.fromEntries(
      itemConfigList.map(({ name:key, ...value }) => [key, value])
    ),
    config: null,
  })
);

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

標籤：javascript 数组

上一篇：推入打字稿是在回圈中附加最后修改的物件

下一篇：JPA本地查詢。不能選擇特定的列