在 JavaScript 中传递参数的问题答案

【问题标题】：Problem with passing a parameter in JavaScript在 JavaScript 中传递参数的问题
【发布时间】：2021-06-02 12:30:04
【问题描述】：

我有一个带有幻灯片画廊的整页灯箱，我正在尝试重构我的代码，这样我就不必使用全局变量了。我正在将一个变量作为参数从一个函数传递到另一个函数。当我打开灯箱库时，一切正常：看到正确的图像并显示计数器中的数字。当我想切换到下一个或上一个图像时，问题就开始了。我无法访问存储或存储灯箱打开时看到的当前图像的变量。我发布了没有变量声明的简化代码。

// This is a function which opens the lightbox with the galery after clicking on a thumbnail image.
function openSlideshowLightbox (event, currentSlide) {
  for (const [currentThumbnailImg] of thumbnailImgs.entries()) {
    if (event.target === thumbnailImgs[currentThumbnailImg]) {
      showCurrentSlide(currentSlide = currentThumbnailImg) 
    }
  }
} 

// This function shows the current slide containing an image
function showCurrentSlide (currentSlide) {
  for (const slide of slides) {
    if (slide.classList.contains('slide_visible')) {
      slide.classList.remove('slide_visible')
      slide.classList.add('slide_hidden')
    } else {
      slide.classList.add('slide_hidden')
    }
  }
  slides[currentSlide].classList.remove('slide_hidden')
  slides[currentSlide].classList.add('slide_visible')
}

以上都是一个动作，灯箱打开，功能完成任务。

现在我想切换到下一张或上一张图片，但我无法再访问下面函数中需要的currentSlide 变量。

function navigateSlideshowLightbox (event, currentSlide) {
  if (previousImgIconClicked) {
    currentSlide = (currentSlide - 1 + allSlides) % allSlides
    showCurrentSlide(currentSlide)
  } else if (nextImgIconClicked) {
    currentSlide = (currentSlide + 1) % allSlides
    showCurrentSlide(currentSlide)
  }
}

我尝试在showCurrentSlide() 中使用return 语句：

return currentSlide

然后在navigateSlideshowLightbox():

currentSlide = showCurrentSlide()

但currentSlide 是undefiend。

【问题讨论】：

请注意，由于您在函数中将currentSlide 声明为参数，因此您命名为currentSlide 的任何全局变量都不会在这些函数中被识别，设置currentSlide 也不会产生任何影响在全局变量上。

标签： javascript parameter-passing

【解决方案1】：

如果您不将参数传递给showCurrentSlide() 函数，currentSlide = showCurrentSlide() 将始终返回undefined，即使您添加了return 语句。您需要在那里传递一个参数，例如currentSlide = showCurrentSlide(theSlide)。或者您可以执行以下操作作为快速简便的解决方案。

在以下函数中，由于您已经在使用slides 对象，只需将当前幻灯片添加到最后的slides 对象中，以备后用：

function showCurrentSlide (currentSlide) {
    for (const slide of slides) {
        if (slide.classList.contains('slide_visible')) {
            slide.classList.remove('slide_visible')
            slide.classList.add('slide_hidden')
        } else {
            slide.classList.add('slide_hidden')
        }
    }
    slides[currentSlide].classList.remove('slide_hidden')
    slides[currentSlide].classList.add('slide_visible')
    slides.lastActiveSlide = currentSlide // Adding it here
}

然后，当您运行 navigateSlideshowLightbox() 函数时，您可以直接访问该对象属性，而不是依赖参数。

function navigateSlideshowLightbox (event) {
    if (previousImgIconClicked) {
        const currentSlide = (slides.lastActiveSlide - 1 + allSlides) % allSlides
        showCurrentSlide(currentSlide)
    } else if (nextImgIconClicked) {
        const currentSlide = (slides.lastActiveSlide + 1) % allSlides
        showCurrentSlide(currentSlide)
    }
}

【讨论】：

你不能重新声明一个常量。
哦，是的，当然。我在函数顶部用let 声明了currentSlide，然后根据条件重新声明它。无论如何，感谢您的帮助。

【解决方案2】：

（这实际上应该是一个评论，但那里的问题空间不足）

语句currentSlide = showCurrentSlide() 可能什么都不做，因为showCurrentSlide() 不返回值。返回值：

function showCurrentSlide (currentSlide) {
  for (const slide of slides) {
    if (slide.classList.contains('slide_visible')) {
      slide.classList.remove('slide_visible')
      slide.classList.add('slide_hidden')
    } else {
      slide.classList.add('slide_hidden')
    }
  }
  slides[currentSlide].classList.remove('slide_hidden')
  slides[currentSlide].classList.add('slide_visible')
  
  return currentSlide;
}

你的函数navigateSlideshowLightbox()也应该return currentSlide，因为它正在修改它，对吗？
您的书面描述说您尝试使用 return 但它不起作用 - 发布您的代码，而不是您希望它工作的代码。

另一个好奇心：

showCurrentSlide(currentSlide = currentThumbnailImg)

我宁愿把它写成两行。

currentSlide = currentThumbnailImg;
showCurrentSlide(currentSlide);

在您当前的代码中，您不需要结果，为什么不直接提供该值？

showCurrentSlide(currentThumbnailImg);

【讨论】：

是的，我认为最好像你建议的那样在两行单独写currentSlide = currentThumbnailImg; showCurrentSlide(currentSlide); 我不需要currentSlide 作为openSlideshowLightbox() 中的参数，可以简单地声明它let currentSlide。

【解决方案3】：

真的不需要使用参数。由于navigateSlideshowLightbox() 执行与openSlideshowLightbox() 不同的任务，我遍历navigateSlideshowLightbox() 中的所有幻灯片，并通过检查当前看到的幻灯片，我得到了幻灯片所需的索引位置，然后我将其分配给currentSlide 变量。

function navigateSlideshowLightbox () {
    if (previousImgIconClicked) {
        for (const [slideVisible] of slides.entries()) {
          if (slides[slideVisible].classList.contains('slide_visible')) {
            currentSlide = (slideVisible - 1 + allSlides) % allSlides
          }
        }
        showCurrentSlide(currentSlide)
    } else if (nextImgIconClicked) {
        //  Here comes the same 'for' loop with if statement as above.
        currentSlide = (slideVisible + 1) % allSlides
        showCurrentSlide(currentSlide)
    }

【讨论】：