javascript - 遍历网格项时出现 "Reduce of empty array with no initial value"错误

Question

我有这个小脚本，它的作用是通过将类 last-row 添加到放置在最后一行的网格项来帮助响应式网格布局:

function addLastRowClass() {
  $(".blocks_section").each(function() {
    var $grid_item = $(this).find(".news_box");
    var maxTop = $grid_item.removeClass("last-row").map(function() {
      var $item = $(this)
      return $item.position().top;
    }).get().reduce((acc, curr) => (curr > acc) ? curr : acc)

    $grid_item.filter(function() {
      var $item = $(this)
      return $item.position().top == maxTop;
    }).addClass("last-row");
  });
}

addLastRowClass();
$(window).resize(addLastRowClass);

.blocks_section {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
}

.blocks_section .news_box {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin-bottom: 15px;
}

.blocks_section .news_box .content {
  border: 1px solid #d5d5d5;
  flex-grow: 1;
}

.blocks_section .news_box .title {
  padding: 8px 8px 0 8px;
}

.blocks_section .text {
  padding: 8px;
}

.blocks_section .title {
  font-size: 1.25rem;
  margin-bottom: 8px;
  text-transform: capitalize;
}

.blocks_section .text {
  margin-bottom: 8px;
  text-align: justify;
}

.blocks_section .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .container {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .blocks_section .news_box {
    padding-left: 5px;
    padding-right: 5px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<h1 chass="h3">Lorem ipsum dolor</h1>
<div class="blocks_section">
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/ZeOrf.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/TICOa.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/ZeOrf.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/TICOa.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
</div>

<h1 chass="h3">Praesentium, provident</h1>
<div class="blocks_section">
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/ZeOrf.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/TICOa.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/ZeOrf.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
  <div class="news_box col-xs-12 col-sm-6 col-md-4">
    <div class="content">
      <div class="thumbnail"><img src="/image/TICOa.jpg"></div>
      <h2 class="title">Lorem ipsum dolor</h2>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem inventore eos in voluptas ab, aut pariatur, dolores atque neque consequuntur.</p>
    </div>
  </div>
</div>

它具有简单明了的逻辑并且可以正常工作，但是在具有多个响应式网格的复杂页面上，控制台会出现错误:Reduce of empty array with no initial value，使第二个(第三个等)网格没有此功能。

问题:

• 错误的原因是什么？
• 问题的解决方案是什么？

Answer 1

要了解发生了什么，您必须想知道什么是 reduce做:

The first time the callback is called, accumulator and currentValue can be one of two values. If initialValue is provided in the call to reduce(), then accumulator will be equal to initialValue, and currentValue will be equal to the first value in the array. If no initialValue is provided, then accumulator will be equal to the first value in the array, and currentValue will be equal to the second.

如果您提供一个没有初始值的空数组，请说:

[].reduce(() => {})

那么它就没有意义了，因为你既不能访问数组的第一个元素，也不能使用初始值。您所要做的就是提供一个初始值:

myArray.reduce(() => {}, [])

由于您的 reduce 函数使用的是数字，而您想要找到它们的最大值，您可以使用 -Infinity作为初始值:

myArray.reduce((acc, curr) => Math.max(acc, curr), -Infinity)

因此，对于您的用例:

function addLastRowClass() {
  $(".blocks_section").each(function() {
      var $grid_item = $(this).find(".news_box");
      var maxTop = $grid_item.removeClass("last-row").map(function() {
          var $item = $(this)
          return $item.position().top;
      }).get().reduce((acc, curr) => (curr > acc) ? curr : acc, -Infinity) //<--- Initial value provided here

      $grid_item.filter(function() {
          var $item = $(this)
          return $item.position().top == maxTop;
      }).addClass("last-row");
  });
}

附带说明一下，如果您可以使用数组解构，您可以简单地执行以下操作:

function addLastRowClass() {
  $(".blocks_section").each(function() {
      var $grid_item = $(this).find(".news_box");
      var topPositions = $grid_item
          .removeClass("last-row")
          .map((i, el) => $(el).position().top)
          .get();
      var max_top = Math.max(...topPositions); // <-- Here
      $grid_item
          .filter((i, el) => $(el).position().top == maxTop)
          .addClass("last-row");
  });
}

编辑

刚刚注意到您在那里尝试做什么。只有当网格中没有元素时才会出现您的问题，但在这种情况下您无事可做，所以另一种方法是在处理之前检查元素长度:

function addLastRowClass() {
  $(".blocks_section").each(function() {
      var $grid_item = $(this).find(".news_box");
      if($grid_item.length) {
          var maxTop = $grid_item.removeClass("last-row").map(function() {
              var $item = $(this)
              return $item.position().top;
          }).get().reduce((acc, curr) => (curr > acc) ? curr : acc)

          $grid_item.filter(function() {
              var $item = $(this)
              return $item.position().top == maxTop;
          }).addClass("last-row");
      }
  });
}