示例：

Question

我正在为我的网站提供用户推荐。我在首页上显示5个用户推荐，当用户加载网页时，这些推荐会从数组中@random中提取。该脚本随机抽取5个推荐后，将其注入到我的HTML文件中。

这一切都很好，但是我还希望检查每个值，以确保对于其他4个推荐书之一，该值尚未被提取。

然后，如果两个值相同，我希望脚本提取数组的另一个值。然后，它再次需要检查提取的值是否未在其他证明书中使用。

我正在尝试找到一种方法来尽可能有效地做到这一点。如果仅提取2个值，我知道如何执行此操作，但是现在我提取5个值，并且每个值都需要与提取的其他任何值进行检查。

var user = [
    {
        name: 'Tom Levis',
        body: 'Toms text'
    },
    {
        name: 'Some Random Guy',
        body: 'Some guys text'
    },
    {
        name: 'Peter',
        body: 'Peters text'
    }
];

var random1 = user[~~(Math.random() * user.length)];
var random2 = user[~~(Math.random() * user.length)];
var random3 = user[~~(Math.random() * user.length)];
var random4 = user[~~(Math.random() * user.length)];
var random5 = user[~~(Math.random() * user.length)];

document.getElementById('testimonial-1').innerHTML = random1.name + '<br>' + '<p id="testimonial-text">' + random1.body + '</p>';
document.getElementById('testimonial-2').innerHTML = random2.name + '<br>' + '<p id="testimonial-text">' + random2.body + '</p>';
document.getElementById('testimonial-3').innerHTML = random3.name + '<br>' + '<p id="testimonial-text">' + random3.body + '</p>';
document.getElementById('testimonial-4').innerHTML = random4.name + '<br>' + '<p id="testimonial-text">' + random4.body + '</p>';
document.getElementById('testimonial-5').innerHTML = random5.name + '<br>' + '<p id="testimonial-text">' + random5.body + '</p>';

最终应该发生的是从数组中拉出5个不同的值。所有结果均不得包含相同的值。

Answer 1

我认为，最有效的方法就是删除从可用选项库中选择的推荐信。

const testimonials = [
    {
        name: 'Tom Levis',
        body: 'Toms text'
    },
    {
        name: 'Some Random Guy',
        body: 'Some guys text'
    },
    {
        name: 'Peter',
        body: 'Peters text'
    }
]

function getTestimonial() {
    let index = ~~(Math.random() * testimonials.length)
    let val = testimonials[index]
    testimonials.splice(index, 1)
    return val
}


var random1 = getTestimonial();
var random2 = getTestimonial();
var random3 = getTestimonial();
var random4 = getTestimonial();
var random5 = getTestimonial();

console.log(random1)
console.log(random2)
console.log(random3)
console.log(random4)
console.log(random5)

如果您想避免数据突变，您只需向每个条目添加id属性，然后针对已选择的推荐书及其对应的id数组检查随机推荐书的id

const data = [
    {
        id: 1,
        name: 'Tom Levis',
        body: 'Toms text'
    },
    {
        id: 2,
        name: 'Some Random Guy',
        body: 'Some guys text'
    },
    {
        id: 3,
        name: 'Peter',
        body: 'Peters text'
    }
]

const selected = []

function getTestimonials2(testimonials) {
    while (true) {
        let index = ~~(Math.random() * testimonials.length)
        if (testimonials.length != selected.length) {
            if (selected.indexOf(testimonials[index].id) === -1) {
                selected.push(testimonials[index].id)
                return testimonials[index]
            } 
        } else {
            return undefined
        }        
    }
}

var random1 = getTestimonials2(data)
var random2 = getTestimonials2(data)
var random3 = getTestimonials2(data)
var random4 = getTestimonials2(data)
var random5 = getTestimonials2(data)

console.log(random1)
console.log(random2)
console.log(random3)
console.log(random4)
console.log(random5)

Answer 2

为了保持用户数组的完整性，请使用users.slice(0);

进行复制

然后，继续基于usersCopy.length生成一个随机数，直到usersCopy为空。调用usersCopy.splice(random, 1)以获得随机用户，同时将其从usersCopy数组中删除。

使用document.getElementById和一个count变量来获取正确的元素并编辑其html。这里唯一的问题是您的html元素比数组中的元素更多。如何处理这种情况取决于您。在这种情况下，您可以重复第一个元素，并且如果数组元素比HTML元素多，则如果count> HTML元素数，则可以停止while循环。

var users = [
    {
        name: 'Tom Levis',
        body: 'Toms text'
    },
    {
        name: 'Some Random Guy',
        body: 'Some guys text'
    },
    {
        name: 'Peter',
        body: 'Peters text'
    }
];

let usersCopy = users.slice(0);
let count = 0;

while (usersCopy.length) {
	count++;
	let random = ~~(Math.random() * usersCopy.length);
	let user = usersCopy.splice(random, 1)[0];
	document.getElementById('testimonial-' + count).innerHTML = user.name + '<br>' + '<p id="testimonial-text">' + user.body + '</p>';
}

<html>
<body>
<p id="testimonial-1"></p>
<p id="testimonial-2"></p>
<p id="testimonial-3"></p>
</body>
</html>

Answer 3

一种解决方案是使用Array.slice()创建原始数组的浅表副本，然后，每次您选择一个新元素时，都使用Array.splice()从副本中删除该元素以确保不使用再来一次。

示例：

var user = [
  {name: 'Tom Levis', body: 'Tom Levis text'},
  {name: 'Jonah', body: 'Jonah text'},
  {name: 'Peter', body: 'Peters text'},
  {name: 'Albert', body: 'Albert text'},
  {name: 'Susan', body: 'Susan text'},
  {name: 'Dominic', body: 'Dominic text'}
];

let userCopy = user.slice();

for (let i = 1; i <= 5; i++)
{
    let rndIdx = ~~(Math.random() * userCopy.length);
    let testimonial = document.getElementById('testimonial-' + i);
    let user = userCopy[rndIdx];
    testimonial.innerHTML = `${user.name}<br><p id="testimonial-text">${user.body}</p>`;
    userCopy.splice(rndIdx, 1);
}

<p id="testimonial-1"></p>
<p id="testimonial-2"></p>
<p id="testimonial-3"></p>
<p id="testimonial-4"></p>
<p id="testimonial-5"></p>

随机值-检查值-如果相同则采用新值

3 个答案:

示例：