大変だ！JavaScriptでspliceの罠にかかってしまった！

はじめに

お久しぶりです。業務が忙しかったりして、全然書けなかったです。
ネタがなかったわけではない

わなにかかってしまった！

trap.vue

<script>
    let arr = ['1', '2', '3', '4', '5']

    arr.forEach((num, i) => {
        if (num >= 3) {
            arr.splice(i, 1) //３以上のものを消すで
        }
    })
    console.log(arr)
</script>

(3)["1", "2", "4"]

なんでやねん！
って思ったら単純だった。
消したらlengthは1個減り、iは前に進み続ける。結果、ズレが生じる

わなから抜け出した！

out.vue

<script>
    let arr = ['1', '2', '3', '4', '5']
    let i = 0
    while (i <= arr.length-1) {
        const data = arr[i]
        if (data >= 3) {
            arr.splice(i, 1)
            i--
        }
        i++
    }
    console.log(arr)
</script>

(2)["1", "2"]

whileでループすれば簡単に解決した。
あとちょっとforEach嫌いになりました。

まとめ

他にやり方あるのなら是非教えてください！
また暇になったら書きます〜