我有几个Figure对象存储在一个名为figureTab的数组中，并且我将使用过的元素存储在名为used的数组中。
我需要设置两次随机数吗？阵列内的对象
var used = [];
for (let i = 0; i < figureTab.length; i++) {
var random = Math.floor(Math.random() * figureTab.length);
if (used.length == 0) {
used.push(random);
html += "<div>" + (figureTab[random].FigureNr + 1) + "></div>"
}
else{
for (let j = 0; j < used.length; j++) {
if (used[j] == random) {
random = Math.floor(Math.random() * figurTab.length);
j = 0;
}
}
used.push(random);
html += "<div>" + (figureTab[random].FigureNr + 1) + "></div>";
}
document.getElementById("alternatives").innerHTML = html;
如果您要寻找的是数组搅乱器，那么有一种更短的方法(实现Fisher Yates算法(，使用Array.prototype.reduceRight():
const src = [{id:0, name: 'circle', path:'data:image/svg+xml;base64, PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz4NCjwvc3ZnPg=='}, {id:1, name: 'triangle', path: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik0wLDAgaDEwMCB2MTAwIHoiLz4NCjwvc3ZnPg=='}, {id:2, name: 'rhombus', path:'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik01MCwwIGw1MCw1MCBsLTUwLDUwIGwtNTAtNTAgeiIvPg0KPC9zdmc+'}, {id:3, name: 'square', path: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik0wLDAgaDEwMCB2MTAwIGgtMTAwIHoiLz4NCjwvc3ZnPg=='}, {id:4, name: 'trapezoid', path:'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCsKgIDxwYXRoIGQ9Ik0wLDEwMCBoMTAwIGwtMjAsLTEwMCBoLTYwIHoiLz4NCjwvc3ZnPg=='}],
wrapper = document.getElementById('wrapper'),
shuffle = arr => arr.reduceRight((r,_,__,s) =>
(r.push(s.splice(0|Math.random()*s.length,1)[0]), r),[])
shuffle(src).forEach(({name,path}) => {
const figure = document.createElement('img')
figure.src = path
figure.alt = name
wrapper.appendChild(figure)
})img{
width: 100px;
height:100px;
margin: 10px;
}<div id="wrapper"></div>有两个函数：
/*
- Shuffles an array properly -- without duplicates -- based on the Fischer-Yeats
algorithm
*/
shuffle(array)
/*
- Passes an htmlString, an array, and an optional selector of the tag that the new
HTML will be rendered into (if no selector is provided then it will render to
<body> by default).
*/
function renderString(string, shuffled, selector = 'body')
function renderString(string, shuffled, selector = 'body') {
const node = document.querySelector(selector);
for (let [index, url] of shuffled) {
node.insertAdjacentHTML('beforeend', string);
node.lastElementChild.firstElementChild.src += url;
node.lastElementChild.lastElementChild.textContent = index;
}
}
function shuffle(array) {
let qty = array.length,
temp, i;
while (qty) {
i = Math.floor(Math.random() * qty--);
temp = array[qty];
array[qty] = array[i];
array[i] = temp;
}
return array;
}
const thumbs = [[0, '/img/link.gif'], [1, '/img/sol.png'], [2, '/img/ren.gif'], [3, '/img/balls.gif'], [4, '/img/austin.gif']];
const htmlString = `
<figure>
<img src='https://glpjt.s3.amazonaws.com/so/av'>
<figcaption></figcaption>
</figure>`;
let mixed = shuffle(thumbs);
//console.log(mixed);
renderString(htmlString, mixed, 'main');main {
display: flex;
flex-flow: column nowrap;
justify-content: start;
width: 80%;
margin: 0 auto;
}
figure {
width: 320px;
margin: 0 auto;
padding: 5px 10px;
outline: 3px outset tomato;
font-family: Verdana;
font-size: 3rem;
}
img {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
figcaption {
text-align: center;
}<main></main>