One place for hosting & domains

      Arrays

      Grundlegendes zum Rendern von Arrays in React


      Einführung

      In diesem Artikel erfahren Sie, wie eine Anordnung in React gerendert wird und welche bewährten Verfahren beim Rendern verschiedener Elemente innerhalb von Komponenten anzuwenden sind.

      Einer der Vorteile der Verwendung einer modernen Websprache wie JavaScript ist, dass Sie die Erzeugung von HTML schnell automatisieren können.

      Wenn Sie so etwas wie eine Schleife gegen eine Anordnung oder ein Objekt verwenden, müssen Sie das HTML pro Element nur einmal schreiben.  Besser noch, alle zukünftigen Bearbeitungen müssen nur einmal angewendet werden.

      Rendern mehrerer Elemente

      Um mehrere JSX-Elemente in React zu rendern, können Sie eine Anordnung mit der .map() -Methode durchlaufen und ein einzelnes Element zurückgeben.

      Unten durchlaufen Sie die reptiles-Anordnung und geben ein li-Element für jedes Element in der Anordnung zurück. Sie können diese Methode verwenden, wenn Sie ein einzelnes Element für jedes Element in der Anordnung anzeigen möchten:

      function ReptileListItems() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return reptiles.map((reptile) => <li>{reptile}</li>);
      }
      

      Die Ausgabe sieht in etwa folgendermaßen aus:

      Output

      - alligator - snake - lizard

      Im nächsten Beispiel prüfen Sie, warum Sie einen eindeutigen key zu einer Liste von Elementen hinzufügen möchten, die von einer Anordnung gerendert werden.

      Rendern einer Sammlung von Elementen innerhalb einer Komponente

      In diesem Beispiel durchlaufen Sie eine Anordnung und erstellen wie im vorherigen Beispiel eine Reihe von Listenelementkomponenten.

      Zu Beginn aktualisieren Sie den Code, um die <ol>-Komponente zum Speichern der <li>-Elemente zu verwenden. Die <ol>-Komponente erstellt eine geordnete Liste der Elemente:

      function ReptileList() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return (
          <ol>
            {reptiles.map((reptile) => (
              <li>{reptile}</li>
            ))}
          </ol>
        );
      }
      

      Wenn Sie jedoch auf die Konsole schauen, sehen Sie eine Warnung, dass jedes untergeordnete Element in einer Anordnung oder einem Iterator einen eindeutigen Schlüssel haben sollte.

      Warnung in der Konsole

      Die Warnung erscheint, da Sie beim Versuch, eine Sammlung innerhalb einer Komponente zu rendern, einen key hinzufügen müssen.

      In React wird ein eindeutiger key verwendet, um zu bestimmen, welche der Komponenten in einer Sammlung neu gerendert werden müssen. Durch das Hinzufügen eines eindeutigen keys wird verhindert, dass React bei jeder Aktualisierung die gesamte Komponente neu rendern muss.

      In diesem Schritt rendern Sie mehrere Elemente in einer Komponente und fügen einen eindeutigen key hinzu. Aktualisieren Sie den Code so, dass er einen key für die Listenelemente beinhaltet, um die Warnung zu beheben:

      function ReptileList() {
        const reptiles = ['alligator', 'snake', 'lizard'];
      
        return (
          <ol>
            {reptiles.map(reptile => (
              <li key={reptile}>{reptile}</li>
            ))}
          </ol>
        );
      }
      
      

      Nachdem Sie nun einen key hinzugefügt haben, wird die Warnung nicht mehr in der Konsole angezeigt.

      Im nächsten Beispiel sehen Sie, wie Sie benachbarte Elemente rendern können, ohne auf einen üblichen Syntaxfehler zu stoßen.

      Rendern benachbarter Elemente

      Um mehr als ein Element in einer Komponente zu rendern, müssen Sie einen Wrapper um diese Elemente hinzufügen.

      In diesem Beispiel geben Sie zunächst eine Liste von Elementen zurück, ohne eine Schleife durch eine Anordnung zu bilden:

      function ReptileListItems() {
        return (
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        );
      }
      

      Dadurch erhalten Sie einen schweren Fehler in der Konsole:

      Schwerer Fehler von React für benachbarte JSX-Elemente

      Um diesen Fehler zu beheben, müssen Sie den Block von li-Elementen in einem Wrapper einpacken. Für eine Liste können Sie diese in ein ol oder ul packen:

      function ReptileListItems() {
        return (
        <ol>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        </ol>
        );
      }
      

      Die angrenzenden <li>-Elemente werden jetzt in ein umschließendes Tag <ol> eingehüllt,und Sie werden keinen Fehler mehr sehen.

      Im nächsten Abschnitt werden Sie eine Liste mit Hilfe einer Fragment-Komponente in einem Wrapper rendern.

      Rendern benachbarter Elemente mit React.fragment

      Vor React v16.2 können Sie einen Block von Komponenten in ein <div>-Element einpacken. Dies würde zu einer Anwendung voller divs führen, die oft als “div soup” bezeichnet wird.

      Um dieses Problem zu beheben, hat React eine neue Komponente veröffentlicht, die als Fragment-Komponente bekannt ist:

      Wenn Sie eine Liste innerhalb eines umschließenden Tags rendern müssen, aber vermeiden möchten, dass Sie eine div benutzen, können Sie stattdessen React.Fragment verwenden:

      function ReptileListItems() {
        return (
        <React.Fragment>
           <li>alligator</li>
           <li>snake</li>
           <li>lizard</li>
        </React.Fragment>
        );
      }
      

      Der gerenderte Code enthält nur die li-Elemente, und die React.Fragment-Komponente wird nicht im Code angezeigt.

      JSX-Elemente innerhalb eines React.Fragment Wrapper gerendert

      Beachten Sie auch, dass mit React.fragment keine Notwendigkeit besteht, einen Schlüssel hinzuzufügen.

      Sie werden feststellen, dass das Schreiben von React.fragment mühsamer als das Hinzufügen einer <div> ist. Glücklicherweise hat das React-Team eine kürzere Syntax entwickelt, um diese Komponente zu repräsentieren. Sie können <> </> anstelle von <React.Fragment></React.Fragment> verwenden:

      function ReptileListItems() {
        return (
       <>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
       </>
        );
      }
      

      Zusammenfassung

      In diesem Artikel haben Sie verschiedene Beispiele für das Rendern von Anordnungen in einer React-Anwendung untersucht.

      Wenn Sie ein Element innerhalb einer anderen Komponente rendern, sollten Sie einen eindeutigen key verwenden und Ihre Elemente innerhalb eines Wrappers umfassen.

      Je nach Anwendungsfall können Sie einfache Listen erstellen, die in eine Fragment-Komponente gepackt werden und keinen Schlüssel benötigen.

      Um mehr über bewährte Praktiken in React zu erfahren, folgen Sie der vollständigen Reihe Wie man in React.js codiert auf DigitalOcean.



      Source link

      Vier Methoden zum Durchsuchen von Arrays in JavaScript


      In JavaScript gibt es viele nützliche Möglichkeiten, Elemente in Arrays zu finden. Sie könnten jederzeit auf die Basisschleife zurückgreifen, aber mit ES6+ gibt es eine Vielzahl von Methoden, um das Array in einer Schleife zu durchlaufen und das Gewünschte mit Leichtigkeit zu finden.

      Welche Methode wenden Sie bei so vielen verschiedenen Methoden an und in welchem Fall?  Wenn Sie zum Beispiel ein Array durchsuchen, möchten Sie wissen, ob das Element überhaupt in dem Array enthalten ist?  Benötigen Sie den Index des Elements oder das Element selbst?

      Bei jeder der verschiedenen Methoden, die wir behandeln werden, ist es wichtig zu verstehen, dass es sich bei allen um integrierte Methoden auf dem Array.Prototyp handelt. Das bedeutet, dass Sie sie einfach auf ein beliebiges Array mit Punktnotation verketten müssen.  Das bedeutet auch, dass diese Methoden nicht für Objekte oder etwas anderes als Arrays verfügbar sind (obwohl es Überschneidungen mit Strings gibt).

      Wir sehen uns die folgenden Array-Methoden an:

      beinhaltet

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.includes("thick scales"); // returns true
      

      Die .beinhaltet-Methode gibt einen booleschen Wert zurück und ist ideal, um Ihnen mitzuteilen, ob ein Element in einem Array existiert oder nicht.  Sie gibt eine einfache wahre oder falsche Antwort. Dies ist die grundlegende Syntax:

      arr.includes(valueToFind, [fromIndex]);
      

      Wie Sie in unserem Beispiel sehen, hatten wir nun nur einen Parameter – den valueToFind. Dies ist der Wert, der im Array übereinstimmt. Der optionale fromIndex ist eine Zahl, die anzeigt, welchen Index Sie mit der Suche beginnen möchten, (Standardwert ist 0, das gesamte Array wird durchsucht). Da das Element „thick scales“ also bei dem Index 0 liegt, wäre das folgende falsch: alligator.includes('thick scales', 1); , da es bei Index 1 und weiter mit der Suche beginnt.

      Jetzt gibt es einige wichtige Dinge zu beachten. Diese .beinhaltet() -Methode verwendet einen strengen Vergleich. Das bedeutet, dass aus dem obigen Beispiel Folgendes falsch zurückgegeben werden würde: alligator.includes('80'); das liegt daran, dass, obwohl 80 == '80' wahr ist, 80 === ‘80’ falsch ist – verschiedene Typen werden einem strengen Vergleich nicht standhalten.“

      find

      Wie unterscheidet sich .find() von der beinhaltet() Methode? Wenn wir in unserem Beispiel nur den Text „beinhaltet“ in „finden“ geändert haben, würden wir diesen Fehler erhalten:

      Uncaught TypeError: thick scales is not a function
      

      Das liegt daran, dass bei der Find-Methode eine Funktion übergeben werden muss.  Das liegt daran, dass die Suchmethode nicht einfach den einfachen Vergleichsoperator wie “beinhaltet()” verwenden wird. Stattdessen übergibt es jedes Element an Ihre Funktion und prüft, ob es wahr oder falsch zurückgibt.  Obwohl dies also funktioniert: alligator.find(() => 'thick scales'); würden Sie wahrscheinlich Ihren eigenen Vergleichsoperator in die Funktion setzen wollen, damit er alles Relevante zurückgibt.

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.find(el => el.length < 12); // returns '4 foot tail'
      

      Diese einfache Funktion in unserer Finden-Methode betrachtet jedes Element des Arrays mit dem Alias ‘el’, den wir ihm zugewiesen haben, und hält an, wenn das erste gefunden wurde, das wahr ist.  In unserem Fall hat wahr eine Längeneigenschaft von weniger als 12 (Zahlen haben keine Längeneigenschaft). Sie könnten diese Funktion natürlich so komplex gestalten wie Sie sie benötigen, so dass Ihr wahrer Zustand Ihren Anforderungen entspricht.

      Beachten Sie auch, dass dies nicht wahr zurückgegeben wurde. Die Finden-Methode gibt keinen Booleschen Wert zurück, sondern das erste übereinstimmende Element. Wenn es kein übereinstimmendes Element gibt, da es nichts gibt, das die in Ihrer Funktion definierten Kriterien erfüllt, wird es als undefined zurückgegeben. Beachten Sie auch, dass es das erste zurückgibt, wenn also mehr als ein Element im Array vorhanden ist, das den Kriterien entspricht, wird es nur die erste Instanz erhalten. Wenn es in unserem Beispiel eine weitere Zeichenfolge von Länge unter 12 nach „4 Fuß hoch“ gab, würde dies unser Ergebnis nicht ändern.

      In unserem Beispiel haben wir den Rückruf nur mit einem Parameter verwendet.  Sie können auch Parameter hinzufügen, um auf den Index des aktuellen Elements zu verweisen.  Ein weiterer Parameter kann das gesamte Array selbst sein, aber ich finde, dass dies selten verwendet wird. Hier ist ein Beispiel der Verwendung mit dem Index:

      alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall'
      

      Wir wissen, dass es in unserem Array 3 verschiedene Elemente gibt, die der ersten Bedingung entsprechen (typeof el === „string“). Wenn dies unsere Bedingung war, würde sie die erste zurückgeben, „thick scales“ . Der Unterschied ist jedoch, dass nur eine den Index von 2 hat und das ist „4 Fuß hoch“.

      Apropos Indizes, eine ähnliche Array-Methode ist .findIndex(). Diese Methode empfängt auch eine Funktion, aber wie Sie sich denken können, gibt sie den Index des übereinstimmenden Elements anstelle des Elements selbst zurück.

      indexOf

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.indexOf("rounded snout"); // returns 3
      

      Wie die .includes() Methode, verwendet .indexOf() einen strengen Vergleich , keine Funktion, wie wir bei der Methode .finden() gesehen haben. Aber im Gegensatz zu .includes() gibt es den Index des Elements zurück, anstatt einen Booleschen Wert. Sie können auch angeben, bei welchem Index im Array die Suche beginnen soll.

      Ich finde indexOf() sehr nützlich. Es ist schnell und einfach und kann Ihnen sagen, wo sich das Element im Array befindet und ob es existiert.  Wie wird Ihnen mitgeteilt, ob das Element existiert? Grundsätzlich können wir wissen, dass das Element existiert, wenn es eine positive Zahl zurückgibt, und wenn es -1 zurückgibt, wissen wir, dass das Element nicht existiert.

      alligator.indexOf("soft and fluffy"); // returns -1
      alligator.indexOf(80); // returns 1
      alligator.indexOf(80, 2); // returns -1
      

      Und wie Sie sehen können, obwohl wir die Methoden find() oder findIndex() erhalten können, um uns die gleichen Informationen zu geben, ist dies viel weniger zu schreiben. Wir brauchen keine Vergleichsfunktion zu schreiben, da sie bereits innerhalb der Methode indexOf liegt.

      Genau wie die anderen gibt indexOf() jetzt auch den Index des ersten gefundenen übereinstimmenden Elements zurück.  JavaScript gibt uns eine alternative Array-Methode .lastIndexOf(). Wie Sie sich denken können, macht dies dasselbe wie indexOf() aber ausgehend vom letzten Index des Arrays und in umgekehrter Reihenfolge. Sie können auch einen zweiten Parameter angeben, aber denken Sie daran, dass sich die Indexes nicht ändern, nur weil Sie eine andere Methode verwenden.

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
      
      alligator.indexOf(80); // returns 1
      alligator.lastIndexOf(80); // returns 4
      alligator.indexOf(80, 2); // returns 4
      alligator.lastIndexOf(80, 4); // returns 4
      alligator.lastIndexOf(80, 3); // returns 1
      

      Bonus: filter

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
      
      alligator.filter(el => el === 80); //returns [80, 80]
      

      Die filter()-Methode ist wie die find()-Methode, d. h. sie erfordert eine übermittelte Funktion und eine Bedingung für das, was zurückgegeben wird.  Der Hauptunterschied ist, dass filter() immer ein Array zurückgibt, auch wenn es nur ein übereinstimmendes Element gibt.  Aber sie gibt alle übereinstimmenden Elemente zurück, während find() nur die erste Übereinstimmung zurückgibt.

      Das Wichtige am Filter ist, dass er alle Elemente zurückgibt, die Ihren Kriterien entsprechen.  Es kann auch nur ich sein, aber ich kann mich täuschen, wenn ich denke: „Das sind die Elemente, die ich herausfiltern möchte”, wenn Sie in Wahrheit die Elemente angeben, die Sie hineinfiltern möchten.

      Zusammenfassung

      Die einfachste Methode, die ich verwende, wenn ich etwas suche, ist die find()-Methode, aber wie Sie sehen können, hängt das wirklich von Ihrem Fall ab.

      • Müssen Sie nur wissen, ob sie existiert?  Verwenden Sie .includes().
      • Müssen Sie das Element selbst besorgen?  Verwenden Sie .find() oder .filter() für mehrere Elemente.
      • Müssen Sie den Index des Elements finden? Verwenden Sie .indexOf() oder findIndex() für eine komplexere Suche.

      Die Arrays in den Beispielen waren hier sehr einfach. Sie können sich mit einem Array von Objekten konfrontiert sehen. Im Folgenden finden Sie einige sehr einfache Beispiele, um durch den Dschungel vernetzter Objekte zu navigieren:

      const jungle = [
        { name: "frog", threat: 0 },
        { name: "monkey", threat: 5 },
        { name: "gorilla", threat: 8 },
        { name: "lion", threat: 10 }
      ];
      
      // break the object down in order to use .includes() or .indexOf()
      const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion']
      console.log(names.includes("gorilla")); // returns true
      console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done
      
      // methods we can do on the array of objects
      console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5}
      console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}]
      



      Source link

      Quatro métodos de pesquisa através de arrays em JavaScript


      Em JavaScript, existem muitas maneiras úteis de encontrar itens em Arrays. Você pode sempre recorrer ao loop for básico, mas com ES6+ existem muitos métodos para fazer loop sobre um array e encontrar o que você precisa com facilidade.

      Com tantos métodos diferentes, qual deles você usa e em qual caso? Por exemplo, ao pesquisar através de um array, você deseja saber se o elemento está na matriz? Você precisa do índice do elemento ou do elemento em si?

      Com cada método diferente que vamos abordar, é importante entender que todos eles são métodos integrados em Array.prototype. Isso significa que você simplesmente precisa encadeá-los em um array com notação de ponto. Isso também significa que esses métodos não estão disponíveis em objetos ou qualquer outra coisa além de Arrays (embora haja sobreposição com Strings).

      Veremos os seguintes métodos de Array:

      includes

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.includes("thick scales"); // returns true
      

      O método .includes() retorna um valor booleano e é perfeito para lhe dizer se um elemento existe ou não em um array. Ele dá uma resposta simples true ou false. Esta é a sintaxe básica:

      arr.includes(valueToFind, [fromIndex]);
      

      Agora, como você pode ver em nosso exemplo, tínhamos apenas um parâmetro – o valueToFind. Este é o valor a ser pesquisado na matriz. O fromIndex opcional é um número, indicando de qual índice você deseja começar a procurar (o padrão é 0, então todo o array é pesquisado). Assim, como em nosso exemplo o item ‘thick scales’ está no índice 0, o seguinte seria false: alligator.includes('thick scales', 1); uma vez que ele começa a pesquisar a partir do índice 1 em diante.

      Agora, há algumas coisas importantes a notar. Esse método .includes() usa comparação estrita. Isso significa que, a partir do exemplo acima, o seguinte retornaria false: alligator.includes('80'); isso é porque embora 80 == '80' seja verdadeiro, 80 === '80' é falso – diferentes tipos não passarão em uma comparação estrita.

      find

      Como o método.find() difere do método includes()? Se em nosso exemplo alterarmos o texto “includes” para “find”, obteremos esse erro:

      Uncaught TypeError: thick scales is not a function
      

      Isso é porque o método find requer que uma função seja passada. Isso é porque o método find não irá usar o operador de comparação simples como o “includes()” faz. Em vez disso, ele irá passar cada elemento em sua função e ver se ela retorna true ou false. Assim, embora isso funcione: alligator.find(() => 'thick scales'); você provavelmente gostaria de colocar seu próprio operador de comparação na função para que ele retorne qualquer coisa relevante.

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.find(el => el.length < 12); // returns '4 foot tail'
      

      Essa função simples em nosso método find faz uma busca em cada elemento da array, com o alias ‘el’ que atribuímos e termina ao encontrar o primeiro resultado verdadeiro. Em nosso caso, verdadeiro é ter uma propriedade de comprimento menor que 12 (os números não têm uma propriedade de comprimento). É claro que você poderia tornar essa função tão complexa quanto necessário, fazendo com que sua condição verdadeira atendesse às suas necessidades.

      Observe também, isso não retornou true. O método find não retorna um booleano, mas, em vez disso, retorna o primeiro elemento .correspondente. Se não houver um elemento de correspondência – como em nada existe que atenda aos critérios definidos em sua função – ele irá retornar undefined. Observe também que ele retorna o primeiro, então se houver mais de um elemento no array que atende aos critérios, ele irá pegar apenas a primeira instância. Em nosso exemplo, se houvesse outra sequência de comprimento menor que 12 após ‘4 feet tall’ isso não alteraria nosso resultado.

      Em nosso exemplo, usamos o callback apenas com um parâmetro. Pode-se também adicionar parâmetros para fazer referência ao índice do elemento atual. Outro parâmetro pode ser o array inteiro em si, mas eu acho que isso raramente é usado. Aqui está um exemplo usando o index:

      alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall'
      

      Sabemos que em nosso array, existem 3 elementos diferentes que atendem à primeira condição (typeof el === ‘string’). Se essa fosse a nossa única condição, ele retornaria a primeira, ‘thick scales’. Mas a diferença é que, apenas um tem o índice de 2 e ele é ‘4 foot tall’.

      Por falar em índices, um método de array similar é .findIndex(). Esse método também recebe uma função, mas como você pode imaginar, ele retorna o índice do elemento correspondente em vez do próprio elemento.

      indexOf

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];
      
      alligator.indexOf("rounded snout"); // returns 3
      

      Como o método .includes(), o .indexOf() usa comparação estrita e não uma função como vimos com o método .find(). Mas, ao contrário do includes(), ele retorna o índice do elemento, em vez de um booleano. Você também pode indicar em qual índice do array iniciar a pesquisa.

      Eu acho que indexOf() é muito útil. Ele é rápido e fácil, pode lhe dizer onde o elemento está no array e se o elemento existe. Como ele lhe diz se o elemento existe? Basicamente, podemos saber que o elemento existe se ele retorna um número positivo, e se ele retornar -1, sabemos que o elemento não existe.

      alligator.indexOf("soft and fluffy"); // returns -1
      alligator.indexOf(80); // returns 1
      alligator.indexOf(80, 2); // returns -1
      

      E como você pode ver, embora pudéssemos usar os métodos find() ou findIndex() para nos dar a mesma informação, isso é muito menos para escrever. Não precisamos escrever uma função para comparação, pois ela já está dentro do método indexOf.

      Agora, assim como os outros, indexOf() também retorna o índice do primeiro elemento de correspondência que ele encontra. O JavaScript nos dá um método de array alternativo .lastIndexOf(). Como você pode imaginar, isso faz a mesma coisa que indexOf(), mas a partir do último índice do array e trabalhando para trás. Você também pode especificar um segundo parâmetro, mas lembre-se que os índices não alteram, só porque você está usando um método diferente.

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
      
      alligator.indexOf(80); // returns 1
      alligator.lastIndexOf(80); // returns 4
      alligator.indexOf(80, 2); // returns 4
      alligator.lastIndexOf(80, 4); // returns 4
      alligator.lastIndexOf(80, 3); // returns 1
      

      Bônus: filter

      const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80];
      
      alligator.filter(el => el === 80); //returns [80, 80]
      

      O método filter() é como o método find(), na medida em que ele requer uma função passada e uma condição para o que será retornado. A diferença principal é que, filter() retorna sempre um array, mesmo que haja apenas um elemento correspondente. Mas ele irá retornar todos os elementos correspondentes, enquanto que find() retorna apenas a primeira correspondência.

      O importante com o filtro é que ele retorna todos os elementos que correspondem aos seus critérios. Só poderia ser eu, mas posso ficar confuso, pensando “esses são os elementos que quero filtrar out”, quando sinceramente, você está indicando os elementos que você deseja filtrar in.

      Conclusão

      O método mais fácil que acho para usar ao pesquisar por algo é o método find(), mas como você pode ver, depende realmente do seu caso.

      • Você precisa saber apenas se ele existe? Use .includes().
      • Você precisa obter o elemento em si? Use .find(), ou .filter() para vários itens.
      • Você precisa encontrar o índice do elemento? Use .indexOf() ou findIndex() para uma pesquisa mais complexa.

      Os arrays nos exemplos aqui foram muito simples. Você pode encontrar-se com um array de objetos. Aqui abaixo estão alguns exemplos básicos para navegar pela selva de objetos aninhados:

      const jungle = [
        { name: "frog", threat: 0 },
        { name: "monkey", threat: 5 },
        { name: "gorilla", threat: 8 },
        { name: "lion", threat: 10 }
      ];
      
      // break the object down in order to use .includes() or .indexOf()
      const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion']
      console.log(names.includes("gorilla")); // returns true
      console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done
      
      // methods we can do on the array of objects
      console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5}
      console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}]
      



      Source link