数组中唯一的随机项目
Unique random item from array
在 JavaScript 中,我想从数组中随机删除一个项目,并在单击按钮时将其显示在 HTML 中。
然后在下一次单击按钮时显示从数组中删除的下一个项目。但是,这似乎不起作用!
fiddle:http://jsfiddle.net/bs4e5g69/
document.getElementById("Button").onclick = function() {
var count = 3;
var myArray = [
'A',
'B',
'C',
'D',
'E',
'F',
'G'
];
var tmpArrayE = myArray.slice(myArray);
var goE = [];
for (var i = 0; i < count; i++) {
var optionsE = Math.floor(Math.random() * tmpArrayE.length);
var removedE = tmpArrayE.splice(optionsE, 1);
goE.push(removedE[0]);
}
document.getElementById("Answer").innerHTML = goE[0];
}
您在 onclick 函数内声明 myArray
。所以每次点击都会创建一个新数组。
var myArray = [
'A',
'B',
'C',
'D',
'E',
'F',
'G'
];
document.getElementById("Button").onclick = function() {
//check if myArray length is greater than 0
if (myArray.length > 0) {
// generate random number
var optionsE = Math.floor(Math.random() * myArray.length);
// remove that element & show in div
var removedE = myArray.splice(optionsE, 1);
document.getElementById("Answer").innerHTML = removedE;
}
}
<button id="Button">
Start
</button>
<div id="Answer">
Result
</div>
如果您想使用 myArray
的副本,您需要将此行移到回调之外,因为您总是会为每个事件获得一个(新的)副本。
var tmpArrayE = myArray.slice(0); // myArray.slice(myArray) is wrong.
要在回调中使用原始数组,您可以只使用 myArray
。
您正在事件处理程序中重新定义数组,因此您的数组永远不会为空!
这是您更新后的代码:
// myArray initial content, as a global variable :
var myArray = [
'A',
'B',
'C',
'D',
'E',
'F',
'G'
];
// the event handler, randomly emptying myArray one at a time :
document.getElementById("Button").onclick = function() {
// check for an empty array :
if (myArray.length > 0) {
var optionsE = Math.floor(Math.random() * myArray.length);
var removedE = myArray.splice(optionsE, 1);
document.getElementById("Answer").innerHTML = removedE[0];
} else {
alert("the array is now empty");
}
}
方案A:从洗牌开始。然后在需要时弹出最后一个元素。
方案B:从0到len-1中随机选择一个元素。将最后一个元素复制到该插槽中。然后将数组减一。
如果您需要 "shuffle" 函数,请执行此操作(仅 N 步;结果是随机的):
for j = 0..N-1
swap item #j with item # rand(0..N-1)
在 JavaScript 中,我想从数组中随机删除一个项目,并在单击按钮时将其显示在 HTML 中。 然后在下一次单击按钮时显示从数组中删除的下一个项目。但是,这似乎不起作用!
fiddle:http://jsfiddle.net/bs4e5g69/
document.getElementById("Button").onclick = function() {
var count = 3;
var myArray = [
'A',
'B',
'C',
'D',
'E',
'F',
'G'
];
var tmpArrayE = myArray.slice(myArray);
var goE = [];
for (var i = 0; i < count; i++) {
var optionsE = Math.floor(Math.random() * tmpArrayE.length);
var removedE = tmpArrayE.splice(optionsE, 1);
goE.push(removedE[0]);
}
document.getElementById("Answer").innerHTML = goE[0];
}
您在 onclick 函数内声明 myArray
。所以每次点击都会创建一个新数组。
var myArray = [
'A',
'B',
'C',
'D',
'E',
'F',
'G'
];
document.getElementById("Button").onclick = function() {
//check if myArray length is greater than 0
if (myArray.length > 0) {
// generate random number
var optionsE = Math.floor(Math.random() * myArray.length);
// remove that element & show in div
var removedE = myArray.splice(optionsE, 1);
document.getElementById("Answer").innerHTML = removedE;
}
}
<button id="Button">
Start
</button>
<div id="Answer">
Result
</div>
如果您想使用 myArray
的副本,您需要将此行移到回调之外,因为您总是会为每个事件获得一个(新的)副本。
var tmpArrayE = myArray.slice(0); // myArray.slice(myArray) is wrong.
要在回调中使用原始数组,您可以只使用 myArray
。
您正在事件处理程序中重新定义数组,因此您的数组永远不会为空!
这是您更新后的代码:
// myArray initial content, as a global variable :
var myArray = [
'A',
'B',
'C',
'D',
'E',
'F',
'G'
];
// the event handler, randomly emptying myArray one at a time :
document.getElementById("Button").onclick = function() {
// check for an empty array :
if (myArray.length > 0) {
var optionsE = Math.floor(Math.random() * myArray.length);
var removedE = myArray.splice(optionsE, 1);
document.getElementById("Answer").innerHTML = removedE[0];
} else {
alert("the array is now empty");
}
}
方案A:从洗牌开始。然后在需要时弹出最后一个元素。
方案B:从0到len-1中随机选择一个元素。将最后一个元素复制到该插槽中。然后将数组减一。
如果您需要 "shuffle" 函数,请执行此操作(仅 N 步;结果是随机的):
for j = 0..N-1
swap item #j with item # rand(0..N-1)