計算 JavaScript 數組中元素出現的次數
簡介
在 JavaScript 中處理數組時，我們經常會遇到需要計算特定元素在該數組中出現的次數的情況——該元素可以是字符串、對象、數字，甚至是布爾值。
如何使用循環計算元素出現次數
for loop 是遍歷數組的標準方法之一。它允許我們遍歷數組的每個元素並將其與我們正在尋找的元素進行比較。這樣，我們可以計算該元素在數組中出現的次數。我們還可以使用它來計算數組中所有元素的出現次數，但我們將在本文後面介紹這種情況。現在，假設我們要查找特定元素的出現次數。
最佳解決方案：for-of 循環
顯然，JavaScript 有一個內置的 for 我們可以使用循環，但是，為了讓事情更容易一些，我們可以使用它的修改 - for-of 環形。這樣，我們就可以訪問元素本身的值，而不是通過數組中的索引來訪問每個元素。
注意： JavaScript ES2015 引入了 for-of 環形。它是 array.forEach() 的替代品 方法，以前用於迭代數組的每個元素並對每個元素應用一些更改。 for-of 的主要區別 和 forEach() 是第一個兼容async 功能。在本文中，我們選擇主要使用 for-of 循環而不是 forEach() 方法只是為了在異步場景中安全，但如果您不介意，請隨意使用 forEach() 而是！
首先，我們來看看特定元素出現了多少次 在一個數組中。為此，我們需要設置 counter 變量為 0 ，然後循環遍歷數組並增加 counter 每次我們找到我們正在尋找的元素時加一。當我們遍歷整個數組時，counter 將存儲我們正在搜索的元素的出現次數：
const allStudentsAge = [19, 22, 18, 19, 16, 18, 19, 21, 24];
let target = 19;
let counter = 0;
for (studentAge of allStudentsAge) {
if (studentAge == target) {
counter++;
}
};
console.log(counter); // 3
我們有數組數組的情況 有點複雜。在這種情況下，我們首先必須將數組展平，以便使用 flat() 將所有元素放入一個數組中 方法：
const allStudentsAge = [
[1, 19],
[3, 4],
[5, 19],
[7, 8, 19],
[10, 11, 12, 13, 14, 15],
[19, 22, 18, 19, 16, 18, 19, 21, 24]
];
let target = 19;
let counter = 0;
for (studentAge of allStudentsAge.flat()) {
if (studentAge == target) {
counter++;
}
};
console.log(counter); // 6
這也適用於具有不同數據類型的元素的數組 .讓我們創建一個具有各種數據類型的示例數組，並檢查我們是否可以計算某個元素的出現次數：
const myArray = [false, 24, "English", false, "english", 22, 19, false, "English", 19];
現在，我們可以創建一個可重用的函數來計算給定數組中給定元素的出現次數：
const checkOccurrence = (array, element) => {
let counter = 0;
for (item of array.flat()) {
if (item == element) {
counter++;
}
};
console.log(counter);
};
讓我們檢查一下我們創建的函數是否真的有效：
checkOccurrence(myArray, false); // 3
checkOccurrence(myArray, 19); // 2
checkOccurrence(myArray, "english"); // 1
我們已經驗證了元素 false 的三個實例 和元素 19 的兩個實例 ，這是正確的，但是為什麼元素 "english" 只出現了一次 而不是三個？這是由於區分大小寫 在我們創建的函數中 - 解決這個問題的最好方法是在計算之前將所有字符串元素轉換為大寫（或小寫）：
const checkOccurrence = (array, element) => {
let counter = 0;
for (item of array.flat()) {
if (typeof item === "string") {
let newItem = item.toLowerCase();
if (newItem == element) {
counter++;
}
} else {
if (item == element) {
counter++;
}
}
};
console.log(counter);
};
當我們現在計算元素 "english" 的出現次數時 , checkOccurrence() 函數返回 3 因為它不再區分大小寫：
checkOccurrence(myArray, "english"); // 3
替代#1：for 循環
如果由於某種原因需要訪問數組中每個元素的索引，也可以使用基本的for 循環而不是 for-of ：
const checkOccurrence = (array, element) => {
let counter = 0;
for (let i = 0; i <= array.length; i++) {
if (array[i] == element) {
counter++;
}
}
console.log(counter);
};
我們可以檢查這給我們的結果是否與使用 for-of 創建的相同函數相同 循環：
checkOccurrence(myArray, false); // 3
checkOccurrence(myArray, 19); // 2
checkOccurrence(myArray, "english"); // 1
備選方案#2：forEach() 方法
另一種可行的替代方法是使用 forEach() 遍歷數組所有元素的方法：
const checkOccurrence = (array, element) => {
let counter = 0;
array.forEach()for (let i = 0; i <= array.length; i++) {
if (array[i] == element) {
counter++;
}
}
console.log(counter);
};
這將產生與之前的函數相同的結果，但再次強調，在使用 forEach() 時要小心 異步環境中的方法：
checkOccurrence(myArray, false); // 3
checkOccurrence(myArray, 19); // 2
checkOccurrence(myArray, "english"); // 1
檢查所有元素的出現次數
到目前為止，我們已經了解瞭如何計算特定元素的出現次數 .現在，讓我們看看如何計算所有元素的出現次數 並將元素和出現次數作為對象返回。
首先，我們將創建一個空對象來存儲每個數組元素作為鍵和出現次數作為值。然後我們將使用 for-of 循環遍歷數組 循環，並且在每次迭代中，如果特定元素已經存在於對像中，我們將增加它的計數，或者將計數設置為 1 否則：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
const myArray = [false, 24, "English", false, "english", 22, 19, false, "English", 19];
let counter = {};
for (element of myArray.flat()) {
if (counter[element]) {
counter[element] += 1;
} else {
counter[element] = 1;
}
};
console.log(counter);
前面的代碼會輸出包含myArray中每個元素出現次數的對象 ：
{
"19": 2,
"22": 1,
"24": 1,
"English": 2,
"english": 1,
"false": 3
}
假設我們仍然想避免區分大小寫 ，我們可以這樣做：
const myArray = [false, 24, "English", false, "english", 22, 19, false, "English", 19];
let counter = {};
for (element of myArray.flat()) {
if (typeof element === "string") {
let newItem = element.toLowerCase();
if (counter[newItem]) {
counter[newItem] += 1;
} else {
counter[newItem] = 1;
}
} else {
if (counter[element]) {
counter[element] += 1;
} else {
counter[element] = 1;
}
}
});
console.log(counter);
這將輸出以下對象：
{
"19": 2,
"22": 1,
"24": 1,
"false": 3,
"english": 3
}
如何使用 reduce() 計算元素出現次數
reduce() 是一種強大的方法，可用於輕鬆獲取數組中每個元素的出現次數，只需幾行代碼 .它接受一個回調函數和一個初始值，這對我們來說是一個空對象，以便我們以後可以填充它：
const myArray = [false, 24, "English", false, "english", 22, 19, false, "English", 19];
let countObject = myArray.reduce(function (
count,
currentValue
) {
return (
count[currentValue] ? ++count[currentValue] : (count[currentValue] = 1),
count
);
},
{});
console.log(countObject);
這將輸出一個包含元素作為鍵和出現次數作為值的對象：
{
"19": 2,
"22": 1,
"24": 1,
"false": 3,
"English": 2,
"english": 1
}
如何使用 filter 計算元素出現次數 () 方法
在上一節中，我們看到瞭如何使用循環和 reduce() 方法適用於我們可能想要計算 JavaScript 數組中元素出現次數的各種情況。除了循環和 reduce() ，我們也可以使用其他方法，比如filter() , 來確定數組中特定元素的出現次數。
為此，我們將過濾它，然後它會根據條件填充一個數組，我們將使用 length 從中獲取長度 屬性：
const myArray = [false, 24, "English", false, "english", 22, 19, false, "English", 19];
const itemCounter = (array, item) => {
return array.filter((currentItem) => currentItem == item).length;
};
console.log(itemCounter(myArray, 19)); // 2
使用 Lodash 計算元素出現次數
最好不要僅僅為了計算數組中的元素而安裝額外的包，但如果我們已經在使用 Lodash 我們項目中的庫，使用它來計算元素沒有害處。 .countBy() Lodash 中的方法接受一個數組並返回一個對象。此對象包含元素及其作為鍵值對的計數：
const myArray = [false, 24, "English", false, "english", 22, 19, false, "English", 19];
let lodash = _;
let elementOccurrences = _.countBy(myArray);
console.log(elementOccurrences);
這會給我們一個對象：
{
"19": 2,
"22": 1,
"24": 1,
"false": 3,
"English": 2,
"english": 1
}
結論
如果您需要計算數組中元素的出現次數，最好的選擇可能是使用 for-of 循環如本文所示。它是 async 安全，但仍然是迭代整個數組併計算所需元素的一種非常簡單的方法。我們還研究了其他替代方法 - 基本 for 循環，forEach() , 和 filter() 方法。
如果您需要查看數組中每個元素的出現次數，我們也為您提供了幫助 - 您可以再次使用 for-of 環形。此外，您可以使用 reduce() 方法，或 Lodash 圖書館。
