关于使用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]])


我的问题是,当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(...);
});


或者尝试使用Array.prototype.find()(以及jsPerf.com上关于find vs some的额外信息)：

if(!ville_arr.find(i => i[1] === el.codesPostaux[0])) {
ville_arr.push([el.nom, el.codesPostaux[0]]);
console.log(ville_arr);
}