Question

我正在使用jquery编写javascript中的幻灯片编码，当我遇到了几行代码正在执行的操作时。

问题是，我不理解它是如何工作的所以我可以修改它。

var imgs = [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'];
        var cnt = imgs.length;

    $(function() {
        setInterval(Slider, 4000);
    });

    function Slider() {
    $('#imageSlide').fadeOut("slow", function() {
       $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
    });
    }

这就是让我：

的路线

[(imgs.length++) % cnt]

我正在读那个

3+1 % 3 = 1

现在每次执行时，该代码都不会修改任何变量。 cnt将始终等于imgs.length（3），imgs.length++实际上并未对其进行修改，只是为该单次执行添加一个，是否正确？

无论它执行了多少次，它总是imgs[1]但是当我执行代码时，它会在所有数组对象中正确运行。

修改

我只是添加了alert(imgs.length);并确认++确实改变了变量，但它对我来说仍然没有意义。

第一次运行，imgs.length = 4之后的++。 4 % 3 = 1所以应该运行数组对象[1]而不是[0]？

第二轮，5 % 3 = 2

第三轮，6 % 3 = 0

等等。但它不应该重置。但是，如果我放alert(imgs.length % cnt);它只返回0,1,2而不是重置。

为什么？

Answer 1

imgs.length++的返回值为3，因此3％3 = 0但imgs.length为4，imgs数组将包含4项。

在控制台中尝试：

var x = [ 1, 2, 3 ]
x.length++
=> 3
x.length++
=> 4
x.length++
=> 5
x
[1, 2, 3, undefined, undefined, undefined]

因此，每次调用imgs.length++时，它都会向数组追加一个项目。所以不是一个很好的代码，但简短：）

编辑：为什么很容易回答，一开始它包含cnt个元素，所以代码将踩到每个图像并从头开始。因此，如果imgs数组包含5项，它将逐步执行5项并从头开始。

此代码的唯一问题是，每次都会增加数组，浏览器会占用内存。

Answer 2

我确信您知道imgs.length++，如果它应用于任何其他变量，将添加一个，修改原始变量。

var x = 1;
alert(x++); // alerts 1
alert(x); // alerts 2

果然，这就是正在发生的事情。

脚本在每次运行时递增imgs数组的长度，因此它从3移动到4到5到6等等。我不是Javascript内部的专家，所以我不确定如果这对性能有任何影响，但如果你明白length实际上是一个可写属性，那一切都是有道理的。

Answer 3

我不是100％肯定javascript，但我知道imgs.length++的其他语言与imgs.length = imgs.length + 1相同，因此应该进行修改。

我认为这是一个“聪明的伎俩”，如果使用的话应该记录下来。 ~~它有点打破了长度意味着什么的语义，所以虽然逻辑上对于计算机是正确的，但对于属性名称来说它没有多大意义~~

所以我猜它确实会改变长度，但我仍然不建议在没有记录的情况下使用它。一个更明确的方法是声明一个新的变量i = 0并用imgs.length++替换i++，因为虽然在这种情况下它可能不重要，但如果你正在做其他任何事情数组，现在的长度可能不是你想象的那样。

关于编辑：
6％3是0而不是3 模数（在编程中，纯粹的数学术语略有不同）意味着除以并取余数 6/3 = 2，余数为0 7/3 = 2，余数为1 8/3 = 2，余数为2 9/3 = 3，余数为0，

Answer 4

（imgs.length ++）％cnt

将导致图像一遍又一遍地遍历每个图像。

JavaScript中的百分号（％）表示它使用Modulus（除法余数）运算符。

示例：

0％3 = 0
1％3 = 1
2％3 = 2
3％3 = 0
4％3 = 1
5％3 = 2 等...

Answer 5

好吧，Slider运行的每4秒钟扩展一次数组，所以你得到：

3+1 % 3 = 1
4+1 % 3 = 2
5+1 % 3 = 0

依此类推:)）

Answer 6

如果您希望将来您的代码更具可读性，我个人建议您将代码更改为以下内容：

var imgs = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'];
var i = 0;

$(function() { // This is a shortcut for $(document).ready();
    setInterval(Slider, 4000);
});

function Slider() {
   $('#imageSlide').fadeOut("slow", function() {
      i = (i+1) % imgs.length;
      $(this).attr('src', imgs[i]).fadeIn("slow");
   });
}

jquery幻灯片放映 - 为什么这段代码有效？

6 个答案: