如何防止添加到Javascript數組的元素被覆蓋？

Question

我目前有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",
    ];

Answer 1

也許這樣做：

if (jQuery.inArray( $("#client-name").val(), clients ) == -1){
     clients.push($("#client-name").val())
 }

Answer 2

您可以使用includes來檢查數組中是否存在值，然后返回true或false ...

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