取余数%的使用记录

1.用数组的长度取余%,可以循环数组的下标

export default function InspirationGenerator({children}) {
  const [index, setIndex] = React.useState(0);
  const quote = quotes[index];
  const next = () => setIndex((index + 1) % quotes.length);

  return (
    <>
      <p>Your inspirational quote is:</p>
      <FancyText text={quote} />
      <button onClick={next}>Inspire me again</button>
      {children}
    </>
  );
}

一开始不太理解为什么可以实现数组下标的循环

循环数组下标的原理：

1. index 是当前显示的引言的索引值
2. quotes.length 是引言数组的总长度
3. % 是取余运算符，计算两个数相除后的余数

关键点在于取余运算的特性：

• 当 (index + 1) 小于 quotes.length 时，余数就是 (index + 1) 本身
• 当 (index + 1) 等于 quotes.length 时，余数为0（因为刚好整除）
• 这样就实现了循环效果

举个例子： 假设 quotes.length = 5（有5条引言）：

• 当前 index=0 → (0+1)%5=1 → 显示第2条
• index=1 → (1+1)%5=2 → 显示第3条
• ...
• index=4 → (4+1)%5=0 → 又回到第1条

这样就实现了点击按钮时循环显示所有引言的效果，当显示到最后一条时，下一次点击又会从第一条开始。