localStorage 对象数组：如果唯一，则仅将新对象推入数组答案

【问题标题】：localStorage Array of Objects: Only push new object into array if uniquelocalStorage 对象数组：如果唯一，则仅将新对象推入数组
【发布时间】：2016-05-30 21:50:17
【问题描述】：

我已经阅读了许多 Stack Overflow 问题，但似乎没有一个与我要解决的问题相关。

我有一个对象数组保存在 localStorage 中，如下所示（此示例仅包括两个）：

[
  {
    "image": "http://example-image.jpg",
    "restaurantName": "Elena's L'Etoile",
    "parentLocation": "London",
    "areaLocation": "West End of London",
    "pageLink": "http://example-address1"
},
  {
    "image": "http://example-image2.jpg",
    "restaurantName": "Pied a Terre",
    "parentLocation": "London",
    "areaLocation": "West End of London",
    "pageLink": "http://example-address2"
  }
]

每次用户访问页面时，都会从页面中提取数据，并创建一个如下所示的餐厅对象：

 var restaurant = {"image": $image, "restaurantName": $restaurantName, "parentLocation": $parentLocation, "areaLocation": $areaLocation, "pageLink": $pageLink};

然后将其存储到现有的对象数组中（如上）：

existingRestaurants.push(restaurant);

问题是如果用户两次访问同一个页面，重复的对象会被推送到数组中。如何确保只有唯一的对象被推送到数组中？

我研究过的方法：使用 $.each、$.inArray、$.grep。我认为最简单的方法是遍历现有Restaurants 数组中的所有对象，并将“restaurantName”键的值与新餐厅对象中的相应值进行比较。

但我在 Stack Overflow 上找不到其他类似的东西。

【问题讨论】：

从数组切换到以餐厅名称或页面链接为键的对象。
使用$.grep 或$.each 显示您的尝试，以便我们帮助指出问题。您可能试图比较两个不共享相同引用的对象。 $.inArray 绝对不适合这个
.filter 或 .some 可用于检查对象是否已存在。不需要 jquery 相关的东西。 some
@JohannesJander 是不是不能把数据的整体结构保持为一个数组来实现我想做的事情？

标签： javascript jquery json local-storage javascript-objects

【解决方案1】：

您可以在这里使用一些解决方案。第一个是保留当前的对象数组并在插入新对象之前扫描它们以查找重复的餐厅名称。这看起来像这样：

// assuming 'arr' is the variable holding your data
var matches = $.grep(arr, function(obj) {
    return obj.restaurantName == $restaurantName;
});

if (matches.length) {
    console.log('Duplicate found, item not added');
} else {
    var restaurant = {
        "image": $image,
        "restaurantName": $restaurantName,
        "parentLocation": $parentLocation,
        "areaLocation": $areaLocation,
        "pageLink": $pageLink
    };
    arr.push(restaurant);
}

Working example

另外，最好是，您可以将数据结构修改为一个对象，其中键是不能复制的值；在这种情况下，餐厅名称：

var arr = {
    "Elena's L'Etoile": {
        "image": "http://example-image.jpg",
        "parentLocation": "London",
        "areaLocation": "West End of London",
        "pageLink": "http://example-address1"
    },
    "Pied a Terre": {
        "image": "http://example-image2.jpg",
        "parentLocation": "London",
        "areaLocation": "West End of London",
        "pageLink": "http://example-address2"
    }
};

if (arr[$restaurantName]) {
    console.log('Duplicate found, item not added');
} else {
    var restaurant = {
        "image": $image,
        "parentLocation": $parentLocation,
        "areaLocation": $areaLocation,
        "pageLink": $pageLink
    };
    arr[$restaurantName] = restaurant;
}

Working example

【讨论】：

感谢您的帮助，罗里！我想我会选择第一个，因为现有结构在项目后期可能对我很重要。我能问一下为什么第二个例子更可取吗？
没问题，很高兴为您提供帮助。这是因为防止重复已根植于对象的键中，因此代码更短、更快，因为检查现有实体是一项更简单的任务。

【解决方案2】：

关联数组怎么样？不过，您必须选择一个键：

var restaurant0 = {"image": "http://example-image.jpg", "restaurantName": "Elena's L'Etoile", "parentLocation": "London", "areaLocation": "West End of London", "pageLink": "http://example-address1" };
var restaurant1 = {"image": "http://example-image2.jpg", "restaurantName": "Pied a Terre", "parentLocation": "London", "areaLocation": "West End of London", "pageLink": "http://example-address2"};

var existingRestaurants = {};
existingRestaurants["id0"] = restaurant0;
existingRestaurants["id1"] = restaurant1;

【讨论】：