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

Posted 2023-05-09

【中文标题】尽管 if （应该充当过滤器），但所有元素都推入数组

【英文标题】：All elements push into array despite if (should act as filter)

【发布时间】：2021-10-10 09:21:23

【问题描述】：

我的 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)

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

【问题讨论】：

到底是什么问题？

.find() 检测与表单中的输入具有相同数据的预订何时已在数组中。这个想法是，当它发生时，匹配的新保留将被忽略并且不会被推送到同一个数组中，但它不起作用。最后我有一个带有重复信息的数组

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

你认为你做。但是array.find() 中的reservation 显然是上一行中声明的对象。否则，你不能在代码后面做Object.values()。

我现在明白你的意思了，谢谢！问题是我不想比较输入中输入的所有信息，只是这三个部分。名称和 NR 可以相同，但日期、时间和比赛不能相同。我看到这样做，我最终做了两个不同的事情，再次感谢。

【参考方案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>

【参考方案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>

【参考方案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()) 

谢谢大家！