请解释Javascript图像旋转代码

Question

我正在使用以下代码创建一个基本的图像旋转功能，并且我想更好地了解它的工作原理。我得到了大部分内容，但是旋转函数中使用“严格”等于和三元运算符的行，即 (i === (imgs.length -1) ) ？ i=0 : i++ ;) 有点令人困惑。我知道它正在增加计数器，但在那之前它在做什么？

var i, imgs, pic;

function rotate()
{
    pic.src = imgs[i] ;
    (i === (imgs.length -1) ) ? i=0 : i++ ;
    setTimeout( rotate, 2500 );
}

function init()
{
    pic = document.getElementById("pic");

    imgs = [ 'images/shimano_offer.jpg', 'images/kids_bikes1.jpg', 'images/cycle_to_work.jpg' ] ;

    var preload= new Array();
    for( i=0; i< imgs.length; i++ )
    {
        preload[ i ] = new Image();
        preload[ i ].src = imgs[ i ];
    }

    i=0;

    rotate();
}

代码来自http://ineasysteps.com/products-page/all_books/javascript-in-easy-steps-4th-edition/

Answer 1

线

(i === (imgs.length -1) ) ? i=0 : i++ ;

可以（并且应该）写成：

if (i === (imgs.length - 1)) {
    i = 0;
} else {
    i += 1;
}

是的，前者字节少，但更难理解和调试。

编辑： Norguard 指出了一种使用三元形式的有效方法。我使用三元组，但在这种情况下我不会，因为我可能想在调试时在“i = 0”条件上放置一个断点。如果您预计不需要断点，他的方法更紧凑，更简洁，可能更可取。

Answer 2

我不同意 Ares 的观点——这是推理i 价值的一种完全有效的方式。

对于特定的三元语句（它就是这样）令人困惑的部分是三元语句应该设置 ONE VALUE。

这是设置单个变量的理想情况。

有意义且易于推理的三元语句如下：

var mood = (bank_account_balance > 0) ? "happy" : "unhappy";
console.log(mood);

如果余额为正，则mood 是“快乐”，否则是“不快乐”，这是一种非常简洁的方式。 这很好，简洁，不需要完整的：

if (....) {
    this_one_var = "one_thing";
} else if (...) {
    this_one_var = "something_else";
} else {
    this_one_var = "another_thing";
}

this_one_var = (...) ? "one_thing" : (...) ? "something_else" : "another_thing";
this_other_var = (...) ? "one_thing2" : (...) ? "something_else2" : "another_thing2";

你能想象根据不同的条件在第一种形式而不是第二种形式中分配 6 个不同的变量吗？

我经常使用第二个，它使得赋值非常非常整洁。

问题在于，在示例中，他们没有这样做。 他们使用三元作为 if 语句来触发代码...... ...这就是 if 的用途。

请参阅 Ares 的回答，了解如何将其视为 if。

但是作为三元赋值：

var length = imgs.length;
i = (i === length - 1) ? 0 : i + 1;

如果i 是数组的最后一个索引，则将i 设置为0，否则将i 设置为自身加一。 不再有任何疯狂的逻辑可以跳过来弄清楚你是如何到达那里的。