如何在两个数组之间交换一个元素？

Question

我第一次尝试在javascript上使用splice()和indexOf()方法，但我不明白参数。

我正在尝试制作游戏。当您单击一张卡片时，它会上升并转到另一个阵列。 这是代码、数组和变量：

var statusc1 = 'down';
let upcards = [];
let downcards = [
    pcard1,
    pcard2,
    pcard3,
    pcard4,
    pcard5
];


pcard1.addEventListener('click', ()=> {
    if(statusc1 == 'down') {
        console.log('its down');
        pcard1.style.bottom = -10;
        statusc1 = 'up';

        upcards.push(downcards[0]);
        downcards.splice(downcards.indexOf(pcard1),1);
        console.log(upcards);
    } else {
        console.log('its up');
        pcard1.style.bottom = -60;
        statusc1 = 'down';

        downcards.push(upcards[0]);
        upcards.splice(downcards.indexOf(pcard1),1);
        console.log(downcards);
    }
})

当它更改数组，然后返回到原始数组时，元素确实返回到初始数组（在最后一个位置）但第二个数组（upcards）也保留它并且由于某种原因，存储第二张卡片（pcard2 ).

我尝试改变拼接方法的参数，但我不明白。

Answer 1

我同意@Unmitigated - 我不清楚你想做什么。

但是，这里有一些关于您的代码的想法。

1. 你的卡片数组（downcards）是一个对象数组
   这不是好事或坏事 - 但它可能会使找到它们变得更难
   例如：downcards.indexOf(pcard1) 不会在这里返回 0。
   它会返回-1.
   如果 pcard1、pcard2 等具有某种 id 或名称，那么您可以在数组中搜索与该属性匹配的元素；然而，就目前而言 - 你所拥有的永远不会得到阵列中的特定卡片。

2. splice 做了两件事——它改变了原始数组并返回被删除的项目。
   因此，如果您的“indexOf”调用按预期工作，则您的语法很好。

3. 在一切正常之前，您可能需要控制台记录两种情况下的上牌和下牌；
   作为记录，当您的 indexOf 返回 -1 时，拼接将始终删除列表中的最后一张卡片
   所以你点击“pcard1”但从你的列表中删除“pcard5” 但您还向 upcards 添加了“pcard1” 这意味着 downcards 会丢失你不期望的牌 upcards 将获得 downcards 第一个位置的任何东西 （可能不是 pcard1）

4. 一旦一切正常，您可能可以链接您的推送和拼接，如下所示：
   upcards.push(downcards.splice(downcards.indexOf(pcard1),1));
   这将取出已移除的卡片并将其添加到 upcards 数组中。

不确定这是否能解决您的根本问题 - 但它应该可以帮助您前进。

Answer 2

尝试更改 else 块内的

upcards.splice(downcards.indexOf(pcard1),1);

行，如下所示。这样卡片将从第二个阵列中移除并且不会被存储。

upcards.splice(upcards.indexOf(pcard1),1);

Answer 3

老实说，作为纸牌游戏的玩家，我不认为你应该在两个阵列之间移动纸牌，这可能会改变它们的顺序，使事情变得混乱。虽然我认识到这种方式不再是使用

slice()

的做法，但使用单个数组跟踪卡片的选择状态可能会更好：

const cards = document.getElementsByTagName("button");
const selected = new Array(cards.length).fill(false);

function update() {
  let selection = "";
  for (let i = 0; i < cards.length; i++)
    if (selected[i]) {
      cards[i].classList.add("selected");
      if (selection !== "")
        selection += ", ";
      selection += cards[i].innerText;
    }
  else
    cards[i].classList.remove("selected");
  document.getElementById("selected").innerText =
    selection === "" ? "" : "Selected cards: " + selection;
}

function toggle(index) {
  selected[index] = !selected[index];
  update();
}
for (let i = 0; i < cards.length; i++)
  cards[i].onclick = () => toggle(i);

button {
  position: relative;
  height: 70px;
}

.selected {
  top: -10px;
}

<br>
<button>Card1</button>
<button>Card2</button>
<button>Card3</button>
<button>Card4</button>
<button>Card5</button>
<br>
<br>
<div id="selected"></div>