尽管 if （应该充当过滤器），但所有元素都推入数组

Question

我的 HTML 中有一个小表单，用于获取预订数据。对应的提交按钮与一个函数（saveReserve）相关联。这个想法是该函数可以获取数据并将其推送到数组中，但还可以检测何时已经进行了类似的预订，因此如果是这种情况，则将新的保留排除在外（不要将其推送到数组中）与相似的那个）。

问题是所有保留都是推送，即使它们是相同的，忽略 IF 元素：

let allReservation = [];
var NR = 0

const saveReserve = () => {
    var date= $("#date").val();    //These are the form inputs//
    var hour= $("#hour").val();
    var gameRes = $("#reserveG").val();
    NR++

   
    var reservation = ({date, hour, gameRes})
    let exist = allReservation.find(e=> e.date == reservation.date && e.hour == reservation.hour && e.gameRes == reservation.gameRes);
    console.log(reservation, exist)
    
    if (exist == undefined) {
        allReservation.push( NR + ": " + $("#nameR").val() + Object.values(reservation) );
        alert ("All good")
    }else{   
      alert ("Invalid, try again")
    }

    //nameR is the name input in the form//


    console.log (allReservation)
    $("input").val('') 
}
$('[type="submit"]').click(saveReserve)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" value="2021-08-05" id="date" />
<input type="number" id="hour" min="0" max="23" value="7" />
<input type="text" id="reserveG" value="A" />
<input type="text" id="nameR" value="B" />
<input type="submit" />

let allReservation = [];
var NR = 0

const saveReserve = () => {
    var date= $("#date").val();    //These are the form inputs//
    var hour= $("#hour").val();
    var gameRes = $("#reserveG").val();
    NR++

   
    var reservation = ({date, hour, gameRes})
    let exist = allReservation.find(e=> e.date == reservation.date && e.hour == reservation.hour && e.gameRes == reservation.gameRes);
    
    if (exist == undefined) {
        allReservation.push( NR + ": " + $("#nameR").val() + Object.values(reservation) ),
        alert ("All good") )
    }else{   
      alert ("Invalid, try again")
    }

    //nameR is the name input in the form//


    console.log (allReservation)
    $("input").val('') 
}

.find 起作用的唯一方法是在函数末尾添加：

allReservation.push (reservation)

然后它会识别出重复的元素并提醒它们，但也会将它们推入。

Answer 1

那么，如何使用 for 循环遍历所有保留并检查它是否在数组中。开始时，您的数组将为空，因此将添加第一个预订。下一个将检查当前的预留数组，如果它存在，则不要添加到它。有很多方法可以检查它是否存在于数组中。以下是一些展示方法的示例：

var num_array = [1, 2, 3, 4, 4]
var string_Array = ["a", "b", "c", "a", "b", "c"]
var obj_array = [ { index: 1, value: "a" }, { index: 2, value: "b" }, { index: 2, value: "b" } ]

var num_ourArray = [];
var string_ourArray = [];
var obj_ourArray = [];

//loop through number array
$.each(num_array, function(k, v){

   //first way to check
   if ($.inArray(v, num_ourArray) == -1) //so if it's NOT in the array
   {
      num_ourArray.push(v)
   }
   
   //second way to check
   /*if (num_ourArray.indexOf(v) == -1) //so if it's NOT in the array
   {
      num_ourArray.push(v)
   }*/
})

console.log(num_ourArray)

//loop through string array
$.each(string_Array, function(k, v){

   //first way to check
   if ($.inArray(v, string_ourArray) == -1) //so if it's NOT in the array
   {
      string_ourArray.push(v)
   }
})

console.log(string_ourArray)

//loop through object array
$.each(obj_array, function(k, v){

   //first way to check
   if (!obj_ourArray.some(item => item.index === v.index)) //so if it's NOT in the array
   {
      obj_ourArray.push(v)
   }
})

console.log(obj_ourArray)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

你可以简化你的逻辑：

let allReservation = [];
var NR = 0

class Reservation
{
    constructor(date, hour, gameRes, nr, nameR)
    {
        this.date = date;
        this.hour = hour;
        this.gameRes = gameRes;
        this.nr = nr;
        this.nameR = nameR;
    }

    get displayTitle()
    {
        return this.nr + ": " + this.nameR + this.date + this.hour + this.gameRes;
    }

    static is(a, b)
    {
        return a.date == b.date && a.hour == b.hour && a.gameRes == b.gameRes;
    }
}

const saveReserve = () => {
    var date= $("#date").val();    //These are the form inputs//
    var hour= $("#hour").val();
    var gameRes = $("#reserveG").val();
    NR++

   
    var reservation = new Reservation(date, hour, gameRes, NR, $("#nameR").val())
    let exist = allReservation.find(e=> Reservation.is(e, reservation));
    console.log(reservation, exist)
    
    if (exist == undefined) {
        allReservation.push(reservation);
        alert ("All good")
    }else{   
      alert ("Invalid, try again")
    }

    //nameR is the name input in the form//


    console.log (allReservation.map((reservation) => reservation.displayTitle))
    $("input").val('') 
}
$('button').click(saveReserve)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" value="2021-08-05" id="date" />
<input type="number" id="hour" min="0" max="23" value="7" />
<input type="text" id="reserveG" value="A" />
<input type="text" id="nameR" value="B" />
<button>Send</button>

Answer 3

答案在 shaedrich 的第一条评论中：

" 是这样的对象：{ date: "2021-08-05", hour: "7", gameRes: "A" } 而您将这样的字符串推送到 allReservations 数组："1: B2021- 08-05,7,A"。当然，这没有可比性"

所以我只是将所有数据放在同一个 var 中并像这样推送它，而不使用 Objetc.values()。还要简化 if，更改警报并添加第二个数组来推送错误：

var reservation  = ({NR, name, date, hour, gameRes})

let exist = allReservation.find(e => e.date=== reserva.date && e.hour=== reserva.hour && e.gameRes === reserva.gameRes);
  

  exist == undefined ? (allReservation.push(reservation), $("#alert-exito").fadeIn()) : (reservationError.push (reservation),$("#alert-error").fadeIn()) 

谢谢大家！