One place for hosting & domains

      Cara Menggunakan .map() untuk Melakukan Iterasi Item Array di JavaScript


      Pengantar

      Mulai dari forloop yang klasik hingga metode forEach(), berbagai teknik dan metode digunakan untuk melakukan iterasi set data dalam JavaScript. Salah satu metode paling populer adalah metode .map(). .map() menciptakan array dengan memanggil fungsi spesifik pada setiap item di array induk. .map() adalah metode nonmutasi yang menciptakan array baru, yang merupakan kebalikan dari metode mutasi, yang hanya membuat perubahan terhadap array yang memanggil.

      Metode ini dapat memiliki banyak penggunaan saat digunakan bersama array. Dalam tutorial ini, Anda akan menyaksikan empat penggunaan bermanfaat dari .map() di JavaScript: memanggil fungsi elemen array, mengubah string menjadi array, merender daftar di dalam pustaka JavaScript, dan memformat ulang objek array.

      Prasyarat

      Tutorial ini tidak memerlukan pengodean apa pun, tetapi jika Anda tertarik mengikuti contoh, Anda dapat menggunakan baik Node.js REPL atau alat pengembang dari peramban.

      Langkah 1 — Memanggil Fungsi pada Setiap Item dalam Array

      .map() menerima fungsi panggil kembali sebagai salah satu argumennya, dan satu parameter penting dari fungsi itu adalah nilai saat ini dari item yang sedang diproses oleh fungsi tersebut. Ini adalah parameter yang diperlukan. Dengan parameter ini, Anda dapat memodifikasi setiap item dalam suatu array dan menciptakan fungsi baru.

      Berikut adalah contohnya:

      const sweetArray = [2, 3, 4, 5, 35]
      const sweeterArray = sweetArray.map(sweetItem => {
          return sweetItem * 2
      })
      
      console.log(sweeterArray)
      

      Keluaran ini tercatat pada konsol:

      Output

      [ 4, 6, 8, 10, 70 ]

      Ini dapat disederhanakan lebih jauh untuk membuatnya lebih bersih dengan:

      // create a function to use
      const makeSweeter = sweetItem => sweetItem * 2;
      
      // we have an array
      const sweetArray = [2, 3, 4, 5, 35];
      
      // call the function we made. more readable
      const sweeterArray = sweetArray.map(makeSweeter);
      
      console.log(sweeterArray);
      

      Keluaran yang sama tercatat pada konsol:

      Output

      [ 4, 6, 8, 10, 70 ]

      Memiliki kode seperti sweetArray.map(makeSweeter) membuat kode Anda sedikit lebih mudah terbaca.

      Langkah 2 — Mengubah String Menjadi Array

      .map() dikenal sebagai bagian dari prototipe array. Dalam langkah ini, Anda akan menggunakannya untuk mengubah suatu string menjadi suatu array. Anda tidak mengembangkan metode untuk bekerja dengan string di sini. Alih-alih, Anda akan menggunakan metode khusus .call().

      Segala sesuatu dalam JavaScript adalah suatu objek, dan metode adalah fungsi yang melekat pada objek-objek ini. call() memungkinkan Anda untuk menggunakan konteks dari satu objek ke objek lainnya. Oleh karena itu, Anda akan menyalin konteks dari .map() dalam suatu array ke suatu string.

      .call() dapat diberikan argumen dari konteks yang akan digunakan dan parameter untuk argumen dari fungsi aslinya.

      Berikut adalah contohnya:

      const name = "Sammy"
      const map = Array.prototype.map
      
      const newName = map.call(name, eachLetter => {
          return `${eachLetter}a`
      })
      
      console.log(newName)
      

      Keluaran ini tercatat pada konsol:

      Output

      • [ "Sa", "aa", "ma", "ma", "ya" ]

      Di sini, Anda menggunakan konteks dari .map() pada suatu string dan memberikan argumen dari fungsi yang diharapkan .map().

      Ini berfungsi seperti metode .split() dari suatu string, hanya bahwa setiap karakter string individual dapat dimodifikasi sebelum dikembalikan dalam suatu array.

      Langkah 3 — Merender Daftar dalam Pustaka JavaScript

      Pustaka JavaScript seperti React menggunakan .map() untuk merender item di dalam suatu daftar. Namun, ini memerlukan sintaks JSX, karena metode .map() dibungkus dalam sintaks JSX.

      Berikut adalah contoh dari komponen React:

      import React from "react";
      import ReactDOM from "react-dom";
      
      const names = ["whale", "squid", "turtle", "coral", "starfish"];
      
      const NamesList = () => (
        <div>
          <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
      );
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<NamesList />, rootElement);
      

      Ini adalah komponen tanpa kondisi dalam React, yang merender div dengan suatu daftar. Item daftar individual yang dirender menggunakan .map() untuk melakukan iterasi terhadap nama-nama yang awalnya diciptakan oleh array. Komponen ini dirender menggunakan ReactDOM di elemen DOM dengan Id dari root.

      Langkah 4 — Memformat Ulang Objek Array

      .map() dapat digunakan untuk melakukan iterasi objek dalam suatu array dan, dengan cara yang serupa seperti array tradisional, memodifikasi konten dari setiap objek individu dan memberikan array yang baru. Modifikasi ini dilakukan berdasarkan apa yang dikembalikan dalam fungsi callback.

      Berikut adalah contohnya:

      const myUsers = [
          { name: 'shark', likes: 'ocean' },
          { name: 'turtle', likes: 'pond' },
          { name: 'otter', likes: 'fish biscuits' }
      ]
      
      const usersByLikes = myUsers.map(item => {
          const container = {};
      
          container[item.name] = item.likes;
          container.age = item.name.length * 10;
      
          return container;
      })
      
      console.log(usersByLikes);
      

      Keluaran ini tercatat pada konsol:

      Output

      [ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

      Di sini, Anda memodifikasi setiap objek di dalam array menggunakan tanda kurung dan notasi titik. Kasus penggunaan ini dapat digunakan untuk memproses atau memadatkan data yang diterima sebelum disimpan atau diurai di aplikasi bagian depan.

      Kesimpulan

      Dalam tutorial ini, kita telah membahas empat penggunaan metode .map() dalam JavaScript. Dalam kombinasi dengan metode lain, fungsionalitas dari .map() dapat diperluas. Untuk informasi lebih lanjut, lihat artikel Cara Menggunakan Metode Array dalam JavaScript: Metode Iterasi dari kami.



      Source link

      Comment utiliser .map() pour Iterate via Array Items dans JavaScript


      Introduction

      De la forloop classique à la méthode forEach(), diverses techniques et méthodes sont utilisées pour itérer à travers des ensembles de données en JavaScript. L’une des méthodes les plus populaires est la méthode .map(). .map() crée un tableau à partir de l’appel d’une fonction spécifique sur chaque élément du tableau parent. .map() est une méthode non mutante qui crée un nouveau tableau par opposition aux méthodes mutantes, qui ne font que modifier le tableau appelant.

      Cette méthode peut avoir de nombreux usages lorsqu’on travaille avec des tableaux. Dans ce tutoriel, nous examinerons quatre utilisations importantes de .map() en JavaScript : appel d’une fonction d’éléments de tableau, conversion de chaînes de caractères en tableaux, rendu de listes dans des bibliothèques JavaScript et reformatage d’objets de tableau.

      Conditions préalables

      Ce tutoriel ne nécessite aucun codage, mais si vous souhaitez suivre les exemples, vous pouvez soit utiliser le Node.js REPL, soit recourir à des outils de développement de navigateur.

      Étape 1 – Appeler une fonction sur chaque élément d’un tableauélément

      .map() accepte une fonction de rappel comme l’un de ses arguments, et un paramètre important de cette fonction est la valeur actuelle de l’élément traité par la fonction.  Il s’agit d’un paramètre obligatoire. Avec ce paramètre, vous pouvez modifier chaque élément d’un tableau et créer une nouvelle fonction.

      Voici un exemple :

      const sweetArray = [2, 3, 4, 5, 35]
      const sweeterArray = sweetArray.map(sweetItem => {
          return sweetItem * 2
      })
      
      console.log(sweeterArray)
      

      Cette sortie est enregistrée sur la console :

      Output

      [ 4, 6, 8, 10, 70 ]

      Il est possible de la simplifier encore un peu pour la rendre plus claire :

      // create a function to use
      const makeSweeter = sweetItem => sweetItem * 2;
      
      // we have an array
      const sweetArray = [2, 3, 4, 5, 35];
      
      // call the function we made. more readable
      const sweeterArray = sweetArray.map(makeSweeter);
      
      console.log(sweeterArray);
      

      La même sortie est enregistrée sur la console :

      Output

      [ 4, 6, 8, 10, 70 ]

      Avoir un code comme sweetArray.map(makeSweeter) rend votre code un peu plus lisible.

      Étape 2 – Convertir une chaîne de caractères en un tableau

      .map() est connu pour faire partie du prototype de tableau. Dans cette étape, vous l’utiliserez pour convertir une chaîne de caractères en un tableau.  Vous ne développez pas ici la méthode afin qu’elle fonctionne pour des chaînes de caractères. Au contraire, vous utiliserez la méthode spéciale .call()

      Tout ce qui est en JavaScript est un objet, et les méthodes sont des fonctions attachées à ces objets. .call() vous permet d’utiliser le contexte d’un objet sur un autre. Par conséquent, vous copieriez le contexte de .map() dans un tableau sur une chaîne.de caractères.

      .call() peut être des arguments transmis du contexte à utiliser et des paramètres pour les arguments de la fonction d’origine.

      Voici un exemple :

      const name = "Sammy"
      const map = Array.prototype.map
      
      const newName = map.call(name, eachLetter => {
          return `${eachLetter}a`
      })
      
      console.log(newName)
      

      Cette sortie est enregistrée sur la console :

      Output

      • [ "Sa", "aa", "ma", "ma", "ya" ]

      Ici, vous avez utilisé le contexte de .map() sur une chaîne de caractères et passé un argument de la fonction que .map() attend.

      Elle fonctionne comme la méthode .split() d’une chaîne, à la différence près que chaque caractère de la chaîne peut être modifié avant d’être renvoyé dans un tableau.

      Étape 3 – Rendu des listes dans la bibliothèque JavaScript

      Les bibliothèques JavaScript comme React utilisent .map() pour rendre les éléments en une liste. Cela nécessite toutefois une syntaxe JSX, car la méthode .map() est enveloppée dans la syntaxe JSX.

      Voici un exemple d’une composante React :

      import React from "react";
      import ReactDOM from "react-dom";
      
      const names = ["whale", "squid", "turtle", "coral", "starfish"];
      
      const NamesList = () => (
        <div>
          <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
      );
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<NamesList />, rootElement);
      

      Il s’agit d’un élément apatride dans React qui rend une div avec une liste.  Les différents éléments de la liste sont rendus à l’aide de .map() pour itérer sur le tableau de noms initialement créé. Ce composant est rendu à l’aide de ReactDOM sur l’élément DOM avec Id of root.

      Étape 4 – Reformater les objets de tableau

      .map() peut être utilisé pour itérer à travers des objets dans un tableau et, de manière similaire aux tableaux traditionnels, modifier le contenu de chaque objet individuel et renvoyer un nouveau tableau.  Cette modification est effectuée en fonction de ce qui est renvoyé dans la fonction de rappel.

      Voici un exemple :

      const myUsers = [
          { name: 'shark', likes: 'ocean' },
          { name: 'turtle', likes: 'pond' },
          { name: 'otter', likes: 'fish biscuits' }
      ]
      
      const usersByLikes = myUsers.map(item => {
          const container = {};
      
          container[item.name] = item.likes;
          container.age = item.name.length * 10;
      
          return container;
      })
      
      console.log(usersByLikes);
      

      Cette sortie est enregistrée sur la console :

      Output

      [ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

      Ici, vous avez modifié chaque objet du tableau en utilisant la notation par parenthèses et points. Ce cas d’utilisation peut être utilisé pour traiter ou condenser les données reçues avant qu’elles ne soient sauvegardées ou analysées sur une application frontale.

      Conclusion

      Dans ce tutoriel, nous avons examiné quatre utilisations de la méthode .map() en JavaScript. En combinaison avec d’autres méthodes, la fonctionnalité de .map() peut être étendue. Pour plus d’informations, consultez notre article Comment utiliser les méthodes de tableau en JavaScript : Méthodes d’itération.



      Source link

      filter() Array Method in JavaScript


      Introduction

      The filter() Array method creates a new array with elements that fall under a given criteria from an existing array:

      var numbers = [1, 3, 6, 8, 11];
      
      var lucky = numbers.filter(function(number) {
        return number > 7;
      });
      
      // [ 8, 11 ]
      

      The example above takes the numbers array and returns a new filtered array with only those values that are greater than seven.

      Filter syntax

      var newArray = array.filter(function(item) {
        return condition;
      });
      

      The item argument is a reference to the current element in the array as filter() checks it against the condition. This is useful for accessing properties, in the case of objects.

      If the current item passes the condition, it gets sent to the new array.

      Filtering an array of objects

      A common use case of .filter() is with an array of objects through their properties:

      var heroes = [
          {name: “Batman”, franchise: “DC”},
          {name: “Ironman”, franchise: “Marvel”},
          {name: “Thor”, franchise: “Marvel”},
          {name: “Superman”, franchise: “DC”}
      ];
      
      var marvelHeroes =  heroes.filter(function(hero) {
          return hero.franchise == “Marvel”;
      });
      
      // [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]
      

      Additional Resources

      For more details on filter() see MDN Reference.

      Filter is only one of several iteration methods on Arrays in JavaScript, read How To Use Array Iteration Methods in JavaScript to learn about the other methods like map() and reduce().



      Source link