Javascript 防止未定义的数组项

我有两个简单的函数，当被调用时，它们要么向后移动一个条目，要么向前移动一个条目。但是，当您到达末尾并且所有条目都已显示时，还有一个“未定义”条目。有没有关于如何解决这个问题的建议

<?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>

var滑差=0；
var=；
var desc=；
变量名称=；
函数nextSlide（）{
if（幻灯片编号<幻灯片长度）{
幻灯片_no++；
document.getElementById（“display”）.src=幻灯片[幻灯片编号]；
document.getElementById（“func_slide_desc”）.innerHTML=desc[幻灯片编号]；
document.getElementById（“func_slide_name”）.innerHTML=名称[幻灯片编号]；
}
}
函数prevSlide（）{
如果（幻灯片编号>0）{
幻灯片_否--；
document.getElementById（“display”）.src=幻灯片[幻灯片编号]；
document.getElementById（“func_slide_desc”）.innerHTML=desc[幻灯片编号]；
document.getElementById（“func_slide_name”）.innerHTML=名称[幻灯片编号]；
}
}
函数goToSlide（id）{
幻灯片编号=id；
document.getElementById（“display”）.src=幻灯片[幻灯片编号]；
document.getElementById（“func_slide_desc”）.innerHTML=desc[幻灯片编号]；
document.getElementById（“func_slide_name”）.innerHTML=名称[幻灯片编号]；
document.getElementById（'slide_index'）。innerHTML=slide_no；
}

我想我需要写一行代码来检查是否已经到达数组的末尾。但是我不确定我应该怎么做。我尝试了以下几点：

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;
            }

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

函数nextSlide（）{
if（幻灯片编号<幻灯片长度）{
幻灯片_no++；
document.getElementById（“display”）.src=幻灯片[幻灯片编号]；
document.getElementById（“func_slide_desc”）.innerHTML=desc[幻灯片编号]；
document.getElementById（“func_slide_name”）.innerHTML=名称[幻灯片编号]；
} 
else if（幻灯片编号===幻灯片长度）{
打破
}

---

但是，当我尝试在第一个条目处停止时，nextSlide函数将不再工作

问题在于，要访问数组元素，索引必须介于0到数组长度-1之间

在nextSlide（）的第一个实现中，您可以执行以下操作：

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;
            }

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

函数nextSlide（）{
if（幻灯片编号<幻灯片长度）{
幻灯片_no++；

这意味着当slide_no等于length-1并且调用该函数时，if（）条件将为true，因为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];
    }
}

函数nextSlide（）{
如果（幻灯片编号<幻灯片长度-1）{
幻灯片_no++；
document.getElementById（“display”）.src=幻灯片[幻灯片编号]；
document.getElementById（“func_slide_desc”）.innerHTML=desc[幻灯片编号]；
document.getElementById（“func_slide_name”）.innerHTML=名称[幻灯片编号]；
}
}

删除

否则if

及其内部的所有内容，同时替换

幻灯片编号

至

幻灯片编号

或将行

幻灯片编号+

移至if块中命令的末尾

因此，它可以解决您的问题。问题在于在访问

幻灯片

阵列之前越来越多地提到

幻灯片

---

为了避免执行不需要在函数中执行的内容，只需简单地添加任何新代码（仅将代码添加到if body中）如果您需要停止函数的进一步执行，请将

return；

放在else语句中。

尝试删除

else if

语句及其内部的所有内容。也可以将

slide\u no

替换为

slide\u no

或在if块中的命令末尾增加slide\u no++。如果我删除

 否则，如果

语句，幻灯片可以正确地前后移动，但是问题是，在幻灯片放映结束时，我得到了一个未定义的条目，而我没有want@andriy我会试试的now@andriy它工作得很好，谢谢！你想添加答案吗？然后我可以将其标记为正确。它工作得很好，你可以修改a吗为了更好的可读性，请回答nswer。我几乎理解了所有内容，只需要更清晰一点！根据阿尔伯塔斯的评论，为清晰起见重新编写了解释。回答很好，解释得很完美！