剰余演算(モジュロ演算)を用いた配列やリストなどの循環

なんとなく使っていたけど、こういう考え方やその応用は得意じゃないのでメモしとく。

配列やリストなどのインデックス番号を指定した時に、配列のサイズを超える大きな整数を指定されても、再び0に戻り、配列を循環するように番号を取得できる。

// 最大数
const maxLength = 5;

// 常に 0〜4 の範囲に収まる数字を返す
function getSlideIndex(num) {
    const idx = num % maxLength;
    return idx < 0 ? idx + maxLength : idx; // 負の整数を渡されても循環する数値を返す
}

console.log(getSlideIndex(-2)); // 3
console.log(getSlideIndex(-1)); // 4
console.log(getSlideIndex(0)); // 0
console.log(getSlideIndex(1)); // 1
console.log(getSlideIndex(2)); // 2
console.log(getSlideIndex(3)); // 3
console.log(getSlideIndex(4)); // 4
console.log(getSlideIndex(5)); // 0
console.log(getSlideIndex(6)); // 1

スライドショーやカルーセルなどでよく使用される。

負の整数に対応する部分は、Array.prototype.at() を使えば必要ないかな。

at() は Array インスタンスのメソッドで、整数値を受け取り、その位置にある項目を返します。正の整数値と負の整数値が使用できます。負の整数は、配列の最後の項目から前へ数えます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/at
ページの先頭へ