如何防止添加到Javascript数组的元素被覆盖？

问题描述

我目前有addToClients() ，当按下按钮时，它将向clients数组添加一个新元素。 我想每当按下按钮时就将新值添加到clients ，并且即使在我们输入新元素之后也要在数组中保留该值（因此我可以使用jQuery的autocomplete功能）。
但是，现在每当我再次按Submit时，添加的前一个元素就会被新元素覆盖，因此我无法将其保留在数组中（FYI clients数组与包含这些代码的html文件位于单独的js文件中）。 我的执行过程中有什么问题吗？
html页面如下所示：

function addToClients(){
            if (!($("#client-name").val() in clients)){
                clients.push($("#client-name").val())
            }
        }

与这部分有关的HTML代码在这里：

<input type = "text"
                 id = "client-name"
                 onkeypress="auto()" 
                 placeholder="Client">
         <input type = "text" id = "reams" placeholder="#reams">
         <button id="btn"> Submit</button> 

这是链接到HTML的单独js文件中的数组

 clients = [
          "Shake Shack",
          "Toast",
          "Starbucks",
    ];

您可以使用includes来检查数组中是否存在值，然后返回true或false ...

 var arr = [1,4,7]; var added = 4; if(!arr.includes(added)) { arr.push(added); } console.log(arr);