javascript - 从使用 map 创建的对象中获取最高值

Question

我已将带有嵌套 div 的 div 动态添加到 dom。这些具有数据属性:data-name-nr, data-model, data-price.

我想要的是从所有“data-div”中的每一个中将“data-price”的最高值赋给一个数组。在我的示例中，最后一个

中有两个嵌套的 div

更多说明:在我的示例中，我有三个 div 类“frame” = 我需要一个包含三个值的数组。实际上，每晚都在 1 到 10 之间，甚至更多。

所以我的例子的结果是

let array = [100,150,200]
or
let object = {1:100,2:150,3:200} //from the name-nr

到目前为止，我只设法映射了 data-item我尝试使用 map.get 和其他方法，它们都给了我错误，我不知道应该去哪个方向。你能帮忙吗？

例子:

HTML

    <div class="flex">
<div class="frame" data-name-nr="1">
  <div class="border" data-name-nr="1" data-price="100" data-div="1/1"></div>
</div>
<div class="frame" data-name-nr="2">
  <div class="border" data-name-nr="2" data-price="150" data-div="1/1"></div>
</div>
<div class="frame" data-name-nr="3">
  <div class="border fifty" data-name-nr="3" data-price="100" data-div="1/2"></div>
  <div class="border fifty" data-name-nr="3" data-price="200" data-div="2/2"></div>
</div>
</div>

JS

function functionName() {
   jQuery( ".frame .box" ).map(function() {

  const key = ['name','model','price']
  let values = [[jQuery(this).data("name-nr"),( jQuery(this).data('div')),( jQuery(this).data('price'))]]
  let result = values.map(row =>
    row.reduce((acc, cur, i) =>
      (acc[key[i]] = cur, acc), {}))
  console.log(result[0])
})
}

$(document).on('click', '.click', functionName)

控制台

Object { name: 1, model: "1/1", price: 100 }  
Object { name: 2, model: "1/1", price: 150 } 
Object { name: 3, model: "1/2", price: 100 } 
Object { name: 3, model: "2/2", price: 200 }

https://jsfiddle.net/mik_a/a6jt7kb0/

Answer 1

创建一个哈希表，方法是减少为具有唯一名称且价格最高的哈希，然后将它们取出到数组中作为需要。

请看下面的演示:

function functionName() {
  let hash = jQuery(".frame .box").map(function() {
    return {
      name: jQuery(this).data("name-nr"),
      model: jQuery(this).data('div'),
      price: jQuery(this).data('price')
    };
  }).get().reduce(function(p,c){
      if((p[c.name] && p[c.name].price < c.price) || !p[c.name])
        p[c.name] = c
      return p;
  },Object.create(null));
  let result = Object.keys(hash).map(function(e) {
     return hash[e];
  });
  console.log(result);
}

$(document).on('click', '.click', functionName)

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 300px;
}

.frame {
  outline: 1px solid red;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.box {
  border-top: 1px solid green;
}

.fifty {
  height: 50%;
}

button {
  width: 100px;
  height: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="frame" data-name-nr="1">
    <div class="box" data-name-nr="1" data-price="100" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="2">
    <div class="box" data-name-nr="2" data-price="150" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="3">
    <div class="box fifty" data-name-nr="3" data-price="100" data-div="1/2"></div>
    <div class="box fifty" data-name-nr="3" data-price="200" data-div="2/2"></div>
  </div>
</div>
<button class="click" value="CLICK">
click
</button>

和 ES6 版本:

function functionName() {
  let hash = jQuery(".frame .box").map(function() {
    return {
      name: jQuery(this).data("name-nr"),
      model: jQuery(this).data('div'),
      price: jQuery(this).data('price')
    };
  }).get().reduce((p, c) => {
    if ((p[c.name] && p[c.name].price < c.price) || !p[c.name])
      p[c.name] = c;
    return p;
  }, Object.create(null));
  let result = Object.keys(hash).map(e => hash[e]);
  let sum = Object.keys(hash).map(e => hash[e].price).reduce((p,c) => p + c, 0);
  console.log(result, sum);
}

$(document).on('click', '.click', functionName)

.flex{display:flex;align-items:center;justify-content:center;width:400px;height:300px}.frame{outline:1px solid red;flex:1;display:flex;flex-direction:column;height:100%}.box{border-top:1px solid green}.fifty{height:50%}button{width:100px;height:35px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="frame" data-name-nr="1">
    <div class="box" data-name-nr="1" data-price="100" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="2">
    <div class="box" data-name-nr="2" data-price="150" data-div="1/1"></div>
  </div>
  <div class="frame" data-name-nr="3">
    <div class="box fifty" data-name-nr="3" data-price="100" data-div="1/2"></div>
    <div class="box fifty" data-name-nr="3" data-price="200" data-div="2/2"></div>
  </div>
</div>
<button class="click" value="CLICK">
click
</button>