好的,所以费希尔 - 耶茨洗牌作品的方式是
- 得到一个随机索引,
r
,从输入阵列
- 从输入阵列的输入阵列到输出数组
- remove元素
r
拷贝元件r
- 重复
n
次,其中n
是输入数组的长度
在循环结束时,输出将是e的混洗副本修改输入数组。
我打算浏览一下小问题:这个算法不应该改变输入数组。相反,它应该保持输入数组不变,并返回一个新的数组,它是输入数组的混洗副本。 (你可以在下面的实现中看到这是如何完成的)。因此,了解Fisher-Yates的工作方式,对于您的情况,我们不必洗牌整个阵列,因为您事先知道您只需要N
元素。
让我们先看看你的输入。
var fileContent = this.responseText;
var fileContentLines = fileContent.split('\n');
好,完美。你已经定义了输入数组,fileContentLines
。现在让我们来制作一个函数来从中抽取一些随机元素
// fisher-yates sample
// • sample n elements from xs
// • does not mutate xs
// • guarantees each sampled element is unique
function sample (n,xs) {
function loop(i, output, input, len) {
if (i === n) return output; // loop exit condition
let r = Math.floor(Math.random() * len); // rand number between 0 and len
return loop( // continue loop
i + 1, // increment loop counter
output.concat(input[r]), // copy element r from input
input.slice(0,r).concat(input.slice(r+1)), // remove element from input
len - 1 // decrement length
);
}
return loop(0, [], xs, xs.length); // begin loop
}
好吧!我们首先用一个简单的输入检查它
// sample 3 random inputs from numbers 1 through 10
console.log(sample(3, [1,2,3,4,5,6,7,8,9,10])); //=> [9,7,5]
完美。现在只是把它的线
var result = sample(5, fileContentLines);
console.log(result); // ...
上面的代码工作的阵列上,但我们不要停在这里。我们的代码承担了太多的责任,我们可以将一些行为分解为可重用的函数。
// get rand number between 0 and n
function rand(x) {
return Math.floor(Math.random() * x);
}
// splice of xs at index i
// • return a new output array
// • does not mutate xs
function del(i,xs) {
return xs.slice(0,i).concat(xs.slice(i+1));
}
// fisher-yates sample
// • sample n elements from xs
// • does not mutate xs
// • guarantees each sampled element is unique
function sample (n,xs) {
function loop(i, output, input, len) {
if (i === n) return output; // loop exit condition
let r = rand(len); // rand number between 0 and len
return loop( // continue loop
i + 1, // increment loop counter
output.concat(input[r]), // copy element r from input
del(r,input), // remove element from input
len - 1 // decrement length
);
}
return loop(0, [], xs, xs.length); // begin loop
}
// fisher-yates shuffle
// • does not mutate xs
function shuffle(xs) {
return sample(xs.length, xs);
}
让我们快速浏览一下各功能
// generate random number between 0 and 10 (exclusive)
console.log(rand(10)); //=> 5
// delete 2nd letter from letters a through d
console.log(del(1, ['a', 'b', 'c', 'd'])); // => ['a', 'c', 'd]
// sample 3 random inputs from numbers 1 through 10
console.log(sample(3, [1,2,3,4,5,6,7,8,9,10])); //=> [9,7,5]
// shuffle entire input array
console.log(shuffle([1,2,3,4,5,6,7,8,9,10])); //=> [8,9,1,3,7,6,10,5,4,2]
还有的个体行为,你就会明白:对于1价格4种功能。在我看来,这是一个更好的解决问题的方法,因为每个函数都是有用的,因此可以在多个地方使用。拥有许多小的可重用功能将大大减少您将来必须完成的工作量。
由于所有这些复杂性都很好地划分了,我们来看看你的最终代码是什么样的。
function createParagraph(text) {
var p = document.createElement('p');
p.innerHTML = text;
return p;
}
var request = new XMLHttpRequest();
request.onload = function() {
var fileContent = this.responseText;
var fileContentLines = fileContent.split('\n');
var target = document.getElementById('random-testimonial');
sample(5, fileContentLines).map(function(testimonial) {
var p = createParagraph(testimonial);
target.appendChild(p);
});
};
request.open('GET', 'content.txt', true);
request.send();
PS我强烈建议你写的可重复使用的功能,为您的Ajax请求,或更好,使用图书馆。用手书写它们非常麻烦并且容易出错。大多数人使用jQuery,但最近我一直在寻找axios
尝试用'.indexOf()'替换'.contains()'if'condition – guest271314