3

次のコードを使用して基本的な画像回転機能を作成していますが、その仕組みをよりよく理解したいと考えています。私はそれのほとんどを取得しますが、「厳密な」等号と三項演算子を使用する回転関数の行、つまり (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/からのものです

4

2 に答える 2

3

この線

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

次のように書くことができます（そしてそうすべきです）：

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

はい、前者はバイト数が少ないですが、理解とデバッグがはるかに困難です。

編集: Norguard は、これに三項形式を使用する有効な方法を指摘しています。私は 3 進数を使用しますが、この場合は使用しません。これは、デバッグ時に「i = 0」条件にブレークポイントを設定する可能性が高いためです。ブレークポイントが必要ないと思われる場合は、彼の方法の方がコンパクトで簡潔であり、おそらく好ましいでしょう。

于 2012-08-16T23:22:37.157 に答える
1

私はアレスに同意しません-それはの値を推論する完全に有効な方法ですi。

その特定の三項ステートメント（それが何であるか）について混乱している部分は、三項がONEVALUEを設定することになっているということです。

これは、単一の変数を設定するための理想的なケースです。

意味があり、推論しやすい3項ステートメントは、次のようになります。

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

さまざまな条件に基づいて、2番目の形式ではなく最初の形式で6つの異なる変数を割り当てることを想像できますか？

私は常に2つ目を使用していますが、値を割り当てるのが非常に簡単です。

問題は、例では、彼らがそれをしていないということです。彼らはコードを起動するためのifステートメントとして三項を使用しています......それがifの目的です。

ifとしてそれを行う方法については、Aresの回答を参照してください。

しかし、三元代入として：

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

iが配列の最後のインデックスである場合はi0に設定し、そうでない場合はiそれ自体に1を加えたものに設定します。どうやってそこにたどり着いたかを理解するためにジャンプするクレイジーなロジックはもうありません。

于 2012-08-17T00:07:11.190 に答える