Question

我有一个存储在localStorage中的数组，如下所示：

[
  {
    "location": "westcliff, uk",
    "stopover": true
  },
  {
    "location": "westcliff, uk",
    "stopover": true
  },
  {
    "location": "southend, uk",
    "stopover": true
  },
  {
    "location": "Leigh-on-sea, uk",
    "stopover": true
  }
]

我有一个按钮，当我点击它时，它将在该数组中查找localtion:，它将从数组中删除该对象，然后再次存储在localstorage中。

按钮代码如下所示：

$(document).on('click', ".cart-del", function() {   
    var retrievedObject2 = localStorage.getItem('waypoints');
    var parsedObject2 = JSON.parse(retrievedObject2);
    var result2 = parsedObject2.filter(function(x){return x.location !== "westcliff, uk"; });
    var setLoc2 = JSON.stringify(result2);
    localStorage.setItem('waypoints', setLoc2);
}):

一切正常。

我遇到的问题是，当点击该按钮时，它会删除所有＆＃34; westcliff, uk＆＃34;对象

我需要做的是每次点击只删除1个对象！

有人可以就此问题提出建议吗？

提前致谢。

修改

我尝试了这个，但这并没有从数组中删除任何内容：

    $(document).on('click', ".cart-del", function() { 

    var retrievedObject2 = localStorage.getItem('waypoints');
    var parsedObject2 = JSON.parse(retrievedObject2);

    for(var i = 0; i < parsedObject2.length; i++){
    if(parsedObject2[i].text == "westcliff, uk"){
    parsedObject2.splice(i, 1);
    break;
    }
    }



    var result2 = parsedObject2;    

    var setLoc2 = JSON.stringify(result2);
    localStorage.setItem('waypoints', setLoc2);
    }):

Answer 1

这是因为您正在使用filter，因此无法提前退出，因此它可能不适合此用例。相反，你可以使用常规循环。这是一个例子。

＆＃13;

var a = [
  {text : "foo", n : 1 },
  {text : "foo", n : 2 }
];
for(var i = 0; i < a.length; i++){
  if(a[i].text == "foo"){
    a.splice(i, 1);
    break;
  }
}
console.log(a);

＆＃13;

使用findIndex的整洁方法：

＆＃13;

var a = [
  {text : "foo", n : 1 },
  {text : "foo", n : 2 }
];

a.findIndex((obj, i) => {
  if(obj.text === "foo"){
    a.splice(i,1);
    return true;
  }
});

console.log(a);

＆＃13;

Answer 2

您可以使用find方法代替过滤方法

parsedObject2.find(function(x,e){
   if(x.location == "westcliff, uk")
     {
       return x.splice(e,1)
     }
 });

Javascript：从存储在localStorage中的数组中删除对象？

2 个答案: