如何使用纯JS从对象数组中获取数字的总和？答案

【问题标题】：How to get the sum of number from an array of objects, using pure JS?如何使用纯JS从对象数组中获取数字的总和？
【发布时间】：2021-01-26 18:04:24
【问题描述】：

我想仅使用纯 JS 显示 点赞总数。我从 JSON 文件中获取了数字，但我不知道如何获得喜欢的总数，我尝试使用 reduce 方法它不起作用，也许我做错了方式

这就是我想做的click here for the photo 这是我的代码

function photographerWork(JsonData, homeElement){
   const homeElt = homeElement.id;
   JsonData.media.forEach(element => {   
   if(homeElt == element.photographerId){
       const domDiv = document.getElementById('photographer-work');
       const newDiv = document.createElement("div");
       /////  the code i'am trying  ////
       const allTheLiks = element.likes
       console.log(allTheLiks)
       //////////////////////
       const workTemplate = `         
           <div class="photo-box"> 
               <div class="photo">
                   ${videoOrImage(element.image, element.video, element)}
               </div>   
               <div class="text">
                   <p> ${element.tags}<b>${element.price} €  &nbsp ${element.likes} <i class="fas fa-heart"></i></b></p>
               </div>
           </div>
           `
       newDiv.innerHTML = workTemplate;
       domDiv.appendChild(newDiv);
       likesAndPrice(element, allTheLiks); 
     }
 })
}

这是我的结果click hereenter code here

这是我的 JSON 文件示例

 "media": [
      {
        "id": 342550,
        "photographerId": 82,
        "image": "../Photos/Tracy/Fashion_Yellow_Beach.jpg",
        "tags": ["fashion"],
        "likes": 62,
        "date": "2011-12-08",
        "price": 55
      },
      {
        "id": 8520927,
        "photographerId": 82,
        "image": "../Photos/Tracy/Fashion_Urban_Jungle.jpg",
        "tags": ["fashion"],
        "likes": 11,
        "date": "2011-11-06",
        "price": 55
      },
      {
        "id": 9025895,
        "photographerId": 82,
        "image": "../Photos/Tracy/Fashion_Pattern_on_Pattern.jpg",
        "tags": ["fashion"],
        "likes": 72,
        "date": "2013-08-12",
        "price": 55
      },
      {
        "id": 9275938,
        "photographerId": 82,
        "image": "../Photos/Tracy/Event_WeddingGazebo.jpg",
        "tags": ["events"],
        "likes": 69,
        "date": "2018-02-22",
        "price": 55
      },
      {
        "id": 2053494,
        "photographerId": 82,
        "image": "../Photos/Tracy/Event_Sparklers.jpg",
        "tags": ["events"],
        "likes": 2,
        "date": "2020-05-25",
        "price": 55
      },

【问题讨论】：

在循环中总结它们
嗨！ @EgzonBerisha 我有事。我会尽快添加答案。但只是为了确认您到目前为止所做的 reduce 公式是什么？
这能回答你的问题吗？ Sum of array object property values in new array of objects in Javascript
对可能回答者的说明：这个问题以及类似的问题在 Stack Overflow 上被以相对较高的频率提出。这种情况经常发生，我们有几个规范的重复。在回答问题之前，请至少粗略搜索一下重复项。
@EgzonBerisha 我已经为这个问题提供了一个单一的答案 - 我花了几个小时才弄清楚。希望有帮助

标签： javascript

【解决方案1】：

在你输入forEach()之前创建一个局部变量sum

let sum = 0;

然后在你的forEach()执行以下操作

sum += element.likes;

那么当循环结束时，总和将是喜欢的总数。

更新代码。

function photographerWork(JsonData, homeElement){
   let sum = 0;
   const homeElt = homeElement.id;
   JsonData.media.forEach(element => {   
   if(homeElt == element.photographerId){
       const domDiv = document.getElementById('photographer-work');
       const newDiv = document.createElement("div");
       /////  the code i'am trying  ////
       const allTheLiks = element.likes
       console.log(allTheLiks)
       //////////////////////

       sum += element.price;

       const workTemplate = `         
           <div class="photo-box"> 
               <div class="photo">
                   ${videoOrImage(element.image, element.video, element)}
               </div>   
               <div class="text">
                   <p> ${element.tags}<b>${element.price} €  &nbsp ${element.likes} <i class="fas fa-heart"></i></b></p>
               </div>
           </div>
           `
       newDiv.innerHTML = workTemplate;
       domDiv.appendChild(newDiv);
       likesAndPrice(element, allTheLiks); 
     }

})
 // here you have the sum now 
    console.log(sum);
}

【讨论】：

嗨，亚历克斯，非常感谢这确实有效，我的问题是不知道在循环内部或外部放置元素的位置，谢谢，是否可以在模板文字中使用结果另一个功能？
不客气@EgzonBerisha :) 当然你可以将它作为参数传递给另一个函数，在那里你很可能将它用作模板文字。 不熟悉模板文字控制台日志在哪里，您可以使用 sum 作为参数调用您的函数yourfunction(sum)

【解决方案2】：

const media = [{
    "id": 342550,
    "photographerId": 82,
    "image": "../Photos/Tracy/Fashion_Yellow_Beach.jpg",
    "tags": ["fashion"],
    "likes": 62,
    "date": "2011-12-08",
    "price": 55
  },
  {
    "id": 8520927,
    "photographerId": 82,
    "image": "../Photos/Tracy/Fashion_Urban_Jungle.jpg",
    "tags": ["fashion"],
    "likes": 11,
    "date": "2011-11-06",
    "price": 55
  },
  {
    "id": 9025895,
    "photographerId": 82,
    "image": "../Photos/Tracy/Fashion_Pattern_on_Pattern.jpg",
    "tags": ["fashion"],
    "likes": 72,
    "date": "2013-08-12",
    "price": 55
  },
  {
    "id": 9275938,
    "photographerId": 82,
    "image": "../Photos/Tracy/Event_WeddingGazebo.jpg",
    "tags": ["events"],
    "likes": 69,
    "date": "2018-02-22",
    "price": 55
  },
  {
    "id": 2053494,
    "photographerId": 82,
    "image": "../Photos/Tracy/Event_Sparklers.jpg",
    "tags": ["events"],
    "likes": 2,
    "date": "2020-05-25",
    "price": 55
  }
];

const response = media.reduce((total, { likes }) => {
  total += likes;
  return total;
}, 0);

console.log(`total likes: ${response}`);

您可以使用reduce 函数并执行以下操作：

const response = media.reduce((total, { likes }) => {
  total += likes;
  return total;
}, 0);

【讨论】：

【解决方案3】：

假设 jsonData 是保存数据的变量。

var totalLikes =  jsonData.media.reduce((acc, cur) => (true, {likes: acc.likes + cur.likes})).likes

一个伟大的班轮来完成这项任务。有两种方法——一种是@Kidas 发布的和我的——它只是以这样一种方式减少，即在整个减少过程中维护一个 JSON 对象，然后再访问它。如果您不喜欢使用 ES6 语法 - 只需将箭头函数替换为 function

var totalLikes =  jsonData.media.reduce(function (acc, cur) {
    return (true, {likes: acc.likes + cur.likes})
}).likes

【讨论】：

【解决方案4】：

您需要在每次渲染卡片（即：对象）时添加点赞。我已经添加了一个变量combinedLikes，并且每次都添加了喜欢。

干杯:)

function photographerWork(JsonData, homeElement){
   const homeElt = homeElement.id;
   let combinedLikes = 0;
   JsonData.media.forEach(element => {   
   if(homeElt == element.photographerId){
       const domDiv = document.getElementById('photographer-work');
       const newDiv = document.createElement("div");
       /////  the code i'am trying  ////
       combinedLikes += element.likes;
       console.log(allTheLiks)
       //////////////////////
       const workTemplate = `         
           <div class="photo-box"> 
               <div class="photo">
                   ${videoOrImage(element.image, element.video, element)}
               </div>   
               <div class="text">
                   <p> ${element.tags}<b>${element.price} €  &nbsp ${element.likes} <i class="fas fa-heart"></i></b></p>
               </div>
           </div>
           `
       newDiv.innerHTML = workTemplate;
       domDiv.appendChild(newDiv);
       likesAndPrice(element, combinedLikes); 
     }
 })
}

【讨论】：