Question

所以我得到一个JSON请求，该请求发送具有两个属性的对象数组，我需要提取唯一值及其数量。

这是通过邮递员发送的JSON：

[
    {"name": "First value", "amount": 2},
    {"name": "Second value", "amount": 4},
    {"name": "First value", "amount": 6}  
]

我需要返回一个包含唯一值及其总和的JSON响应：

对象应如下所示：

{
   "First value": 8,
   "Second value": 4
}

Answer 1

您可以使用<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand pb-2" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu wider text</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Submenu</a></li> <li><a class="dropdown-item" href="#">Submenu0</a></li> <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu1</a></li> <li><a class="dropdown-item" href="#">Subsubmenu1</a></li> </ul> </li> <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Subsubmenu2</a></li> <li><a class="dropdown-item" href="#">Subsubmenu2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </nav> </body> </html>

reduce()

说明：

首先，我们将const arr = [ {"name": "First value", "amount": 2}, {"name": "Second value", "amount": 4}, {"name": "First value", "amount": 6} ] const res = arr.reduce((ac, {name, amount}) => { ac[name] = ac[name] || 0; ac[name] += amount; return ac; },{}) console.log(res)初始化为空对象ac。见行

{}

突出显示的部分称为对象分解。它将使属性arr.reduce((ac, {name, amount}) => {...} ^^^^^^^^^^^^^^和name脱离我们正在迭代的当前对象，并使其成为独立变量。

查看行

amount

现在，此行正在检查ac[name] = ac[name] || 0;对象上是否不存在ac[name]，则它将为ac，因此undefined将被评估为undefined || 0 。如果它具有一个值，则0的值将保持不变。

请参阅第三行：

ac[name]

此行会将ac[name] += amount;添加到amount的已有值中

最后，我们返回ac[name]，以使其成为ac的初始值，以进行下一次迭代。

Answer 2

您也可以简单地使用Array.forEach，因为它在大多数情况下更易于理解和遵循：

let arr = [{ "name": "First value", "amount": 2 }, { "name": "Second value", "amount": 4 }, { "name": "First value", "amount": 6 } ],
    obj={}

arr.forEach(({name, amount}) => {
  obj[name] = obj[name] || 0
  obj[name] += amount
})

console.log(obj)

此处的主要区别在于，我们的accumulator（obj）是在Array.reduce函数的参数外部而不是“内部”定义的。

从对象数组获取唯一值及其数量

2 个答案:

说明：