連接和減少物件的陣列

我需要加入和排序2個排列，但我沒有成功。

第一個陣列包含了小精靈的 "類別"

第二個陣列包含了小精靈和一些資料。

而第二個陣列包含了寵物和一些資料。

預期結果

 [
        {fire: 19000}。
        { 巖石: 2100 },
        {水: 1500}.
    

第一個陣列 "cateogries or types"

const pokeTypes = [
  { uuid: 1, pokemonType: "fire" },
  { uuid: 2, pokemonType: "water" },
  { uuid: 3, pokemonType: "rock" }
]; 

第二陣列pokemons

const pokemons = [
  {
    name: "geodude",
    pokemonTypeId: 3,
    power: 900,
  },
  {
    name: "onix",
    pokemonTypeId: 3,
    power: 1200,
  },
  {
    name: "squirtle",
    pokemonTypeId: 2,
    power: 100,
  },
  {
    name: "seadra",
    pokemonTypeId: 2,
    power: 300,
  },
  {
    name: "goldeen",
    pokemonTypeId: 2,
    power: 1100,
    },
  {
    name: "charmander",
    pokemonTypeId: 1,
    power: 2000,
    },
   {
    name: "charmeleon",
    pokemonTypeId: 1,
    power: 4000,
    },
   {
    name: "charizard",
    pokemonTypeId: 1,
    power: 7000,
    },
   {
    name: "magmar",
    pokemonTypeId: 1,
    power: 6000,
  },
];

我開始做一個還原器，并且能夠生成一個按pokemonTypeId分組的物件陣列，在這之后我無法繼續......

我試著

function sortPokemons（） {
  結果 = pokemons.reduce(
    (h, pokemons) => 
      Object.assign（h, {
        [pokemons.pokemonTypeId]。(h[pokemons.pokemonTypeId] || []).concat({
          typeId: pokemons.pokemonTypeId,
        }),
      }),
    {}
  );
  console.log（result）。
}
console.log(sortPokemons()) 。

謝謝！

uj5u.com熱心網友回復：

你可以使用Map

輕松而有效地實作這個結果。

。

const pokeTypes = [
  { uuid: 1, pokemonType: "fire" },
  { uuid: 2, pokemonType: "water" },
  { uuid: 3, pokemonType: "rock" }。
];

const pokemons = [
  {
    name: "geodude",
    pokemonTypeId: 3,
    power: 900,
  },
  {
    name: "onix",
    pokemonTypeId: 3,
    power: 1200,
  },
  {
    name: "squirtle",
    pokemonTypeId: 2,
    power: 100,
  },
  {
    name: "seadra",
    pokemonTypeId: 2,
    power: 300,
  },
  {
    name: "goldeen",
    pokemonTypeId: 2,
    power: 1100,
  },
  {
    name: "charmander",
    pokemonTypeId: 1,
    power: 2000,
  },
  {
    name: "charmeleon",
    pokemonTypeId: 1,
    power: 4000,
  },
  {
    name: "charizard",
    pokemonTypeId: 1,
    power: 7000,
  },
  {
    name: "magmar",
    pokemonTypeId: 1,
    power: 6000,
  },
];
const map = new Map();
pokemons.forEach((o) =>/span>
  map.has(o.pokemonTypeId)
    ? map.set(o.pokemonTypeId, map. get(o.pokemonTypeId)   o.power)
    : map.set(o.pokemonTypeId，o.power)
);

const result = pokeTypes.map((o) =>  ({ [o. pokemonType]: map.get(o.uuid) })。

console.log(result); 

/* This is not a part of answer. 它只是為了給輸出填充高度。所以請忽略它 */
.as-console-wrapper { max-height: 100% ！ important; top: 0; }

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

const pokeTypes = [
  { uuid: 1, pokemonType: "fire" },
  { uuid: 2, pokemonType: "water" },
  { uuid: 3, pokemonType: "rock" }
]; 

const pokemons = [
  {
    name: "geodude",
    pokemonTypeId: 3,
    power: 900,
  },
  {
    name: "onix",
    pokemonTypeId: 3,
    power: 1200,
  },
  {
    name: "squirtle",
    pokemonTypeId: 2,
    power: 100,
  },
  {
    name: "seadra",
    pokemonTypeId: 2,
    power: 300,
  },
  {
    name: "goldeen",
    pokemonTypeId: 2,
    power: 1100,
    },
  {
    name: "charmander",
    pokemonTypeId: 1,
    power: 2000,
    },
   {
    name: "charmeleon",
    pokemonTypeId: 1,
    power: 4000,
    },
   {
    name: "charizard",
    pokemonTypeId: 1,
    power: 7000,
    },
   {
    name: "magmar",
    pokemonTypeId: 1,
    power: 6000,
  },
];

var data = pokeTypes.map(function(type) {
    var res = {};
    res[type.pokemonType] = pokemons.filter((item) =>  {
        return item.pokemonTypeId == type.uuid;
    }).reduce(function(sum, item) {
        return sum   item.power;
    }, 0）。)
    return res;
});
  
console.log（data）;

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

可以使用簡單的不可變編程實作：只需使用陣列方法map()和reduce()。

。

const pokeTypes = [
  { uuid: 1, pokemonType: "fire" },
  { uuid: 2, pokemonType: "water" },
  { uuid: 3, pokemonType: "rock" }。
];

const pokemons = [
  {
    name: "geodude",
    pokemonTypeId: 3,
    power: 900,
  },
  {
    name: "onix",
    pokemonTypeId: 3,
    power: 1200,
  },
  {
    name: "squirtle",
    pokemonTypeId: 2,
    power: 100,
  },
  {
    name: "seadra",
    pokemonTypeId: 2,
    power: 300,
  },
  {
    name: "goldeen",
    pokemonTypeId: 2,
    power: 1100,
  },
  {
    name: "charmander",
    pokemonTypeId: 1,
    power: 2000,
  },
  {
    name: "charmeleon",
    pokemonTypeId: 1,
    power: 4000,
  },
  {
    name: "charizard",
    pokemonTypeId: 1,
    power: 7000,
  },
  {
    name: "magmar",
    pokemonTypeId: 1,
    power: 6000,
  },
];

const totals = pokeTypes.map(({uuid, pokemonType}) =>/span> {
  const total = pokemons.reduce((acc, {power, pokemonTypeId}) =>/span>
    pokemonTypeId === uuid ? acc   power : acc
  , 0）。)
  return { [pokemonType] : total };
});

console.log(totals);

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

如果你想要一個干凈的物件{ fire: 19000, rock: 2100, water: 1500 }，這比陣列更干凈，用另一個.reducer()替換.map()：

const totals = pokeTypes. reduce((acc, {uuid, pokemonType}) =>/span> {
  const total = pokemons.reduce((totalAcc, {power, pokemonTypeId}) =>
    pokemonTypeId === uuid ? totalAcc   power : totalAcc
  , 0）。)
  return {
   ...acc,
   [pokemonType]: total,
  }
}, {});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/329117.html

標籤：

上一篇：UWPXAML導航視圖-內容面板上的CornerRadius

下一篇：JavaScript中的陣列過濾是回傳一個空陣列