如何从对象内部的数组中删除特定元素？

Question

我正在学习如何通过购物清单练习来管理应用程序状态。 按照说明，我在对象内部有一个数组，用于存储添加的所有项目：

var state = {
    items: []
};

要修改state ，请使用以下功能：

var addItem = function(state, item) {
state.items.push(item);
};

稍后通过事件监听器调用（并通过renderList添加到DOM，此处未显示）：

$('#js-shopping-list-form').submit(function(event){
    event.preventDefault();
    addItem(state, $('#shopping-list-entry').val());
    renderList(state, $('.shopping-list'));
});

如何从state对象内的数组中删除特定项目？ 本质上，当用户单击<button class="shopping-item-delete">时，我想颠倒上述顺序。

这是最终解决方案的演示： https : //thinkful-ed.github.io/shopping-list-solution/

HTML

<body>

  <div class="container">

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">
    <li>
        <span class="shopping-item">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>

  <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="app.js"></script>
</body>

Answer 1

您可以创建一个函数，如下所示：

var deleteItem = function(state, item) {
    var index = state.items.indexOf(item);
    if (index > -1) {
        state.items.splice(index, 1);
    }
};

请注意，Internet Explorer 7和8不支持indexOf方法。

Answer 2

如果您知道该项目的索引，则可以使用。 您可以通过项目的值确定索引

state.items.splice(indexOfItemToRemove, 1);

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Answer 3

有两种方法可以从数组中删除元素：

shift将删除开头的第一项

pop将从末尾删除最后一个项目。

splice使您可以在所需位置删除元素

请注意，所有这些都将修改原始数组（它们在“原位”工作），而不是返回新数组。

Answer 4

您可以在项目上循环

var removeItem = function(state, item) {
  for(var i = state.items.length - 1; i >= 0; i--) {
    if(state.items[i] === item) {
       state.items.splice(i, 1);
       break;
    }
  }
};

如何从对象内部的数组中删除特定元素？

问题描述

HTML

4 个解决方案

解决方案1
2 已采纳 2016-12-14 01:05:12

解决方案2
0 2016-12-14 01:04:09

解决方案3
0 2016-12-14 01:07:40

解决方案4
0 2016-12-14 01:08:19

如何从对象内部的数组中删除特定元素？

问题描述

HTML

4 个解决方案

解决方案1 2 已采纳 2016-12-14 01:05:12

解决方案2 0 2016-12-14 01:04:09

解决方案3 0 2016-12-14 01:07:40

解决方案4 0 2016-12-14 01:08:19

解决方案1
2 已采纳 2016-12-14 01:05:12

解决方案2
0 2016-12-14 01:04:09

解决方案3
0 2016-12-14 01:07:40

解决方案4
0 2016-12-14 01:08:19