JavaScript：使用Object.fromEntires()按資料構建過濾器選項陣列

我正在嘗試通過物件的鍵和值來構建物件過濾，想法是用不會重復的鍵和值填充過濾器陣列。

例如：

const filters = [{ region_code: [] }, { capital: [] }];
consta data = [{
    id: 1,
    region_code: 'DE'
    capital: 'ABC'
},
{
    id: 2,
    region_code: 'DE'
    capital: 'ABC'
},
{
    id: 3,
    region_code: 'PL'
    capital: 'ZZZ'
}];

這應該有效果：

const filters = [{ region_code: ['DE', 'PL'] }, { capital: ['ABC', 'ZZZ'] }];

然后我將能夠在前面映射這些過濾器并使用過濾器功能加載適當的物件。

我試著這樣做：

data.forEach((item) => {
   Object.fromEntries(Object.entries(item).map(([k, v]) => 
    filters.map(filter => {
            filter[k] = v
    })
   ));
});

console.log(filters);

uj5u.com熱心網友回復：

您永遠不會分配filter任何地方創建的陣列，也永遠不會分配fromEntries任何地方創建的物件。但你也不需要；你已經有了你的物件和陣列，你只需要填充它們。你可以通過回圈遍歷專案，獲取每個專案的region_code和capital，并在它不存在時添加它來做到這一點：

// Get the filter arrays (this code assumes they exist)
const regionFilter = filters.find(element => "region_code" in element).region_code;
const capitalFilter = filters.find(element => "capital" in element).capital;
for (const {region_code, capital} of data) {
    if (!regionFilter.includes(region_code)) {
        regionFilter.push(region_code);
    }
    if (!capitalFilter.includes(capital)) {
        capitalFilter.push(capital);
    }
}

現場示例：

顯示代碼片段

const filters = [{ region_code: [] }, { capital: [] }];
const data = [{
    id: 1,
    region_code: 'DE',
    capital: 'ABC'
},
{
    id: 2,
    region_code: 'DE',
    capital: 'ABC'
},
{
    id: 3,
    region_code: 'PL',
    capital: 'ZZZ'
}];
const regionFilter = filters.find(element => "region_code" in element).region_code;
const capitalFilter = filters.find(element => "capital" in element).capital;
for (const {region_code, capital} of data) {
    if (!regionFilter.includes(region_code)) {
        regionFilter.push(region_code);
    }
    if (!capitalFilter.includes(capital)) {
        capitalFilter.push(capital);
    }
}
console.log(JSON.stringify(filters, null, 4));

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

假設data陣列中沒有成千上萬的元素（或更多），因為進行includes了線性搜索。如果是幾十萬的元素，你會發現，上面的代碼是太慢了，你可以用Set做更有效的檢查比includes，就像這樣：

// Get the filter arrays (this code assumes they exist)
const regionFilterElement = filters.find(element => "region_code" in element);
const capitalFilterElement = filters.find(element => "capital" in element);
const knownRegions = new Set(regionFilterElement.region_code);
const knownCapitals = new Set(capitalFilterElement.capital);
for (const {region_code, capital} of data) {
    knownRegions.add(region_code);
    knownCapitals.add(capital);
}
regionFilterElement.region_code = [...knownRegions];
capitalFilterElement.capital = [...knownCapitals];

現場示例：

顯示代碼片段

const filters = [{ region_code: [] }, { capital: [] }];
const data = [{
    id: 1,
    region_code: 'DE',
    capital: 'ABC'
},
{
    id: 2,
    region_code: 'DE',
    capital: 'ABC'
},
{
    id: 3,
    region_code: 'PL',
    capital: 'ZZZ'
}];
const regionFilterElement = filters.find(element => "region_code" in element);
const capitalFilterElement = filters.find(element => "capital" in element);
const knownRegions = new Set(regionFilterElement.region_code);
const knownCapitals = new Set(capitalFilterElement.capital);
for (const {region_code, capital} of data) {
    knownRegions.add(region_code);
    knownCapitals.add(capital);
}
regionFilterElement.region_code = [...knownRegions];
capitalFilterElement.capital = [...knownCapitals];
console.log(JSON.stringify(filters, null, 4));

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

uj5u.com熱心網友回復：

您可以減少陣列并構建一個新物件。

const
    filters = ['region_code', 'capital'],
    data = [{ id: 1, region_code: 'DE', capital: 'ABC' }, { id: 2, region_code: 'DE', capital: 'ABC' }, { id: 3, region_code: 'PL', capital: 'ZZZ' }],
    result = Object
        .entries(data.reduce((r, o) => {
            Object.entries(o).forEach(([k, v]) => {
                if (!(k in r)) return;
                if (!r[k].includes(v)) r[k].push(v);
            });
            return r;
        }, Object.fromEntries(filters.map(k => [k, []]))))
        .map(p => Object.fromEntries([p]));

console.log(result);

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

uj5u.com熱心網友回復：

試試這個：

  const filters = [{ region_code: [] }, { capital: [] }];
  const data = [{ id: 1, region_code: 'DE', capital: 'ABC' }, { id: 2, region_code: 'DE', capital: 'ABC' }, { id: 3, region_code: 'PL', capital: 'ZZZ' }];
  data.map(d => {
    if (!filters[0].region_code.includes(d.region_code)) {
      filters[0].region_code.push(d.region_code)
    }
    if (!filters[1].capital.includes(d.capital)) {
      filters[1].capital.push(d.capital)
    }
  })
  console.log(filters)

uj5u.com熱心網友回復：

您可以使用簡單的 for 回圈來完成

const data=[{id:1,region_code:"DE",capital:"ABC"},{id:2,region_code:"DE",capital:"ABC"},{id:3,region_code:"PL",capital:"ZZZ"}];

    let region_code = [];
    let capital = [];
    let finalArr = [];

    for (let i = 0; i < data.length; i  ) {
      region_code.push(data[i].region_code);
      capital.push(data[i].capital);
    }
    finalArr.push({ 'region_code': [...new Set(region_code)] }, { 'capital': [...new Set(capital)] })

    console.log(finalArr, 'finalArr');

標籤：

上一篇：Reactrouterv6如何在類組件中獲取當前路由

下一篇：根據元素的索引向元素添加類