JS函数解题和Markdown流程图相遇

有一个数组，存放了一些数字，找出出现频率最高的数字

var arr = [2, 3, 3, 4, 3, 4, 3, 2];
var circleNum = 2;
maxNum = arr[0];
for (var i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) === i && arr.indexOf(arr[i]) !== arr.lastIndexOf(arr[i])) {
        var num = 1;
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[j] === arr[i]) {
                num++;
            }
        }
        console.log(arr[i] + "出现" + num);
        if (maxNum < num) {
            maxNum = arr[i];
            circleNum = num;
        }
    }
}
console.log(`数组中出现频率最多的数是${maxNum}出现了${circleNum}次 `);

我解题的时候，没有用流程图，首先在脑海里，有一个模糊的轮廓，我用什么原理来解这道题，然后就是在电脑上试着写，在原理下，实现几次循环。写的时候，写好一段，一运行，竟然出现了死循环，（写错了），然后改过来。打印语句放的位置，也是调了好几次，（和预想的打印不一致，就返回去看再捋捋思路，重新放个位置，放在if语句里，放在第一层for循环里，还是放在放到for循环外面），最后才输出了想要的结果。
复盘的时候我想看看流程图怎么写，（看看用流程图解题思路会更清晰）。

流程图是个花架子，我用着不太习惯。

利用对象属性名的唯一性来解这道题：

  var arr = [2, 3, 3, 4, 3, 4, 3, 2];
        var obj = {};
        var maxItem, maxFrequecy = 1;
        for (var i = 0; i < arr.length; i++) {
            if (!obj[arr[i]]) {
                obj[arr[i]] = 1
            } else {   obj[arr[i]]++;     }

            if (obj[arr[i]] > maxFrequecy) {
                maxFrequecy = obj[arr[i]];
                maxItem = arr[i];
            }
        }
        console.log(obj);
        console.log(`出现频率最高的数是${maxItem},出现了 ${maxFrequecy}次`);
        

先声明一个空对象做为辅助，循环数组每一项。第一次出现的项将数组项设为空对象的属性，直接赋值为1，就添加了对象一个属性。第二次相同值的数组项出现，属性名已经被命名，将该属性的值加一，完成计数功能。
求最大频率，和数组项里出现频率最大项，开始，我把变量（ var maxItem, maxFrequecy = 1;）初始值放到了里面。得不出结果，试错，把它调到外面才得出结果。也理解了原因，在循环的里面的话，下一个循环会初始化，就覆盖了最值的储存了。
得到出现频率最多的项是那一项，是由出现频率最多，所对应的i值由arr[i]得到了。

提前把标题写好了，想着，流程图帮着理解解题，后来发现自己用不来，也不知道是不是真的不适合这样的流程图分析，先记录一下这个题的学习过程吧。