如何在 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>
執行上述指令碼後,事件被觸發並在網頁上顯示陣列及其出現次數。
廣告