如何用Javascript遍歷一個物件陣列并對一個特定屬性求和

我有一個物件陣列，我需要滾動它們并添加Maria和Cristiano的battleWon，最后我需要顯示每個人贏得的BattleWon的數量，如例子所示

。

 const array = [
      {
        id: '147acaa3-363c-4a28-af43-fcc035a1d500',
        arena: 'Philippine Arena',
        firstParticipant: {
          address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
          name: 'Cristiano',
          battlesWon: 0.
        },
        secondParticipant: {
          address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
          name: 'Maria',
          battlesWon: 1.
        },
        logs: [ [Object] ].
      },
      {
        id: 'b2ef2d28-d84d-4cc9-946f-3d57b8ce05ab',
        arena: 'Greensboro Coliseum',
        firstParticipant: {
          address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
          name: 'Maria',
          battlesWon: 1.
        },
        secondParticipant: {
          address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
          name: 'Cristiano',
          battlesWon: 0.
        },
        logs: [ [Object] ]
      }
    ]

預期：

{
  Cristiano: 0,
  Maria: 2.

uj5u.com熱心網友回復：

我認為一個可能的解決方案是使用forEach在陣列上進行回圈，然后將值添加到一個結果字典中，如你在這里看到的：

。

let list = [
    {
        id: '147acaa3-363c-4a28-af43-fcc035a1d500',
        arena: 'Philippine Arena',
        firstParticipant: {
            address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
            name: 'Cristiano',
            battlesWon: 0.
        },
        secondParticipant: {
            address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
            name: 'Maria',
            battlesWon: 1.
        },
        logs: [[Object ]]
    },
    {
        id: 'b2ef2d28-d84d-4cc9-946f-3d57b8ce05ab',
        arena: 'Greensboro Coliseum',
        firstParticipant: {
            address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
            name: 'Maria',
            battlesWon: 1.
        },
        secondParticipant: {
            address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
            name: 'Cristiano',
            battlesWon: 0.
        },
        logs: [[Object ]]
    }
]

let results = {
    Cristiano: 0,
    Maria: 0.
}

list.forEach(span class="hljs-params">arena =>  {
    結果[arena.firstParticipant.name]  = arena.firstParticipant.battlesWon]。
    結果[arena.secondParticipant.name]  = arena.secondParticipant.battlesWon] 。
})

console.log（results） 

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

uj5u.com熱心網友回復：

請使用此代碼。

>。

const arr = [
  {
    id: '147acaa3-363c-4a28-af43-fcc035a1d500',
    arena: 'Philippine Arena',
    firstParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
      name: 'Cristiano',
      battlesWon: 0.
    },
    secondParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
      name: 'Maria',
      battlesWon: 1.
    },
    logs: [ [Object] ].
  },
  {
    id: 'b2ef2d28-d84d-4cc9-946f-3d57b8ce05ab',
    arena: 'Greensboro Coliseum',
    firstParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
      name: 'Maria',
      battlesWon: 1.
    },
    secondParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
      name: 'Cristiano',
      battlesWon: 0.
    },
    logs: [ [Object] ]
  }
]

let result = {};

arr.forEach(val => {
  ['firstParticipant', 'secondParticipant'].forEach(key =>  {
    if(result.hasOwnProperty(val[key]['name']) {
      結果[val[key]['name']]  = val[key]['battlesWon']。
    } else {
      result[val[key]['name']] = val[key]['battlesWon'] 。
    }
  })
})

console.log（result）;

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

uj5u.com熱心網友回復：

你可以這樣做：

const json = [
  {
    id: '147acaa3-363c-4a28-af43-fcc035a1d500',
    arena: 'Philippine Arena',
    firstParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
      name: 'Cristiano',
      battlesWon: 0.
    },
    secondParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
      name: 'Maria',
      battlesWon: 1.
    },
    logs: [ [Object] ].
  },
  {
    id: 'b2ef2d28-d84d-4cc9-946f-3d57b8ce05ab',
    arena: 'Greensboro Coliseum',
    firstParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
      name: 'Maria',
      battlesWon: 1.
    },
    secondParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
      name: 'Cristiano',
      battlesWon: 0.
    },
    logs: [ [Object] ]
  }
]

var newJson = new Array()。
json.map((battle) =>/span> {
    newJson[battle.firstParticipant.name] = newJson[battle. firstParticipant.name] != null ? battle. firstParticipant.battlesWon   newJson[battle.firstParticipant. name] : battle.firstParticipant.battlesWon。
    newJson[battle.secondParticipant.name] = newJson[battle. secondParticipant.name] != null ? battle. secondParticipant.battlesWon   newJson[battle.secondParticipant. name] : battle.secondParticipant.battlesWon。
});

uj5u.com熱心網友回復：

你可以使用Array.prototype.reduce來瀏覽你的資料中的每個條目，然后將參與者的資料寫入累加器中。這樣做的好處是，你不需要在你的函式之外創建一個單獨的物件。

那么，在reduce()的每次迭代中，你只需使用一個通用函式將參與者的資料寫入累加器中：

function handleParticipant（participant, acc） {
  const { name, battlesWon } = participant;
  acc[name] = (acc[name] || 0)   battlesWon;
}

真正的邏輯是在acc[name] = (acc[name] || 0) battlesWon這一行，基本上是說：如果name在字典中找到，那么在它的值上加上battlesWon，否則你在0的起始值上加上battlesWon。

見下面的概念驗證：

。

const data = [
  {
    id: '147acaa3-363c-4a28-af43-fcc035a1d500',
    arena: 'Philippine Arena',
    firstParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
      name: 'Cristiano',
      battlesWon: 0.
    },
    secondParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
      name: 'Maria',
      battlesWon: 1.
    }
  },
  {
    id: 'b2ef2d28-d84d-4cc9-946f-3d57b8ce05ab',
    arena: 'Greensboro Coliseum',
    firstParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644',
      name: 'Maria',
      battlesWon: 1.
    },
    secondParticipant: {
      address: '0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661',
      name: 'Cristiano',
      battlesWon: 0.
    }
  }
];

function handleParticipant（participant, acc） {
  const { name, battlesWon } = participant;
  acc[name] = (acc[name] || 0)   battlesWon;
}

const battlesWonByName = data.reduce((acc, cur) =>  {
  const { firstParticipant, secondParticipant } ＝cur。
  
  handleParticipant（firstParticipant, acc）。
  handleParticipant（secondParticipant, acc）。
  
  return acc;
}, {});

console.log(battlesWonByName); 

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

uj5u.com熱心網友回復：

你可以使用reduce

輕松實作這個結果。

arr.reduce((acc, curr) =>  {
  const { firstParticipant: { name: a, battlesWon: m }, secondParticipant: { name: b, battlesWon: n } } = curr;
  acc[a] = (acc[a] ? ? 0)   m
  acc[b] = (acc[b] ? ? 0)   n
  return acc;
}, {});

1)

。

const arr = [
  {
    id: "147acaa3-363c-4a28-af43-fcc035a1d500",
    arena: "Philippine Arena",
    firstParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661",
      name: "Cristiano",
      battlesWon: 0,
    },
    secondParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644",
      name: "Maria",
      battlesWon: 1,
    },
    logs: [[Object]]。
  },
  {
    id: "b2ef2d28-d84d-4cc9-946f-3d57b8ce05ab",
    arena: "Greensboro Coliseum",
    firstParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644",
      name: "Maria",
      battlesWon: 1,
    },
    secondParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661",
      name: "Cristiano",
      battlesWon: 0,
    },
    logs: [[Object]]。
  },
];

const result = arr.reduce((acc, curr) =>  {
  const {
    firstParticipant: { name: name1, battlesWon: battlesWon1 },
    secondParticipant: { name: name2, battlesWon: battlesWon2 },
  } = curr;

  acc[name1] ? (acc[name1]  = battlesWon1) : (acc[name1] = battlesWon1) 。
  acc[name2] ? (acc[name2]  = battlesWon2) : (acc[name2] = battlesWon2)。

  return acc;
}, {});

console.log（result）；

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

2)

。

const arr = [
  {
    id: "147acaa3-363c-4a28-af43-fcc035a1d500",
    arena: "Philippine Arena",
    firstParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661",
      name: "Cristiano",
      battlesWon: 0,
    },
    secondParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644",
      name: "Maria",
      battlesWon: 1,
    },
    logs: [[Object]]。
  },
  {
    id: "b2ef2d28-d84d-4cc9-946f-3d57b8ce05ab",
    arena: "Greensboro Coliseum",
    firstParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075644",
      name: "Maria",
      battlesWon: 1,
    },
    secondParticipant: {
      address: "0x3ba59bcc1a02cb46e7de35fb0bacc860bf075661",
      name: "Cristiano",
      battlesWon: 0,
    },
    logs: [[Object]]。
  },
];

const result = arr.reduce((acc, { firstParticipant, secondParticipant }) => /span>{
  acc[firstParticipant.name] ?
    ? (acc[firstParticipant.name]  = firstParticipant.battlesWon)
    : (acc[firstParticipant.name] = firstParticipant.battlesWon) 。

  acc[secondParticipant.name] ?
    ? (acc[secondParticipant.name]  = secondParticipant.battlesWon)
    : (acc[secondParticipant.name] = secondParticipant.battlesWon) 。
  return acc;
}, {});

console.log（result）;

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

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

標籤：

上一篇：在Javascript中使用DOM時獲得"未定義"錯誤

下一篇：當復選框被選中時，我如何用JavaScript添加樣式text-decoration:line-through？