在 JavaScript 中计算数组元素的出现次数

Habdul Hazeez 2023年1月30日 2022年5月10日
  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 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