JavaScript – Ray Cardio Tag 2

Hallo zusammen und willkommen zurück zu einem weiteren Tag mit Wes Bos‘ JavaScript30! Okay... seit meinem letzten Beitrag sind über 2 Wochen vergangen und das ist ziemlich traurig. Abgesehen davon habe ich bei meinem jetzigen Job gekündigt und sie haben mich in die Enge getrieben, sodass ich in letzter Zeit nicht so viel Zeit hatte, an meinem Programmieren zu arbeiten ... aber jetzt, wo ich offiziell Teilzeit bin, arbeite ich bei Ihnen Sie können darauf wetten, dass diese Beiträge regelmäßiger und möglicherweise vielfältiger erscheinen, da ich neben diesem auch Zeit haben werde, an anderen Projekten zu arbeiten. Sie sind jedoch nicht hierher gekommen, um Updates zu meinem Leben zu erhalten. Sie sind hier, um mehr über diesen Kurs zu erfahren! Also fangen wir an!

Array Cardio Tag 2 war NICHTS im Vergleich zum ersten Tag. Ich werde nicht lügen. Angesichts des Verlaufs der ersten hatte ich große Angst vor dieser Herausforderung. Beim ersten Kurs habe ich ständig gegoogelt und bin durch die Reifen gesprungen. Es fühlte sich wirklich wie ein Training an, während dies eher eine Dehnübung oder vielleicht eine Yoga-Sitzung war. Der erste Teil von Array Cardio Tag 2 umfasste die Verwendung von Array.prototype.some() und Array.protoype.every(). Uns wurde ein Objekt in einem Array gegeben, das eine Liste von Personen und deren Geburtsjahre enthielt. Anhand dieser Informationen wurden wir gebeten, herauszufinden, ob mindestens eine Person über 19 Jahre alt war, und dann, ob alle Personen über 19 Jahre alt waren.

const people = [
      { name: 'Wes', year: 1988 },
      { name: 'Kait', year: 1986 },
      { name: 'Irv', year: 1970 },
      { name: 'Lux', year: 2015 }
    ];
    // Some and Every Checks
    // Array.prototype.some() // is at least one person 19 or older?
    const isAdult = people.some(person => ((new Date())
  .getFullYear()) - person.year >= 19 )

  console.log({isAdult})
    // Array.prototype.every() // is everyone 19 or older?
    const areAdult = people.every(person => {
      const currentYear = (new Date()).getFullYear();
      return currentYear - person.year >= 19
    }
  )
  console.log(areAdult)

Dieser Teil der Herausforderung hat mir ein verdammt gutes Gefühl gegeben, da werde ich nicht lügen. Nach einer kurzen Google-Suche hatte ich meine Antwort zur Verwendung von Array.prototype.some() und diese galt auch direkt für .every(). Ich habe das völlig umgehauen und hatte das Gefühl, dass ich diese Herausforderung in Rekordzeit meistern könnte. Es stellte sich heraus, dass ich sowohl Recht als auch Unrecht hatte...

Der zweite und irgendwie letzte Teil dieser Herausforderung umfasste Array.prototype.find() und Array.prototype.findIndex(). Uns wurde ein weiteres Objekt innerhalb eines Arrays zugewiesen, aber dieses Mal enthielt es eine Liste mit Kommentaren für eine Art Restaurantbewertung, die alle ihre eigenen ID-Nummern hatten, um sie unterscheiden zu können. Genau wie zuvor zeigte mir eine schnelle Google-Suche, wie man .find() verwendet und wie man es gut nutzt, aber es scheint, dass es nicht genau das war, wonach Wes gesucht hat. Ich habe .find() nur verwendet, während ich console.log verwendet habe, um auf eine von mir erstellte Funktion zu verweisen, die die ID basierend auf der angegebenen Nummer aufrief. Ich denke, ich könnte argumentieren, dass es ähnlich war wie das, was er getan hat ... irgendwie ... wissen Sie, wenn man bedenkt, dass wir beide zum gleichen Ergebnis gekommen sind. Aber ich weiß es nicht, ich glaube, in diesem Fall gefällt mir mein Code besser als seiner.

    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423

    function hasId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.find(hasId))

    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423
    function thisId(idNumber) {
      return idNumber.id === 823423
    }
    console.log (comments.findIndex(thisId))

    const index = comments.findIndex(comment => comment.id === 823423)

    const newComments = [
      ...comments.slice(0, index),
      ...comments.slice(index + 1)
    ]
    console.table(newComments)

Es stellte sich auch heraus, dass mir nicht klar war, was er von uns für den letzten Teil der Herausforderung wollte. Während wir findIndex() verwenden ließen, wollte er auch, dass wir den Kommentar mit derselben ID löschen, die wir gerade zuvor gefunden hatten. Ich habe gerade VScode durchgesehen und den Kommentar manuell gelöscht. Um fair zu sein, dachte ich, er wollte uns nur zeigen, was es bringen würde, wenn der Kommentar nicht mehr da wäre. Es stellte sich heraus, dass er wollte, dass wir entweder .splice oder .slice verwenden, um den Kommentar über neuen Code zu löschen (was für diese Übung sinnvoller ist) und uns dann auf das neue Array ohne diesen spezifischen Kommentar zugreifen lassen. Also ... ja ... ich bin nicht an diesen Punkt gekommen, weil ich es einfach manuell gelöscht habe. Aber ich ging zurück und programmierte mit ihm zusammen, um zu sehen, wie das mit neuen Codezeilen möglich sein würde.

Da ist es also. Array Cardio Tag 2. Ich bin erleichtert zu wissen, dass es keinen Tag 3 davon gibt. Damit will ich nicht sagen, dass ich nicht mehr Übung mit Arrays und der Art und Weise, wie man mit ihnen interagieren kann, gebrauchen könnte. So weit dieser Kurs schon gekommen ist, haben diese bisher wahrscheinlich am wenigsten Spaß gemacht. Halten Sie Ausschau nach der nächsten Lektion, die ich behandeln werde. Hoffentlich erscheint sie entweder diese Woche oder Anfang nächster Woche, da ich dann mehr Zeit habe! Wie auch immer, ich hoffe, Sie sind bereit für JavaScript30: Spaß mit HTML5 Canvas!

Das obige ist der detaillierte Inhalt vonJavaScript – Ray Cardio Tag 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!