Javascript 在推送到数组之前搜索多维数组，无重复数据

我正在尝试构建“愿望列表”功能。单击按钮时，它会将特定“属性”的名称和链接保存在本地存储的阵列中。然后，我将在页面上为用户输出这些内容

到目前为止，我唯一的问题是它总是插入属性名和链接，即使它已经存在于数组中。我需要创建一个检查，看看它是否已经存在，只有在找不到时才推它

这是一个有效的JSFIDLE。单击“保存”按钮并检查localStorage，您将看到数据已添加。但再次单击相同的按钮，您将再次看到它被添加

这是基本代码。它从最近单击的按钮获取属性名称和链接，从localStorage中的数组中提取数据，然后使用

。push

添加新数据，然后重新字符串化并将其添加回localStorage

var name = $(this).closest('.text-long').find('.intro-text h4').text();
var permalink = $(this).closest('.text-long').find('.button-slot a').attr('href');
var property = [name, permalink]; // create an array of the name + permalink
var wishlist = JSON.parse(localStorage.getItem("wishlist")); // get the wishlist from storage
wishlist.push(property); // append the new array into the wishlist from storage
localStorage.setItem('wishlist', JSON.stringify(wishlist)); // put the wishlist back in storage

我知道我需要对数组进行多维迭代，并寻找相同的

name

var。因此我从以下内容开始：

for (var i = 0; i < wishlist.length; i++) {
    var isPresent = ($.inArray(name, wishlist[i]));
}
if (isPresent == -1){
    wishlist.push(property);
    localStorage.setItem('wishlist', JSON.stringify(property));
}

因此，如果愿望列表为空，它仍将运行。但是，这似乎会混淆

名称

数据并覆盖数组。我很困惑

使用映射（键、值）对存储属性，以便使用

myMap.get(key)

在这里，我们来看看这篇详细的文章：

以你为例,

var myMap = new Map();
$('body').on('click', '.icon.heart button', function(e) {
    var name = $(this).closest('.text-long').find('.intro-text h4').text();
    var permalink = $(this).closest('.text-long').find('.button-slot a').attr('href');
    var property = [name, permalink];
    console.log(property);
    if (myMap.get(name) === null) {
        var wishlist = JSON.parse(localStorage.getItem("wishlist"));
        console.log('Wishlist from localStorage = ' + wishlist);
        wishlist.push(property);
        console.log(wishlist);
        localStorage.setItem('wishlist', JSON.stringify(wishlist));
        myMap.set(name, permalink);
    }
});

您还可以遍历映射以获得如下所有属性：

var mapIter = myMap[Symbol.iterator]();
console.log(mapIter.next().value); 

我希望这对你有用

使用映射（键、值）对存储属性，以便使用

myMap.get(key)

在这里，我们来看看这篇详细的文章：

以你为例,

var myMap = new Map();
$('body').on('click', '.icon.heart button', function(e) {
    var name = $(this).closest('.text-long').find('.intro-text h4').text();
    var permalink = $(this).closest('.text-long').find('.button-slot a').attr('href');
    var property = [name, permalink];
    console.log(property);
    if (myMap.get(name) === null) {
        var wishlist = JSON.parse(localStorage.getItem("wishlist"));
        console.log('Wishlist from localStorage = ' + wishlist);
        wishlist.push(property);
        console.log(wishlist);
        localStorage.setItem('wishlist', JSON.stringify(wishlist));
        myMap.set(name, permalink);
    }
});

您还可以遍历映射以获得如下所有属性：

var mapIter = myMap[Symbol.iterator]();
console.log(mapIter.next().value); 

---

我希望这对你有用

在将

属性

数组推送到

愿望列表

数组之前，必须检查

愿望列表

是否正确包含它。所以你可以这样做。让我们发明一个通用的

Array.prototype.compare（）

方法。然而，由于这将是一种通用方法，它还考虑了数组元素成为对象的可能性。因此，我们也有一个

对象.prototype.compare（）

（在本例中，我们不需要它，但知道它很好），下面是代码

Object.prototype.compare=函数（o）{
var ok=Object.keys（这个）；
返回typeof o==“object”&&ok.length==object.keys（o.length？ok.every（k=>this[k]==o[k]）：false；
};
Array.prototype.compare=函数（a）{
返回这个.every（（e，i）=>a[i]==“object”？a[i]的类型。比较（e）：a[i]==e）；
};
var button1=[“约克路32号梅尔顿路29号”http://localhost:8888/test-物业/物业/梅尔顿路29号/“]，
按钮2=[“约克路32号”http://localhost:8888/test-物业/物业/约克路32号/“]，
愿望列表=[]，
push2wl=btn=>wishlist.some（a=>a.compare（btn））？愿望列表：愿望列表。concat（[btn]）；//如果存在，返回未触及的愿望列表
愿望列表=按下2WL（按钮1）；
愿望列表=按下2WL（按钮2）；
愿望列表=按下2WL（按钮1）；//这不会被插入
愿望列表=按下2WL（按钮2）；//这不会被插入
控制台日志（愿望列表）

在将

属性

数组推送到

愿望列表

数组之前，必须检查

愿望列表

是否正确包含它。所以你可以这样做。让我们发明一个通用的

Array.prototype.compare（）

方法。然而，由于这将是一种通用方法，它还考虑了数组元素成为对象的可能性。因此，我们也有一个

对象.prototype.compare（）

（在本例中，我们不需要它，但知道它很好），下面是代码

Object.prototype.compare=函数（o）{
var ok=Object.keys（这个）；
返回typeof o==“object”&&ok.length==object.keys（o.length？ok.every（k=>this[k]==o[k]）：false；
};
Array.prototype.compare=函数（a）{
返回这个.every（（e，i）=>a[i]==“object”？a[i]的类型。比较（e）：a[i]==e）；
};
var button1=[“约克路32号梅尔顿路29号”http://localhost:8888/test-物业/物业/梅尔顿路29号/“]，
按钮2=[“约克路32号”http://localhost:8888/test-物业/物业/约克路32号/“]，
愿望列表=[]，
push2wl=btn=>wishlist.some（a=>a.compare（btn））？愿望列表：愿望列表。concat（[btn]）；//如果存在，返回未触及的愿望列表
愿望列表=按下2WL（按钮1）；
愿望列表=按下2WL（按钮2）；
愿望列表=按下2WL（按钮1）；//这不会被插入
愿望列表=按下2WL（按钮2）；//这不会被插入
控制台日志（愿望列表）你能展示一下我的代码示例是如何工作的吗？好的，你能展示一下我的代码是如何工作的吗？我已将其添加到新的JSFIDLE中。我不再在localStorage阵列中获取任何内容：在代码中，您没有在愿望列表中添加任何内容，因此在localStorage中没有任何内容。我试着运行你的代码，在点击save按钮后，它的名称和permalink var看起来都是空的。这里的代码工作正常：-我只需要关于如何将地图功能添加到此代码的建议。我已经修改了代码。检查映射中的值（存在或不存在）将决定是不在wishlist中推送属性，还是分别推送属性。您能用我的代码示例演示一下这一点吗？好的，您能用我的代码演示一下这一点吗？我已将其添加到新的JSFIDLE中。我不再在localStorage阵列中获取任何内容：在代码中，您没有在愿望列表中添加任何内容，因此在localStorage中没有任何内容。我试着运行你的代码，在点击save按钮后，它的名称和permalink var看起来都是空的。这里的代码工作正常：-我只需要关于如何将地图功能添加到此代码的建议。我已经修改了代码。检查映射中的值（存在或不存在）将确定是不在wishlist中推送属性，还是分别推送属性。是否可以