js中获取数组中的值出现的次数

在日常开发中有时候会遇到获取数组中每一项值出现的次数需求，那么我们可以使用下面的几个方法。

方法一

思路

利用对象存储数组每一项的值为key，然后判断是否已经存在对象中。

步骤

1、 先创建一个空的Object
2、 然后循环目标数组的每一项
3、 将目标数组循环的项作为空对象的key，判断key对应的值是否存在
4、 不存在就添加当前项为对象的key并把值设置为1（也就是第一次出现）
5、 如果已经存在的话，则把当前的值+1即可。
代码如下

let arr1 = [1,2,2,3,3,3,'a','b','b','c','c','c'];

function getArrItemNum(arr) {
    let obj = {};
    arr.forEach(element => {
        if (obj[element]) {
            obj[element]++;
        } else {
            obj[element] = 1;
        }
    });
    return obj;
}
console.log(getArrItemNum(arr1)); // { '1': 1, '2': 2, '3': 3, a: 1, b: 2, c: 3 }

注意: 上述方法是使用对象的key来进行判断的，因为对象的key会自动转换为字符串类型，所以在判断 字符数字和 数值数字的时候会有问题。(可以采用方法二进行获取)

方法二

思路

利用es6中Map类型，它的key可以为任意数据类型，然后判断是否已经存在Map中。

步骤

1、 先创建一个空Map
2、 循环目标数组的每一项
3、 将数组循环的项作为空Map的key，获取M对应的值
4、 如果已经有值就把对应的值+1后从新赋值
5、 如果没有值就创建新的数据项，设置值为1
代码如下:

let arr1 = [1,2,2,3,3,3,'a','b','b','c','c','c', '1', '1', '2'];

function getArrItemNum(arr) {
    let mapObj = new Map();
    arr.forEach(element => {
        let num = mapObj.get(element);
        if (num) {
            mapObj.set(element, ++num); 
        } else {
            mapObj.set(element, 1); 
        }
    });
    return mapObj;
}
console.log(getArrItemNum(arr1)); //
// Map(8) {
//     1 => 1,
//     2 => 2,
//     3 => 3,
//     'a' => 1,
//     'b' => 2,
//     'c' => 3,
//     '1' => 2,
//     '2' => 1
//   }

方法三

思路

利用数组对象类型组合，每一项将数组的值为数组对象对应的key，num为出现的数量。

步骤

1、 创建一个新数组
2、 将目标数组使用sort（）方法排序
3、 循环目标数组的每一项
4、 判断目标数组当前项和上一项是否相等
5、 相等的话，就把创建的数组对象最后一项的num的值+1
6、 不相等的话，就往创建的数组对象中push一个新的数据（新数据key的值是目标数组的当前项，num值为1）
代码如下:

let arr1 = [1,2,2,3,3,3,'a','b','b','c','c','c', '1', '1', '2'];

function getArrItemNum(arr) {
    let ArrObj = [];
    arr.sort();
    arr.forEach((element, index) => {
        if (element === arr[index - 1]) {
            ArrObj[ArrObj.length - 1].num++;
        } else {
            ArrObj.push({
                key: element,
                num: 1
            });
        }
    });
    return ArrObj;
}
console.log(getArrItemNum(arr1)); // 
// [
//     { key: 1, num: 1 },
//     { key: '1', num: 2 },
//     { key: 2, num: 2 },
//     { key: '2', num: 1 },
//     { key: 3, num: 3 },
//     { key: 'a', num: 1 },
//     { key: 'b', num: 2 },
//     { key: 'c', num: 3 }
// ]

如果想要获取目标数组出现次数进行排序，将上述代码稍微扩展一下即可。如：

let arr1 = [1,2,2,3,3,3,'a','b','b','c','c','c', '1', '1', '2'];

function getArrItemNum(arr) {
    let ArrObj = [];
    arr.sort();
    arr.forEach((element, index) => {
        if (element === arr[index - 1]) {
            ArrObj[ArrObj.length - 1].num++;
        } else {
            ArrObj.push({
                key: element,
                num: 1
            });
        }
    });
    return ArrObj.sort((item1, item2) =>  item2.num - item1.num);
}
console.log(getArrItemNum(arr1)); // 
// [
//     { key: 3, num: 3 },
//     { key: 'c', num: 3 },
//     { key: '1', num: 2 },
//     { key: 2, num: 2 },
//     { key: 'b', num: 2 },
//     { key: 1, num: 1 },
//     { key: '2', num: 1 },
//     { key: 'a', num: 1 }
// ]