一、首先不用 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>
