使用 Array.includes() 和测试重复项目的 JavaScript 问题

Question

我有一个输入，它使用 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]])

我的问题是，当 API 获取相同的结果时，我的数组中有重复项，这就是我尝试这样做的原因:

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

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

      }

但我最后还是得到了重复项，我猜这与数组的唯一索引有关？也许是别的东西？

Answer 1

Array.prototype.includes对对象进行引用相等性检查。

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

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

也许您可以改为存储和检查邮政编码？

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

一种节省时间的方法是使用一组邮政编码而不是数组(因为设置查找时间是 O(1)):

if (!zipcodesSet.has(el.codesPostaux[0])) {
  zipcodesSet.add(el.codesPostaux[0]);
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

如果您决定只使用ville_arr，那么您也可以使用Array.prototype.every 来完成您需要的工作。 (或 Array.prototype.some ):

// this will return true if every place in ville_arr
// does not have the zipcode from the response
if (ville_arr.every(([, zipcode]) => zipcode !== el.codesPostaux[0])) {
  ville_arr.push([el.nom, el.codesPostaux[0]]);
}

您还可以潜在地在您的对象上调用 JSON.stringify 以从某个对象创建相同的字符串并保存可行的字符串，因为 includes 对基元进行相等比较字符串等值。