如何防止添加到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);