在 JavaScript 中計算陣列元素的出現次數

Habdul Hazeez 2023年10月12日
  1. 在 JavaScript 中計算陣列元素出現次數的基於物件的方法
  2. 在 JavaScript 中使用 array.prototype.reduce 計算陣列元素的出現次數
  3. 使用自定義函式計算 JavaScript 中陣列元素的出現次數
  4. 在 JavaScript 中使用 Lodash 計算陣列元素的出現次數
在 JavaScript 中計算陣列元素的出現次數

本教程將教你如何計算陣列中元素的出現次數。我們將向你展示如何使用 Objects、Array.prototype.reduce、自定義函式和 Lodash 來實現。

在 JavaScript 中計算陣列元素出現次數的基於物件的方法

你可以通過建立物件來計算元素陣列的出現次數。之後,使用 for...of 迴圈將陣列元素新增到物件中。

for...of 迴圈中,你檢查元素是否已經在物件中;如果是這樣,則將其值加一。否則,它是你新增到物件的新元素。

迴圈重複,直到將陣列的所有元素及其頻率新增到物件。這意味著物件中的屬性是陣列中的一個元素,它的值是它出現的次數。

因此,你可以使用 object[property] 檢查元素是否出現,其中 property 是新增到 object 的陣列元素。

結果將是它在陣列中的出現。

const myArray = [3, 2, 3, 3, 5, 6, 5, 5, 8, 4, 4, 7, 7, 7];
const counts = {};

for (const num of myArray) {
  counts[num] = counts[num] ? counts[num] + 1 : 1;
}

console.log(
    counts[2], counts[3], counts[4], counts[5], counts[6], counts[7],
    counts[8]);

輸出:

1 3 2 3 1 3 1

在 JavaScript 中使用 array.prototype.reduce 計算陣列元素的出現次數

Array.prototype.reduce 有兩個引數:一個回撥函式和一個初始值。將初始值設定為 Object 時,可以將該物件的屬性設定為陣列元素。

所以屬性值將是元素的出現次數。為此,回撥函式的第一次迭代將陣列元素新增為物件的屬性。

同時,它將它們的值設定為 1。

因此,後續迭代將檢查屬性值是否存在。如果為真,它將加一。

否則,它是一個新元素,將其值設定為 1。最後,該物件將包含元素陣列及其值作為鍵值對。

let myArray =
    [2, 2, 3, 5, 6, 2, 1, 1, 1, 4, 5,
     6].reduce(function(accumulator, currentValue) {
      return accumulator[currentValue] ? ++accumulator[currentValue] :
                                         accumulator[currentValue] = 1,
                                         accumulator
    }, {});
console.log(myArray);

輸出:

Object { 1: 3, 2: 3, 3: 1, 4: 1, 5: 2, 6: 2 }

使用自定義函式計算 JavaScript 中陣列元素的出現次數

你可以實現一個自定義函式,該函式將一個陣列作為引數並返回兩個陣列。第一個將包含你作為引數傳遞給函式的陣列的唯一元素。

而第二個將包含元素的出現次數。

這是計算陣列元素出現次數的函式演算法。

  1. 初始化兩個名為 AB 的空陣列。
  2. 設定一個變數以在遍歷陣列時跟蹤前一個元素。
  3. 克隆函式作為引數接收的陣列。
  4. 對克隆的陣列進行排序。
  5. 使用 for...of 迴圈遍歷克隆的陣列。
    5.1 如果陣列元素不等於前一個元素。
    5.1.1 將元素推入陣列 A
    5.1.2 將初始值 1 壓入陣列 B
    5.2 其他
    5.2.1 增加陣列 B 中的值。
    5.2.2 將前一個元素設定為當前元素。
  6. 返回陣列 A 和陣列 B

下面的程式碼是這個演算法的實現。

let mArray = [2, 3, 4, 1, 2, 2, 5, 3, 7, 8, 1, 1, 6];

function countOccurrences(array) {
  let arrayElements = [], occurrences = [], cloneOriginalArray = [...array],
      previousElement;

  // Sort the cloned array
  cloneOriginalArray.sort();
  for (let element of cloneOriginalArray) {
    if (element !== previousElement) {  // That means it's a new element
      arrayElements.push(element);      // push it into the array
      occurrences.push(1);  // push its occurence in the occurrence array
    } else
      ++occurrences[occurrences.length - 1];  // Not a new element, so increment
                                              // its occurrence
    previousElement = element;
  }

  return [arrayElements, occurrences];
}

const arrayAndItsOccurrences = countOccurrences(mArray);
console.log(
    '[' + arrayAndItsOccurrences[0] + ']',
    '[' + arrayAndItsOccurrences[1] + ']');

輸出:

[1,2,3,4,5,6,7,8] [3,3,2,1,1,1,1,1]

在 JavaScript 中使用 Lodash 計算陣列元素的出現次數

Lodash 有一個 .countBy 方法,它接受一個陣列並返回一個物件。此物件包含陣列中的元素及其作為鍵值對的值。

<body>
	<script
	src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
	integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"
	referrerpolicy="no-referrer"
	>
	</script>
	<script>
		let loArray = [2,2,3,3,1,1,5,3,4,4,8,3,2,9];
		let lodash = _;
		let occurrences = _.countBy(loArray);
		console.log(occurrences)
	</script>
</body>

輸出:

Object { 1: 2, 2: 3, 3: 4, 4: 2, 5: 1, 8: 1, 9: 1 }
作者: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

相關文章 - JavaScript Array