初学者：从 Javascript 数组中删除项目答案

【问题标题】：BEGINNER: Removing items from Javascript Array初学者：从 Javascript 数组中删除项目
【发布时间】：2020-08-10 07:14:14
【问题描述】：

我正在编写一个随机报价生成器。我几乎已经完全按照我想要的方式进行了编码。我是 HTML 的初学者，在本周末之前我从未使用过 Javascript。我从多个教程中获取了我想要的代码，并且非常自豪。我还有最后一件事要做。当调用数组中的一个项目时，我希望将其删除，存储在另一个数组中，当原始数组达到 0 时，我希望它重置。我知道这是可能的，但我不确定要添加到这个脚本中以使其工作。非常感谢您的帮助。

const quotes = [{
    game: 'CARD TYPE 1',
    quote: "This is the card description for Card Type 1",
    rule: "Card Type 1 Rules"
  },
  {
    game: 'CARD TYPE 2',
    quote: "This is the card description for Card Type 2",
    rule: "Card Type 2 Rules"
  },
  {
    game: 'CARD TYPE 3',
    quote: "This is the card description for Card Type 3",
    rule: "Card Type 3 Rules"
  }
];

const maincontainer = document.querySelector("#quoteBtn");
const questionStyle = document.querySelector("#quote");
const gameTitleStyle = document.querySelector("#gameTitle");
const ruleStyle = document.querySelector("#ruleTxt");

quoteBtn.addEventListener("click", displayQuote);

function displayQuote() {
  let number = Math.floor(Math.random() * quotes.length);

  gameTitle.innerHTML = quotes[number].game;
  quote.innerHTML = quotes[number].quote;
  ruleTxt.innerHTML = quotes[number].rule;
}

<style type="text/css">
  body {
    font-family: "Poppins", sans-serif;
    background-color: #3F6BFF;
  }
  
  .maincontainer {
    position: relative;
    width: 500px;
    height: 300px;
    animation: flip 1s;
    text-align: center;
    margin: 0 auto;
    border-radius: 25px;
  }
  
  .thecard {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
    border-radius: 25px;
  }
  
  .thecard:active {
    transform: rotateY(360deg);
  }
  
  .thefront {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-right: 30px;
    padding-left: 30px;
    backface-visibility: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
  }
  
  .theback {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-right: 30px;
    padding-left: 30px;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: #000;
    border-radius: 25px;
  }
  
  .gameTitleStyle {
    font-weight: 800;
    font-size: 32px;
    text-transform: uppercase;
  }
  
  .ruleStyle {
    position: relative;
    top: -20px;
    font-style: italic;
  }
  
  .questionStyle {
    position: relative;
    top: 20px;
    font-size: 18px;
  }
</style>

<body>

  <div class="maincontainer" id="quoteBtn">

    <div class="thecard">

      <div class="thefront">
        <h1 class="gameTitleStyle" id="gameTitle">Business Name</h1>
        <p class="ruleStyle" id="ruleTxt">Rules</p>
        <p class="questionStyle" id="quote">Card Description</p>
      </div>

      <div class="theback"></div>

    </div>


  </div>


</body>

【问题讨论】：

查看pop(), push(), shift() and unshift() 数组运算符
@RachelGallen 谢谢。我现在想弄清楚。每当我添加到我的代码中时，我都会感到困惑。 #LearningAsIGo
当你开始学习新东西时总是这样；随着你的前进变得更容易！请记住，如果您想轻松重置，可以将数组复制到另一个 var（例如 var arr1 = arr; ）。

标签： javascript html arrays random duplicates

【解决方案1】：

可以使用Array.prototype.splice() 方法从数组中删除元素。例如，这会从名为“items”的数组中删除元素 2，并在新数组中返回删除的元素：

let removedItems = items.splice(2);

使用Array.prototype.push()将项目添加到数组中：

otherArray.push(...removedItems);

...removedItems 将 removedItems 数组转换为项目列表。 ... 称为spread operator。

这些应该足以完成你想要的。

【讨论】：

我会调查的。我需要一段时间才能弄清楚我如何将这些东西融入我所拥有的东西中。感谢您的回复