我正在编写一个脚本，该脚本从两个数组开始，一个有数据，另一个没有数据。不带的应该是"used"元素的数组。
我有一个"开始"按钮，它将数组元素作为li元素打印到相应的ul列表中。
我还有一个"移动"按钮，可以删除一个随机元素，并将其附加到"已使用"数组中，然后重新打印列表以反映更改。如果第一个列表为空，它会循环通过第二个列表并将其推回第一个列表。
我遇到的问题是，随机地，我得到的似乎是一个空元素，它被打印到任意一个数组中。当按下"开始"按钮"重置"所有内容时，我也没有得到预期的结果。我已经尝试了我能想到的一切，但我无法让它按我想要的方式工作。
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [];
const startBtn = document.getElementById('startBtn');
const moveBtn = document.getElementById('moveBtn');
const listOne = document.getElementById('listOne');
const listTwo = document.getElementById('listTwo');
const buildList = (arr, list) => {
// Remove elements to start fresh
while(list.firstChild) {
list.removeChild(list.firstChild);
}
// Build List
for(let i = 0; i < arr.length; i ++) {
const li = document.createElement('li');
li.textContent = arr[i];
list.appendChild(li);
}
};
startBtn.addEventListener('click', () => {
buildList(arr1, listOne);
buildList(arr2, listTwo);
});
moveBtn.addEventListener('click', () => {
if(arr1.length === 0) {
for(let i = 0; i < arr2.length; i++) {
arr1.push(arr2.splice(arr2[i], 1));
}
} else {
const randomIndex = Math.floor(Math.random() * arr1.length);
arr2.push(arr1.splice(randomIndex, 1));
for(let i = 0; i < arr2.length; i ++) {
const li = document.createElement('li');
li.textContent = arr2[i];
listTwo.appendChild(li);
}
}
buildList(arr1, listOne);
buildList(arr2, listTwo);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Array Test</h1>
<button id="startBtn">Start</button>
<button id="moveBtn">Move</button>
<br>
<ul id="listOne"></ul>
<ul id="listTwo"></ul>
<script src="script.js"></script>
</body>
</html>下面的代码可能是固定的，但当第一个项被推回到第一个数组时，第一个数组的长度不再是0，所以你会在前后推时被卡住。在那之后，你没有具体说明你的预期行为。但是，如果您想循环每个数组，直到交替为空，那么每当当前源长度为0时，使用标志切换源/目标数组将非常容易。
您还有一个额外的for循环来在列表中插入新的li元素，但这是不必要的，因为列表操作已经由您的buildList函数完成了。
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [];
const startBtn = document.getElementById('startBtn');
const moveBtn = document.getElementById('moveBtn');
const listOne = document.getElementById('listOne');
const listTwo = document.getElementById('listTwo');
const buildList = (arr, list) => {
// Remove elements to start fresh
while(list.firstChild) {
list.removeChild(list.firstChild);
}
// Build List
for(let i = 0; i < arr.length; i ++) {
const li = document.createElement('li');
li.textContent = arr[i];
list.appendChild(li);
}
};
startBtn.addEventListener('click', () => {
buildList(arr1, listOne);
buildList(arr2, listTwo);
});
moveBtn.addEventListener('click', () => {
let randomIndex;
if (arr1.length) {
randomIndex = Math.floor(Math.random() * arr1.length);
(arr2).push(arr1.splice(randomIndex, 1));
} else {
randomIndex = Math.floor(Math.random() * arr2.length);
(arr1).push(arr2.splice(randomIndex, 1));
}
buildList(arr1, listOne);
buildList(arr2, listTwo);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Array Test</h1>
<button id="startBtn">Start</button>
<button id="moveBtn">Move</button>
<br>
<ul id="listOne"></ul>
<ul id="listTwo"></ul>
<script src="script.js"></script>
</body>
</html>要使启动按钮工作，您需要重置arr1和arr2
startBtn.addEventListener('click', () => {
arr1 = [1, 2, 3, 4, 5];
arr2 = [];
buildList(arr1, listOne);
buildList(arr2, listTwo);
});
至于你的空白条目，这是由于在循环前进时拼接数组造成的
for(let i = 0; i < arr2.length; i++) {
arr1.push(arr2.splice(arr2[i], 1));
}
如果你像这样向后循环，它将工作
for(let i = arr2.length; i > 0 ; i--) {
arr1.push(arr2.splice(arr2[i], 1));
}
或者你可以这样做代替
arr1 = arr2;
arr2 = [];