防止两次选择数组项

Question

How do I prevent a number being selected twice from an array within a for loop? In this case, I want to make sure pictureNo is unique each time.

$(document).ready(function () {
        // Generate timeline items
        var timelineItemCount = Math.floor(Math.random() * 9) + 1;
        for(i=0;i<timelineItemCount;i++)
        {
            generateTimeline();
        }
    });

function generateTimeline() {
    // Select gender
    var genderArray = ['male','female'];
    var gender = genderArray[Math.floor(Math.random()*genderArray.length)]; 

    // Select profile picture - how do I prevent the same number from being selected once here
    var pictureNo = Math.floor(Math.random() * 19) + 1;

    // Create timeline entry    
    $('#home-page').append($('<div class="timeline-item"><img src="assets/img/' + gender + '_profile' + pictureNo + '.jpg" alt="" class="img-rounded profile"></div>'));    
}

Answer 1

Try and store the randomly selected numbers so every time a new number is randomly selected you have a condition to compare it with the previously selected numbers. If the number was previously selected then a new random number should be selected.

Answer 2

Create an array outside the for loop and store the random numbers being generated. At each iteration of the for loop, check if the new random number belongs to the array. When the for loop finishes, reset the array to the empty array.

Answer 3

Lets define two arrays of male and female indices, genders array, shuffle them and pop some items. It is easy to do with Underscore.JS, for example:

var malesCount = 20;
var femalesCount = 20;

var profiles = {
  'male' : _.shuffle(_.range(1, malesCount + 1)),
  'female' : _.shuffle(_.range(1, femalesCount + 1)),
};

var genders = [];
for (var index = 0; index < malesCount; index++) {
  genders.push('male');
}
for (var index = 0; index < femalesCount; index++) {
  genders.push('female');
}
genders = _.shuffle(genders);

var gender;
var pictureNo;
var src;
while (gender = genders.pop()) {
  pictureNo = profiles[gender].pop();
  src = 'assets/img/' + gender + '_profile' + pictureNo + '.jpg';
  console.log(src);
}

I've tested this solution for 50K of males and 50K of females, it executes just in 115 msec.

Answer 4

Try this:-

$(document).ready(function () {
        // Generate timeline items
        var timelineItemCount = Math.floor(Math.random() * 9) + 1.
            selectedPicObj={};
        for(i=0;i<timelineItemCount;i++)
        {
            generateTimeline(selectedPicObj);
        }
    });

    function generateTimeline(selectedPicObj) {
    // Select gender
    var genderArray = ['male','female'], i=0;
    var gender = genderArray[Math.floor(Math.random()*genderArray.length)]; 

    // Select profile picture - how do I prevent the same number from being selected once here
    var pictureNo = Math.floor(Math.random() * 19) + 1;
        for(;i<19;i++){
            if(!selectedPicObj[pictureNo]){
                selectedPicObj[pictureNo] = true;
                break;
            }else{
                pictureNo++;
                if(pictureNo === 19){
                    pictureNo = 0;
                }
            }
        }
    // Create timeline entry    
    $('#home-page').append($('<div class="timeline-item"><img src="assets/img/' + gender + '_profile' + pictureNo + '.jpg" alt="" class="img-rounded profile"></div>'));    
}