用 vue3 中的 reduce（累加器） 随机生成100个字母，放入数组中，统计每个字母出现的次数

一、首先不用 reduce() 来实现

 代码如下：

<template lang="">
    <div>
        <h1>统计每个字母出现的次数，不使用reduce（累加器）</h1>
        <p><span>注意：</span> 亲，看控制台哦！</p>
    </div>
</template>
<script lang="ts">
import { reactive } from 'vue';

export default {
    setup() {
        // 生成随机数的封装好的方法
        function random(min:any, max:any) {
        return Math.floor(Math.random() * (max - min)) + min;
        }
        // 26个字母
        const abc = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        // 生成100个随机字母
        let abcbox:Array<string> = reactive([])
        function creabc(){
            for (let i = 0; i <= 99; i++) {
                // 添加随机字母进数组，随机数从第一个数开始，到最后一个数（26个字母）
                abcbox.push(abc[random(0,25)])
            }
            console.log(abcbox);
        }
        // 调用方法
        creabc()

////////////////////////////////////////////////////////////////////////////////////////////////////// 

        // 统计每一个字母的数量
        let coout1 = {}
        // for循环 原理实现
        function tongji () {
            for (let i = 0; i<abcbox.length;i++) { // 1.首先,循环100个字母，；比如随机之后的字母为a
                if(coout1[abcbox[i]] === undefined){ // 判断数量1的对象里面的属性如果为空的话 (首次出现的字母不是a话就为空)
                    coout1[abcbox[i]] = 1 // 就把a字母存进 coout1 的对象里面 数量 = 1
                } else {
                    coout1[abcbox[i]]++
                }
            }
            console.log(coout1);
        }
        // 调用方法
        tongji()

    }
}
</script>
<style scoped>
span{
    color: red;
    font-weight: bold;
}
</style>

二、用 reduce() 来实现

 代码如下：

<template lang="">
    <div>
        <h1>统计每个字母出现的次数，使用reduce（累加器）</h1>
        <p><span>注意：</span> 亲，看控制台哦！</p>
    </div>
</template>
<script lang="ts">
import { reactive } from 'vue';

export default {
    setup() {

        function random(min:any, max:any) {
        return Math.floor(Math.random() * (max - min)) + min;
        }
        const abc = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        // 生成100个随机字母
        let abcbox:Array<string> = reactive([])
        function creabc(){
            for (let i = 0; i <= 99; i++) {
                // 添加随机字母进数组
                abcbox.push(abc[random(0,25)])
            }
            console.log(abcbox);
        }
        creabc()

////////////////////////////////////////////////////////////////////////////////////////////////////// 

        // 统计每一个字母的数量
        let coout1 = null
        /**
         * 累加器原理：[{},1,2,4,34,3,34] (在前面定义一个空对象，第一次是1和空对象比，第二次是1和2比，第三次是2和4比)
        */
        function tongji () {
            // 传入的两个参数：第一个数据，下一个数据
             coout1 = abcbox.reduce(function(prev, next) {
                prev[next] = (prev[next] + 1) || 1;
                return prev;
            }, {});
            console.log(coout1);
        }
        tongji()
    }
}
</script>
<style scoped>
span{
    color: red;
    font-weight: bold;
}
</style>