javascript - 如何使用reduce() JavaScript 查找多个最大尺寸

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

让累加器是一个数组对象和当前最高值:

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);

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

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);