Question

我正在尝试找到最大尺寸accSixe = acc.width * acc.height，这不是问题。诀窍是，如果有多个最大尺寸，我将如何获得它 - 非常重要 - 使用reduce()。我想了解reduce()的细节。有人帮忙吗？

    const boxarts = [
    { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
    { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
    { width: 400, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture400.jpg" },
    { width: 500, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture500.jpg" },
    { width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
    { width: 600, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture600-.jpg" },
    { width: 600, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture600+.jpg" },
    { width: 600, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture600.jpg" },
    { width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
]

        const newReduce = boxarts.reduce(function (acc, currentValue) {

            const accSixe = acc.width * acc.height
            const curSize = currentValue.width * currentValue.height

            if (accSixe > curSize) {
                return acc
            } else {
                return currentValue
            }
        }, [])


        console.log(JSON.stringify(newReduce, null, 2))

Answer 1

让累加器成为数组的对象和当前最高值：

＆＃13;

const boxarts=[{width:200,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"},{width:300,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg"},{width:400,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture400.jpg"},{width:500,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture500.jpg"},{width:150,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture150.jpg"},{width:600,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture600-.jpg"},{width:600,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture600+.jpg"},{width:600,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture600.jpg"},{width:425,height:150,url:"http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"}]

const { arr } = boxarts.reduce(({ highest = 0, arr = [] }, boxart) => {
  const { width, height } = boxart;
  const thisSize = width * height;
  if (thisSize > highest) return { highest: thisSize, arr: [boxart] };
  if (thisSize === highest) arr.push(boxart);
  return { highest, arr };
}, {});
console.log(arr);

＆＃13;

另一种选择是累加器是数组本身，但是你必须在每次迭代时提取和乘以记录宽度*高度：

＆＃13;

const boxarts=[{width:200,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"},{width:300,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg"},{width:400,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture400.jpg"},{width:500,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture500.jpg"},{width:150,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture150.jpg"},{width:600,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture600-.jpg"},{width:600,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture600+.jpg"},{width:600,height:200,url:"http://cdn-0.nflximg.com/images/2891/Fracture600.jpg"},{width:425,height:150,url:"http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"}]

const arr = boxarts.reduce((foundSoFar, boxart) => {
  const record = foundSoFar[0].width * foundSoFar[0].height;
  const { width, height } = boxart;
  const thisSize = width * height;
  if (thisSize > record) return [boxart]
  if (thisSize === record) foundSoFar.push(boxart);
  return foundSoFar;
}, [{ width: 0, height: 0 }]);
console.log(arr);

＆＃13;

Answer 2

恕我直言，这个问题不适合使用.reduce()。您可以非常直接地解决它，只需迭代项目并将当前最大的项目存储在数组中。

 let maxSize = 0;
 let biggest = [];
 boxarts.forEach(function(box) {
    if (box.width * box.height > maxSize) {
      maxSize = box.width * box.height;
      biggest = [box];
    } else if (box.width * box.height === maxSize) {
      biggest.push(box);
    }
 });

超级直接的阅读和推理。

如何使用reduce（）JavaScript找到多个最大尺寸

2 个答案: