如何在 JavaScript 中統計陣列中重複名稱出現的次數?


JavaScript 中的陣列是一組儲存在相鄰記憶體位置的相同型別元素,並且可以使用索引到特殊識別符號的索引分別引用每個元素。

讓我們考慮一個包含重複名稱出現的陣列。陣列如下所示:

var details = [
   {
      studentName: "John",
      studentAge: 23
   },
   {
      studentName: "David",
      studentAge: 24
   },
   {
      studentName: "David",
      studentAge: 20
   }
]

現在我們將計算陣列中重複名稱出現的次數。我們為此使用reduce()概念。結果如下:

John: 1
David: 2

讓我們深入瞭解本文,以瞭解更多關於如何在陣列中統計重複名稱出現次數的資訊。

使用 reduce()

reduce()方法傳入先前元素計算的返回值,並依次對陣列的每個元素執行使用者提供的“reducer”回撥函式。在整個陣列上執行 reducer 會產生一個單一的值作為最終結果。

語法

以下是reduce()的語法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

為了更好地理解如何在陣列中統計重複名稱出現的次數,讓我們看看以下示例。

示例

在下面的示例中,我們正在執行一個指令碼以及一個reduce()來列印重複名稱出現的次數。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var array = [10, 22, 10, 25, 10, 67, 10, 68];
         var search = 10;
         var count = array.reduce(function(n, val) {
            return n + (val === search);
         }, 0);
         document.write(count);
   </script>
   </body>
</html>

當指令碼執行時,它將在網頁上生成一個包含數字“4”的輸出,這是指令碼中用於計數的值出現的次數。

示例

執行以下操作以檢視如何在獲取重複名稱出現次數的計數中使用reduce()

<!DOCTYPE html>
<html>
   <body>
      <script>
         var details = [{
            studentName: "John",
            studentAge: 23
         }, {
            studentName: "David",
            studentAge: 24
         }, {
            studentName: "John",
            studentAge: 21
         }, {
            studentName: "John",
            studentAge: 25
         }, {
            studentName: "Bob",
            studentAge: 22
         }, {
            studentName: "David",
            studentAge: 20
         }]
         var output = Object.values(details.reduce((obj, {
            studentName
         }) => {
            if (obj[studentName] === undefined) obj[studentName] = {
            studentName: studentName,
            occurrences: 1
            };
            else obj[studentName].occurrences++;
            return obj;
         }, {}));
         document.write(JSON.stringify(output));
      </script>
   </body>
</html>

執行上述指令碼後,輸出視窗將彈出,顯示由執行指令碼觸發的事件導致的名稱出現次數的計數。

讓我們再看幾個例子。

示例

考慮以下示例,這裡我們宣告一個儲存空物件的變數,並啟動一個迴圈來迭代陣列並列印輸出。

<!DOCTYPE html>
<html>
   <body>
      <script>
         const array = ['ab', 'bc', 'ab', 'bc', 'cb'];
         const count = {};
         for (const element of array) {
            if (count[element]) {
               count[element] += 1;
            } else {
            count[element] = 1;
            }
         }
         document.write(JSON.stringify(count));
      </script>
   </body>
</html>

當指令碼執行時,事件被觸發並提供重複元素出現的次數以及網頁上的陣列。

示例

讓我們看看下面的例子,這裡我們使用 foreach 迭代陣列並將出現次數儲存在另一個變數中。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var array = [{
            "car": "rx100",
            "color": "black"
         }, {
            "car": "bmw",
            "color": "grey"
         }, {
            "car": "rx100",
            "color": "black"
         }, ];
         let b = {};
         array.forEach(element => {
            b[element.car] = (b[element.car] || 0) + 1;
         })
         document.write(JSON.stringify(b));
      </script>
   </body>
</html>

執行上述指令碼後,事件被觸發並在網頁上顯示陣列及其出現次數。

更新於: 2023年4月21日

1K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告