如何將對象數組中單個屬性的值相加？

Question

假設我有這個數組：

var foo = [{name: "one", number: 1},{name: "two", number: 2},{name: "three", number: 3}]

現在我想將所有數字的總和輸出到一個 div 中。 我想出了這個：

var bar = 0
foo.map((n) => { bar = bar + n.number })
    
return(
    <div>{bar}</div>
)

是否可以/建議僅使用 div 標簽之間的空格將所有數字相加？ <div>{here}</div>

Answer 1

我會改用reduce ：

<div>{foo.reduce((a, { number }) => a + number, 0)}</div>

但是，雖然這是可能的，但我認為將其放入內聯 JSX 有點多。 我更願意在上面聲明總數。

Answer 2

使用Array.reduce

<div>{foo.reduce((sum, i)=>sum+i.number, 0)}</div>