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

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

如果您知道可以使用的项目的索引。可以通过item

的值来判断索引

state.items.splice(indexOfItemToRemove, 1);

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

Answer 2

您可以创建如下函数：

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 3

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

shift 将从开头删除第一项

pop 将删除末尾的最后一项。

splice 允许您删除所需位置的元素

请注意，所有这些都将修改原始数组（它们起作用 "in-place"），而不是返回一个新数组。

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;
    }
  }
};

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

How to remove a specific element from an array which is inside of an object?

javascript

arrays

jquery

state

object

HTML