前言

在前端面試題中，關於Javascript的部分是至關重要的，最近的一系列文章都是Javascript面試題相關的，大家可以自己實現一下，我也將題目和答案開源了，感興趣的可以自取。

Javascript

題目

今天這篇文章裡的題目是這樣的，如何找出一個數組中出現次數最多是元素？例如給定一個數組

[3, 5, 6, 5, 9, 8, 10, 5, 7]

其中5出現的次數最多，結果返回5，而且其出現次數為3。接下來我們就一起來看看這道題目的幾種實現方式。

以下是github地址，大家可以直接去看源碼。

https://github.com/zhouxiongking/article-pages/blob/master/articles/maxFrequencyNum/maxFrequencyNum.js

方法1

實現方法1的主要思想是利用鍵值對存儲，我們可以分解為兩個步驟。

1. 定義一個對象，在遍歷數組的時候，將數組元素作為對象的鍵，將出現的次數作為值

2. 獲取鍵值對後進行遍歷，獲取值最大的那個元素，返回後即可得到結果。

通過以上的思想，我們可以得到以下實現代碼。

方法1

因為方法1會首先對數組進行遍歷，然後對對象進行遍歷，在實現效率上比較低下，不推薦使用。

方法2

實現方法2的主要思想同方法1，不過是方法1的優化，將方法1中的兩次遍歷縮減為一次遍歷，將值的判斷放在同一個遍歷中。

得到的優化代碼如下。

方法2

方法3

方法3的主要思想是藉助數組Array的reduce方法。

首先我們來看看reduce方法的使用方法，它的語法如下。

arr.reduce([callback, initialValue])

reduce方法接收的第一個參數為函數，操作數組中的每個元素。該函數接收4個參數，每個參數的含義如下。

1. 第一個參數表示上一次執行結果的回調，或者第二個參數提供的初始值

2. 當前處理的元素值

3. 當前處理元素的索引

4. 處理的數組

reduce方法接收的第二個參數為提供處理元素的初始值，與上面的第一個參數有關。

在瞭解reduce方法後，我們可以直接看看下面的代碼。

方法3

其中reduce接收一個{}表示的初始值，p的初始值就是這個{}，k就是每次執行的數組元素。在每次執行完後與maxNum進行比較，動態更新maxNum與maxEle值，最後獲得返回的結果。

方法4

方法4的主要思想是藉助於字符串的replace方法，因此方法4主要適用於字符數組的運算。

首先將數組轉化為字符串，然後通過字符串的replace方法，接收處理函數，其他的原理與方法3一樣。

方法4

對於以上的每個方法，我都進行了測試，根據返回的結果來看都驗證了方法的正確性。

方法5

方法5其實是利用ES6語法以及逗號運算符進行的代碼優化，這個方法看起來代碼量很少，但是理解起來卻需要花費一定的功夫。建議先學習下ES6函數語法以及逗號運算符的相關知識。

方法5

結束語

今天這篇文章主要講解了，關於數組中如何找出頻率最大的元素以及出現的次數的幾種方法，對你有幫助嗎？