javascript - 比较数组中图像的重复项

Question

我已经尝试关注这个先前的问题:Comparing 2 Image's sources in Javascript
但是，页面上没有解决此问题的方法
我正在尝试从 2 个数组生成随机图像，相同的图像无法相互比较。
当我从 if 语句运行此代码时，重复继续出现。但是，如果生成相同的图像然后会显示一对新的图像，并且不会显示重复的图像，我打算发生什么。

function start2AFC() {
        var answers = {};
        window.sessionStorage.setItem("answers", JSON.stringify(answers))

        var myImages = new Array();
        var testImages = new Array();

        testImages[0] = ["images/images/practice/practice1.jpg","images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg" ];
        testImages[1] = ["images/images/practice/practice2.jpg", "images/images/practice/practice4.jpg", "images/images/practice/practice1.jpg" ];

        
        var myImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
        "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
        "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
        "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
        "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
        "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

        var secondImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
        "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
        "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
        "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
        "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
        "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]



        window.sessionStorage.setItem("practiceImages", JSON.stringify(testImages))
        window.sessionStorage.setItem("images", JSON.stringify(myImages))
        window.sessionStorage.setItem("images_2", JSON.stringify(secondImages))
    

    var counter = 0;
    window.sessionStorage.setItem("counter", counter);

    total = (JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length )
    count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) +  - 1);
    window.sessionStorage.setItem("total", total)


    document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total
    random2AFC();



}

function random2AFC() {
    var practiceImages = JSON.parse(window.sessionStorage.getItem("practiceImages"));
    var counter = JSON.parse(window.sessionStorage.getItem("counter"))
    var image = document.getElementById("image");
    var images = JSON.parse(window.sessionStorage.getItem("images"));
    var images_2 = JSON.parse(window.sessionStorage.getItem("images_2"))
    var rnd = Math.floor(Math.random() * images.length);
    var rnd_2 = Math.floor(Math.random() * images_2.length);

    counter += 1
    window.sessionStorage.setItem("counter", counter)

    // iterate through practice array 
    if (practiceImages.length > 0) {
        image.src = practiceImages[0][0];;
        image2.src = practiceImages[0][1];;
        practiceImages.splice(0, 1);
        window.sessionStorage.setItem("practiceImages", JSON.stringify(practiceImages));
        

    } else {
        // after every 15 images, display break image
        if (counter % 15 == 0) {
            image.src = "images/images/break_2afc.png"
            image2.src = "images/images/break_2afc2.png"
        } else { 
        // once every image has been displayed from both arrays, send to the database
       if (images.length == 0 && images_2.length == 0) { 
                send2AFC();
       } else {

            // if icon1 and icon2 are not the same
            // do not display duplicate, and generate new comparison
            if ((images[rnd] != images_2[rnd_2])) {
                image.src = images[rnd]
                image2.src = images_2[rnd_2];
                console.log("not duplicate")
            } else { 

            // if icon 1 and icon2 are not the same, then continue
            var random1 = Math.floor(Math.random() * images.length);
            var random2 = Math.floor(Math.random() * images_2.length);
            image.src = images[random1]
            console.log("found duplicate")
            image2.src = images_2[random2];
            rnd = random1;
            rnd_2 = random2;
            }
        }
            counter = counter + 1
            images.splice(rnd, 1);
            images_2.splice(rnd_2, 1)
            window.sessionStorage.setItem("images", JSON.stringify(images))
            window.sessionStorage.setItem("images_2", JSON.stringify(images_2))
        }
    }
}

function store2AFC(id) {

    total = window.sessionStorage.getItem("total")
    count = total - ((JSON.parse(window.sessionStorage.getItem("images")).length + JSON.parse(window.sessionStorage.getItem("practiceImages")).length) - 1);
    document.getElementById("counter").innerHTML = "You are on image " + count + " of " + total;

    var answers = JSON.parse(window.sessionStorage.getItem("answers"))
    var img = document.getElementById("image");
    var img2 = document.getElementById("image2");

    var img_file = img.src.slice(-9);
    var img_file2 = img2.src.slice(-9);


    var selected = id;
    console.log(selected);
    var question = [img_file, img_file2]

        if (selected == "image") {
            answers[question] = [img_file]
        } else {
            answers[question] = [img_file2]
        }

        console.log(answers)
        window.sessionStorage.setItem("answers", JSON.stringify(answers));

    
    random2AFC();
}

<!DOCTYPE html>

<html>

<head>
    <title> App Icons? </title>
    <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-storage.js"></script>
</head>

<body class=body onload="start2AFC()">
    <div>
        <div>
            <hr>
            <div class=topbar>
                <h1> Which app icon is more beautiful?</h1>
            </div>
            <hr>

            <div class=imageContainer>
                <div class=image>
                    <img onclick="store2AFC(this.id)" id="image" alt="Experimental Image" width="400px" height="200px">
                </div>

                <div class=image>
                    <img onclick="store2AFC(this.id)" type="image" id="image2" alt="Experiment Image" width="400px" height="200px">
                </div>
            </div>
        </div>

        <hr>
            <div class=counter id=counter>
            </div>

        </div> 

        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Answer 1

let images1 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

let images2 = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg", "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg", "images/images/icon12.jpg", "images/images/icon13.jpg", "images/images/icon14.jpg", "images/images/icon15.jpg", "images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg", "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg", "images/images/icon24.jpg", "images/images/icon25.jpg", "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg", "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

function randomPair(array1, array2) {
  // create an array of all the images, including the duplicates
  const allImages = [...array1, ...array2]
  let n = allImages.length;
  let i, j;
  // an empty array for the unique pairs
  let uniquePairs = [];

  for (i = 0; i < n; i++) {
    for (j = i + 1; j < n; j++) {
      // don't allow an image pair that contains 2 of the same image
      if (allImages[i] !== allImages[j])
        uniquePairs.push([allImages[i], allImages[j]])
    }
  }

  // randomly choose a pair from the list of all unique pairs
  let uniqueItem = uniquePairs[Math.floor(Math.random() * uniquePairs.length)];

  console.log("There are " + uniquePairs.length + " unique combinations between the two arrays")
  console.log("The returned unique pair is: " + uniqueItem.join(" + "))

  return uniqueItem;
}

randomPair(images1, images2)

我不确定我是否完全理解您想要的结果，但为什么不这样处理:
我理解这一点，因为您想比较从可能包含相同图像的 2 个单独数组中随机选择的 2 个图像，同时避免将图像与其自身进行比较。
这结合了两个数组，创建了所有可能的对，在任何重复时过滤掉(图像与自身)，并返回一个随机对。
从这里您可以显示组合，并确保显示本身不会重复。这不是真正的随机选择，但它从所有可能的随机组合中随机选择，所以它应该就足够了。