过滤器列表循环如何工作？

Question

我遵循了在线教程，使用香草JavaScript制作了可过滤列表，但是我对循环的工作原理感到困惑。我想知道是否有人可以逐行解释。很抱歉问这样一个基本问题。

<script type="text/javascript">

let filterInput = document.getElementById('filterInput');

filterInput.addEventListener('input', filterNames);

function filterNames() {
    let filterValue = document.getElementById('filterInput').value.toUpperCase();

    let ul = document.getElementById('names');

    let li = ul.querySelectorAll('li.collection-item');

    for (let i = 0; i < li.length; i++) {
        let a = li[i].getElementsByTagName('a')[0];

        if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
            li[i].style.display = '';
        } else {
            li[i].style.display = 'none';
        }
    }
}

</script>