如何计算和添加对象中键的值

Question

我需要编写一个接受 2 个参数的函数，第一个参数是 <li> 元素的列表，第二个参数是一个对象。对象是产品列表及其价格。所有<li>元素都将包含包含产品名称的文本。该函数应检查提及的每个产品的价格，计算并返回总价格。

例子：

<ul>
    <li>oreos<li/>
    <li>milk<li/>
<ul/>

let products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
}

我尝试使用 for in/of 循环来遍历 products 对象并使用 .innerText 将其与 <li> 匹配，但我不确定如何去做。

请帮忙

Answer 1

您可以做的是，您可以使用以下功能：

let totalPrice = (priceList, products) => {
return products.reduce((total, elem) => {
    total += priceList[elem.innerText];
    return total;
}, 0)

}

此函数使用 Array.reduce 迭代产品列表并添加产品价格列表并返回总价。

您应该查看Array.reduce() 以获得更清晰的信息。

Answer 2

您的函数可能如下所示：

1. 遍历所有列表项
2. 获取item的文本内容
3. 以文本内容为关键字在 products 对象中查找价格
4. 加到总数中
5. 返回总数

我使用Array.from() 和Array.prototype.reduce() 一口气实现了这一切。当然，您需要一个不同的类，甚至更好的是列表上的 ID，而不是简单地选择页面上的所有列表项。

let products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
}

function getTotal(listElements, productPrices) {
  var total = Array.from(listElements).reduce(function(total, listItem) {
    total += productPrices[listItem.textContent] || 0;
    return total;
  }, 0);
  return total;
}

console.log(getTotal(document.querySelectorAll('li'), products));

<ul>
    <li>oreos</li>
    <li>milk</li>
</ul>

Answer 3

循环遍历 li 元素，使用它们的 innerText 作为键来查找价格，将它们相加，就可以了：

let total = 0;
document.querySelectorAll('li').forEach(item => {
  total += products[item.innerText];
});

还有其他形式，您可以添加一些小内容（例如首先检查该项目是否确实存在于 products 数组中），但这是基本思想。

Answer 4

你可以给你的<ul>添加一个id，比如说“list”，然后做这样的事情：

let list = document.getElementById("list");
let totals = {};

for(let key of products) {
    totals[key] = 0;
}

for(let i = 0; i < list.children.length; i++) {
    let child = list.children[i];

    let text = child.textContent;

    if(totals.hasOwnProperty(text)) {
        totals[text]++;
    }
}

let fullPrice = 0;

for(let key of products) {
    fullPrice += products[key] * totals[key];
}

console.log(fullPrice);

代码执行以下操作：

1. 它会创建一个totals 对象，该对象将计算您的products 对象中每个现有产品的出现次数。
2. 然后，它获取您的 <ul> 元素，并循环遍历其 <li> 子元素，获取每个 <li> 的文本并在 totals 对象中查找它。
3. 如果产品存在，则会增加计数。
4. 最后，它通过将总价乘以价格来计算最终的完整价格。

PS：此代码假定您的列表中只有<li> 元素，并且每个<li> 仅包含文本。

Answer 5

你首先需要修复你的结束标签；斜线出现在最终标签名称之前。

其次，您可以通过获取它们的文本值并在产品列表中查找它们来减少所有列表值。您可以使用Array.from 将NodeList 转换为数组，以便调用Array.prototype.reduce。

const products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
}

let total = calculateTotal(document.querySelector('ul.items'), products)

console.log(`Total = ${total}`)

function calculateTotal(ul, products) {
  return Array.from(ul.querySelectorAll('li'))
    .reduce((sum, li) => sum + products[li.textContent] || 0, 0)
}

<ul class="items">
    <li>oreos</li>
    <li>milk</li>
</ul>

Answer 6

您可以尝试使用querySelectorAll() 和Array.prototype.reduce()。

请注意：您以错误的方式关闭元素 (<li/>, <ul/>)，这将创建意外标记，应为 </li>, </ul>。

let products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
};
function getTotal(li, prod){
  return Array.from(li).reduce((a,c) => a + prod[c.textContent], 0);
}
console.log(getTotal(document.querySelectorAll('li'), products));

<ul>
    <li>oreos</li>
    <li>milk</li>
</ul>

Answer 7

为您指明正确的方向（未经测试）：

发件人：https://www.sitepoint.com/community/t/looping-through-li-elements-in-ul/6049/2 和Check if a key exists inside a json object

<ul id="foo">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

var ul = document.getElementById("foo");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; ++i) {
  // do something with items[i], which is a <li> element
  if((items[i] in products)) alert("yeah");
}

另请阅读：Looping through list items with jquery

• 这应该会让您朝着正确的方向前进（甚至可以开箱即用）。

相信这会有所帮助。

Answer 8

function getPrice()
{
    let products = {
        oreos: 20,
        milk:  17,
        bread: 12,
        doritos: 10
    }

    var items = document.getElementsByTagName("li");
    var price = 0;

    for (i = 0; i < items.length; i++) {
        var item = items[i];
        var val = parseFloat(products[item.innerHTML]);
        price += val;    
    }

    alert("Total price is: " + String(price));
}

然后，您可以将函数 getPrice 挂钩到按钮的 onclick 属性以查看结果。您可能希望给您的列表一个类，或者给ul 一个id，这样getPrice 就不会返回您HTML 页面上的所有列表。