如何从对象内部的数组中删除特定元素？
[英]How to remove a specific element from an array which is inside of an object?
问题描述
I am learning how to manage application state via a shopping list exercise. 
我正在学习如何通过购物清单练习来管理应用程序状态。 Per the instructions, I have an array inside an object where I store any items I add: 按照说明，我在对象内部有一个数组，用于存储添加的所有项目：
var state = {
items: []
};
To modify state I use this function: 要修改state ，请使用以下功能：
var addItem = function(state, item) {
state.items.push(item);
};
which is called later via an event listener (and added to the DOM via renderList , not shown here): 稍后通过事件监听器调用（并通过renderList添加到DOM，此处未显示）：
$('#js-shopping-list-form').submit(function(event){
event.preventDefault();
addItem(state, $('#shopping-list-entry').val());
renderList(state, $('.shopping-list'));
});
How can I remove a specific item from the array inside my state object? 如何从state对象内的数组中删除特定项目？ Essentially I want to reverse the sequence above when the user clicks on <button class="shopping-item-delete"> . 本质上，当用户单击<button class="shopping-item-delete">时，我想颠倒上述顺序。
Here's a demo of the final solution: https://thinkful-ed.github.io/shopping-list-solution/ 这是最终解决方案的演示： https : //thinkful-ed.github.io/shopping-list-solution/
HTML 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>
4 个解决方案
解决方案1
2 已采纳 2016-12-14 01:05:12
You could create a function as follows: 您可以创建一个函数，如下所示：
var deleteItem = function(state, item) {
var index = state.items.indexOf(item);
if (index > -1) {
state.items.splice(index, 1);
}
};
Note that the method indexOf is not supported in Internet Explorer 7 and 8. 请注意，Internet Explorer 7和8不支持indexOf方法。
解决方案2
0 2016-12-14 01:04:09
If you know the index of the item you can use. 如果您知道该项目的索引，则可以使用。 You can determine the index by value of item 您可以通过项目的值确定索引
state.items.splice(indexOfItemToRemove, 1);
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
解决方案3
0 2016-12-14 01:07:40
There are a couple of ways to remove elements from Arrays: 有两种方法可以从数组中删除元素：
shift will remove the first item from the beginning shift将删除开头的第一项
pop will remove the last item from the end. pop将从末尾删除最后一个项目。
splice allows you to remove an element at a desired location splice使您可以在所需位置删除元素
Note that all of these will modify the original array (they work "in-place") as opposed to returning a new array. 请注意，所有这些都将修改原始数组（它们在“原位”工作），而不是返回新数组。
解决方案4
0 2016-12-14 01:08:19
You may loop over the items 您可以在项目上循环
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;
}
}
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.