关于使用Array.includes（）和测试重复项的JavaScript问题

我有一个输入，它使用API根据插入的字母获取一些城市。API在每个

keyup

事件上启动，如下所示：

let ville_input = document.getElementById("search_immobilier_ville");
let ville_arr = [];

ville_input.addEventListener("keyup", () => {
  res_list.innerHTML = "";

  fetch("https://api.fr/communes?nom=" + ville_input.value)
    .then(res => {
      return res.json();
    })
    .then(data => {
      data.forEach(el => {
        if (
          el.codeDepartement == "971" &&
          el.nom
            .toUpperCase()
            .startsWith(ville_input.value.toUpperCase().trim())
        ) {
          if (!ville_arr.includes([el.nom, el.codesPostaux[0]])) {
            ville_arr.push([el.nom, el.codesPostaux[0]]);
            console.log(ville_arr);
          }
        }
      });
    })
    .catch(err => {
      // Doing stuff
    });
});

ville_arr.push([el.nom,el.codesPostaux[0]])

首先，我想将每个结果作为数组推送到一个数组中，如下所示：

let ville_input = document.getElementById("search_immobilier_ville");
let ville_arr = [];

ville_input.addEventListener("keyup", () => {
  res_list.innerHTML = "";

  fetch("https://api.fr/communes?nom=" + ville_input.value)
    .then(res => {
      return res.json();
    })
    .then(data => {
      data.forEach(el => {
        if (
          el.codeDepartement == "971" &&
          el.nom
            .toUpperCase()
            .startsWith(ville_input.value.toUpperCase().trim())
        ) {
          if (!ville_arr.includes([el.nom, el.codesPostaux[0]])) {
            ville_arr.push([el.nom, el.codesPostaux[0]]);
            console.log(ville_arr);
          }
        }
      });
    })
    .catch(err => {
      // Doing stuff
    });
});

ville_arr.push([el.nom,el.codesPostaux[0]])

我的问题是，当API获取相同的结果时，我将重复的项放入数组中，这就是我尝试此操作的原因：

if(!ville_arr.includes([el.nom,el.codesPostaux[0]])){

    ville_arr.push([el.nom,el.codesPostaux[0]])
    console.log(ville_arr)

      }

但我最终还是得到了重复项，我想这与数组的索引有关，它们是唯一的？也许是别的什么

试试这个：

const ville_input = document.getElementById('search_immobilier_ville');
let ville_arr = [];
ville_input.addEventListener('keyup', () => {
    res_list.innerHTML = '';

    fetch(`https://api.fr/communes?nom=${ville_input.value}`)
        .then(res => {

            // Clear old data if get new response
            ville_arr = [];

            return res.json();
        })
        .then(...)
        .catch(...);
});

或者尝试使用（以及关于jsPerf.com的额外信息）：

对对象执行引用相等检查

这意味着，即使推送相同形状的对象，它们也不是相同的引用，因为每个请求都会创建一个新对象

通常的模式是记住对象的某些唯一标识部分，比如id

也许你可以存储并检查zipcode

if (!zipcodes.includes(el.codesPostaux[0])) {
  zipcodes.push(el.codesPostaux[0]);
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

一种省时的方法是使用一组ZipCode而不是数组（因为集合查找时间为O（1））：

如果您决定只使用

ville_arr

，那么您需要的也可以使用（或）：

您还可以在对象上调用

JSON.stringify

，从某个对象创建相同的字符串并保存该字符串，因为

includes

对字符串等基本值进行相等比较。

数组#includes

不按值比较引用类型；它比较它们以检查它们的引用是否相同

例如，这将生成

false

：

var myArr=[[5,6]、[1,2]、[4,5]；
console.log（myArr.includes（[1,2]）；//false

另一种“老派”的方法可能是：声明一个对象（

o

），并使用从每个数组的内容生成的键向其添加子数组。然后，该对象将保持其自身的独特结构：

var o={d:{},add:function(nom,code){this.d[nom+code]=[nom,code]},
get:function(){return Object.values(this.d)}};

您可以使用

o.add(el.nom, el.codePosteaux[0]);

并使用从中检索唯一数组

o.get()

o.get()