遍歷網格項時出現“減少沒有初始值的空數組”錯誤

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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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正在做什么：

第一次調用回調時， accumulator 和 currentValue 可以是兩個值之一。 如果在調用 reduce() 時提供了 initialValue，則 accumulator 將等於 initialValue，而 currentValue 將等於數組中的第一個值。 如果未提供 initialValue，則 accumulator 將等於數組中的第一個值，而 currentValue 將等於第二個值。

如果您提供一個沒有初始值的空數組，請說：

[].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");
      }
  });
}