有没有办法让这段代码更短？
所以我有一个评级系统，我已经制作了以下代码来显示要显示多少颗星，虽然它很长，所以我试图找出一种方法来让它更短。
我不知道是否有某种算法可以乘以然后添加空星之类的？
const rating = (recipe) => {
const value = (recipe.rating / recipe.votes.length).toFixed(1);
if (value >= 4.9)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStar />
<FaStar />
</>
);
if (value >= 4.5)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStar />
<FaStarHalfAlt />
</>
);
if (value >= 4)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStar />
<FaRegStar />
</>
);
if (value >= 3.5)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaStarHalfAlt />
<FaRegStar />
</>
);
if (value >= 3)
return (
<>
<FaStar />
<FaStar />
<FaStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 2.5)
return (
<>
<FaStar />
<FaStar />
<FaStarHalfAlt />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 2)
return (
<>
<FaStar />
<FaStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 1.5)
return (
<>
<FaStar />
<FaStarHalfAlt />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 1)
return (
<>
<FaStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
if (value >= 0.5)
return (
<>
<FaStarHalfAlt />
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
return (
<>
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
<FaRegStar />
</>
);
};
回答
如果你想真正缩短它：
const rating = (recipe) => {
const value = (recipe.rating / recipe.votes.length).toFixed(1);
const stars = Array.from(Array(5)).map(() => <FaRegStar/>);
if (value >= 4.9) {
return stars.map(() => <FaStar/>);
}
for (let i = 0; i < Math.round(value); i++) {
stars[i] = i > value - 1 ? <FaStarHalfAt/> : <FaStar/>;
}
return stars;
};
这会更容易理解（当评分 >= 4.9 时，这将显示 5 颗星）：
const rating = (recipe) => {
let value = (recipe.rating / recipe.votes.length).toFixed(1);
if (value >= 4.9) {
return Array.from(Array(5)).map(() => <FaStar/>);
}
const stars = [];
while (value >= 1) {
stars.push(<FaStar/>);
value--;
}
if (value >= 0.5) {
stars.push(<FaStarHalfAt/>);
}
while (stars.length < 5) {
stars.push(<FaRegStar/>);
}
return stars;
};
或者更短但仍然可以理解：
const rating = (recipe) => {
let value = (recipe.rating / recipe.votes.length).toFixed(1);
if (value >= 4.9) {
return Array.from(Array(5)).map(() => <FaStar/>);
}
const stars = [];
while (stars.length < 5) {
stars.push(value >= 1
? <FaStar/>
: value >= 0.5
? <FaStarHalfAt/>
: <FaRegStar/>);
value--;
}
return stars;
};