制作一个计算数组中对象的函数

Question

我有这个代码，它可以计算数组中的对象，并且代码可以工作，但是当我尝试将它变成一个函数时它消失了，我不知道为什么

我想把它变成一个函数，这样我就可以，但它在另一个函数中

 var markers = [ { type:"Chocolate", name:"KitKat", group:"candy", icon:"candy", coords:[5246,8980], }, { type:"Fruit", name:"Orange", group:"fruits", icon:"fruis", coords:[9012,5493], }, { type:"Fruit", name:"Banana", group:"fruits", icon:"fruis", coords:[9012,5493], }, { type:"Food", name:"Rice", group:"foods", icon:"foods", coords:[6724,9556], }, { type:"Food", name:"Meat", group:"foods", icon:"foods", coords:[6724,9556], }, { type:"Food", name:"Beam", group:"foods", icon:"foods", coords:[6724,9556], }, { type:"Liquid", name:"Water", group:"liquids", icon:"liquids", coords:[6724,9556], }, { type:"Liquid", name:"Coffe", group:"liquids", icon:"liquids", coords:[6724,9556], }, ]; var count = {} for (var i = 0; i < markers.length; i++) { count[markers[i].type] = count[markers[i].type] + 1 || 1 ; } document.getElementById('data').innerHTML = JSON.stringify(count);

 function make(){ var pg = '<table>' for(i = 0;i < markers.length; i++){ pg += '<td>' + ??? + '</td>'; // I would like to put it here og += '</tr>'; } document.getElementById('data').innerHTML = pg; }

我也想删除 JSON.stringify 因为我是编程新手所以更多的香草 java 将是最好的希望有人能帮助我

Answer 1

工作正常，但您必须实际调用该函数。

此外， JSON.stringify()是普通的JavaScript。

但是，要获得您正在寻找的输出类型，您需要遍历结果count对象。 通常不鼓励使用表格，但您可以通过使用 CSS 调整元素大小来实现相同的布局，如下所示。

此外，为了使函数可重用，我们可以将markers作为参数传递给它，而不是让函数始终只处理那个对象。

 var markers = [ { type:"Chocolate", name:"KitKat", group:"candy", icon:"candy", coords:[5246,8980], }, { type:"Fruit", name:"Orange", group:"fruits", icon:"fruis", coords:[9012,5493], }, { type:"Fruit", name:"Banana", group:"fruits", icon:"fruis", coords:[9012,5493], }, { type:"Food", name:"Rice", group:"foods", icon:"foods", coords:[6724,9556], }, { type:"Food", name:"Meat", group:"foods", icon:"foods", coords:[6724,9556], }, { type:"Food", name:"Beam", group:"foods", icon:"foods", coords:[6724,9556], }, { type:"Liquid", name:"Water", group:"liquids", icon:"liquids", coords:[6724,9556], }, { type:"Liquid", name:"Coffe", group:"liquids", icon:"liquids", coords:[6724,9556], }, ]; let output = document.getElementById('data'); function counter(obj){ var count = {} for (var i = 0; i < markers.length; i++) { count[obj[i].type] = count[obj[i].type] + 1 || 1 ; } // Now that the result object is populated, // this function has done its job, but we // want that resulting object to be used in // order to create the layout on the page // so this function will return it to the caller return count; } // Run the counter function and pass it our starting object // then store the resulting object. let totalCounts = counter(markers); // This function reqquires an object to be passed in // and it will make the page layout. So, we'll pass // the object we got back from running the counter function function make(obj){ // Now that the object is created, loop over it for(var prop in obj){ // Create a new span for to hold the type and configure it: let type = document.createElement("span"); type.classList.add("type"); type.textContent = prop; // prop is the name of the property // Now one for the count let counter = document.createElement("span"); counter.classList.add("type"); counter.textContent = obj[prop]; // count[prop] gets the value of the property // And something to hold the spans let row = document.createElement("div"); // Inject the new elements into the document row.appendChild(type); row.appendChild(counter); output.append(row); } } make(totalCounts); // And then call it!

 .type, .row { display:inline-block; width:100px; }

 <div id="data"></div>