配列の長さの各整数を指定する方法

Question

JavaScriptを何も知らなくても数日間Webサイトで作業していました。キャプションを変更してスライドショーギャラリーを作成することができました、イメージ、および背景色は、ページがリフレッシュされるたびにランダム化され、繰り返されません。それは難しい部分だったと思います。

http://dreamquesting.neocities.org/

今では、コードの最適化の問題です。シャッフル関数の実行では、backImageなどの変数配列の最小値と最大値を表す配列として数値のリストを見ることができます。

誰かが関数を作成している可能性がある場合、この場合はbackImageなどの指定された配列の最後の整数から0までの整数をリストするので、ギャラリーに追加するときにリストに最大値を追加する必要はありません。

可変配列backImage、backArtistなどを行うもっと簡単な方法があると思いますが、どの方向を取るべきかはわかりません。

とにかく、助けていただければ幸いです。ありがとうございます。

var backImage = new Array(); 
var backArtist = new Array(); 
var backCaption = new Array(); 
var backColor = new Array(); 

backImage[0] = "https://dfep0xlbws1ys.cloudfront.net/thumbs71/df/71dfd3bb82eb215b00dd0bf1eb1be93d.jpg?response-cache-control=max-age=2628000"; 
backArtist[0] = "http://loish.net/dawn/"; 
backCaption[0] = "Breathe by Loish"; 
backColor[0] = "#52686F"; 

backImage[1] = "https://cdn2.artstation.com/p/assets/images/images/000/768/254/large/eytan-zana-the-arrival.jpg?1443928283"; 
backArtist[1] = "https://www.artstation.com/artwork/the-return-a0dcbc0a-6be8-41cd-830b-34db8da07f85"; 
backCaption[1] = "The Return by Eytan Zana"; 
backColor[1] = "#4A4D56"; 

backImage[2] = "http://orig00.deviantart.net/f36b/f/2012/094/6/c/plains_of_glass_by_noahbradley-d4v1aab.jpg"; 
backArtist[2] = "http://noahbradley.deviantart.com/art/Plains-of-Glass-293992787"; 
backCaption[2] = "Plains of Glass by Noah Bradley"; 
backColor[2] = "#4D223C"; 

backImage[3] = "http://orig08.deviantart.net/6298/f/2015/032/c/2/hope_by_len_yan-d8g5zgm.jpg"; 
backArtist[3] = "http://len-yan.deviantart.com/art/hope-510882502"; 
backCaption[3] = "Hope by Len-Yan"; 
backColor[3] = "#A49576"; 

backImage[4] = "https://dfep0xlbws1ys.cloudfront.net/thumbs5a/19/5a192bf053eab38849419b9807346354.jpg?response-cache-control=max-age=2628000"; 
backArtist[4] = "https://www.inprnt.com/gallery/jjcanvas/pilgrimage/"; 
backCaption[4] = "Pilgrimage by Jorge Jacinto"; 
backColor[4] = "#10140A"; 

function shuffle(array) { 
    var m = array.length, 
    t, i; 

    // While there remain elements to shuffle… 
    while (m) { 

    // Pick a remaining element… 
    i = Math.floor(Math.random() * m--); 

    // And swap it with the current element. 
    t = array[m]; 
    array[m] = array[i]; 
    array[i] = t; 
    } 

    return array; 
} 

var mix = shuffle([0, 1, 2, 3, 4]); 

function changeBGImage(whichImage) { 
    document.body.style.textShadow = "1px 1px 7px #000"; 
    document.body.style.backgroundColor = backColor[whichImage]; 
    document.body.background = backImage[whichImage]; 
    document.getElementById("caption").textContent = backCaption[whichImage]; 
    document.getElementById("artist").href = backArtist[whichImage]; 
    document.getElementById("everything").onclick = function() { 
    changeBGImage(random); 
    } 
    var random = mix.pop(); 
} 

編集：明確化中：「整数の事に関しては：私は意味、あなたは例のbackImageの変数配列が一部を持っているかを知っている[0]部を介して、[4]と、変数に '？ 0、1、2、3、4と入力しなければなりません。

Answer 1

機能は、単にのような各セグメントを表す配列の整数を返します： "0、1、2、3、4"

ああ、あなたは配列を取得しようとしていますこの行で使用できるように、インデックス番号は

var mix = shuffle([0, 1, 2, 3, 4]); 

...リテラル配列の代わりに使用できます。あなたはこのように、Object.keysでそれを行うことができます。

var mix = shuffle(Object.keys(backImage)); 

それはあなたのオブジェクトの「キー」との配列を与えます。配列はオブジェクトであり、そのインデックスはそのキーであり、ここに示す：

var array = ['a', 'b', 'c', 'd', 'e']; 
 
console.log(Object.keys(array));

---

を今、私は質問を理解していることを、このの残りは無関係な、しかし、あなたは別の、おそらく便利です質問から、私はそれを残しておきます：

をしかし、あなたの目標はあなたの配列をループしている場合は、使用することができますforEach：

var backImage = ['a', 'b', 'c', 'd', 'e']; 
 
var backArtist = [1, 2, 3, 4, 5]; 
 
backImage.forEach(function(entry, index) { 
 
    console.log("image:", entry); 
 
    console.log("artist:", backArtist[index]); 
 
});

上記that Pastie I sent youのように、しかし、オブジェクトの配列と良いだろう。

var backInfo = [ 
 
    { 
 
    image: 'a', 
 
    artist: 1 
 
    }, 
 
    { 
 
    image: 'b', 
 
    artist: 2 
 
    }, 
 
    { 
 
    image: 'c', 
 
    artist: 3 
 
    }, 
 
    { 
 
    image: 'd', 
 
    artist: 4 
 
    }, 
 
    { 
 
    image: 'e', 
 
    artist: 5 
 
    } 
 
]; 
 
backInfo.forEach(function(entry) { 
 
    console.log("image:", entry.image); 
 
    console.log("artist:", entry.artist); 
 
});

Answer 2

申し訳ありませんが、私はこれをテストしていません。しかし、私はこれが期待どおりの結果になると思います。このようにスクリプトを変更してみてください。

var images = [{ 
    backImage: "https://dfep0xlbws1ys.cloudfront.net/thumbs71/df/71dfd3bb82eb215b00dd0bf1eb1be93d.jpg?response-cache-control=max-age=2628000", 
    backArtist: "http://loish.net/dawn/", 
    backCaption: "Breathe by Loish", 
    backColor: = "#52686F" 
}, { 
    backImage: "https://cdn2.artstation.com/p/assets/images/images/000/768/254/large/eytan-zana-the-arrival.jpg?1443928283", 
    backArtist: "https://www.artstation.com/artwork/the-return-a0dcbc0a-6be8-41cd-830b-34db8da07f85", 
    backCaption: "The Return by Eytan Zana", 
    backColor: "#4A4D56" 
}, { 
    backImage: "http://orig00.deviantart.net/f36b/f/2012/094/6/c/plains_of_glass_by_noahbradley-d4v1aab.jpg", 
    backArtist: "http://noahbradley.deviantart.com/art/Plains-of-Glass-293992787", 
    backCaption: "Plains of Glass by Noah Bradley", 
    backColor: "#4D223C" 
}]; 

var randomized = images.sort(function() { 
    return 0.5 - Math.random() 
}); 

console.log(randomized); 
console.log(randomized[1]);