javascript - 防止未定义的数组条目

Question

我有 2 个简单的函数，当它们被调用时，要么向后移动一个条目，要么向后移动一个条目。然而，当您到达最后并且所有条目都已显示时，还有一个额外的“未定义”条目。有关如何解决此问题的任何建议？

<?php
$slide_img_array = array();
$slide_desc_array = array();
$slide_name_array = array();

while (!$sql_pres_select->eof()) {
    array_push($slide_img_array, $sql_pres_select->valueof('file_location'));
    array_push($slide_desc_array, $sql_pres_select->valueof('description'));
    array_push($slide_name_array, $sql_pres_select->valueof('slide_name'));
    $sql_pres_select->next();
}
?>
<script>

    var slide_no = 0;
    var slides = <?php echo json_encode($slide_img_array); ?>;
    var desc = <?php echo json_encode($slide_desc_array); ?>;
    var names = <?php echo json_encode($slide_name_array); ?>;

    function nextSlide() {
        if (slide_no < slides.length) {
            slide_no++;
            document.getElementById("display").src = slides[slide_no];
            document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
            document.getElementById("func_slide_name").innerHTML = names[slide_no];

        }

    }
    function prevSlide() {
        if (slide_no > 0) {
            slide_no--;
            document.getElementById("display").src = slides[slide_no];
            document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
            document.getElementById("func_slide_name").innerHTML = names[slide_no];
        }
    }

    function goToSlide(id) {
        slide_no = id;
        document.getElementById("display").src = slides[slide_no];
        document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
        document.getElementById("func_slide_name").innerHTML = names[slide_no];
        document.getElementById('slide_index').innerHTML = slide_no;

    }
</script>

我想我需要写一行来检查是否已经到达数组的末尾。但是我不确定我应该怎么做。我已尝试执行以下操作:

function nextSlide() {
            if (slide_no < slides.length) {
                slide_no++;
                document.getElementById("display").src = slides[slide_no];
                document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
                document.getElementById("func_slide_name").innerHTML = names[slide_no];  

            } 
            else if (slide_no===slides.length){
                break;
            }

但是当我尝试它只是在第一个条目处停止并且 nextSlide 函数将不再起作用

Answer 1

问题是要访问数组元素，您需要索引介于 0 到数组长度 - 1 之间。

在 nextSlide() 的第一个实现中，您执行以下操作:

function nextSlide() {
    if (slide_no < slides.length) {
        slide_no++;

这意味着当 slide_no 等于 length-1 并且您调用该函数时，if() 条件将为真，因为 slide_no 将小于 slides.length。然后你将 1 添加到 slide_no，这意味着 slide_no 现在等于 slides.length，并且你 1 超出了索引限制 - 这就是你得到未定义值的原因。我会这样重写它

function nextSlide() {
    if (slide_no < slides.length - 1) {
        slide_no++;
        document.getElementById("display").src = slides[slide_no];
        document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
        document.getElementById("func_slide_name").innerHTML = names[slide_no];
    }
}