One place for hosting & domains

      JavaScript の配列項目から反復するための .map() の使用方法


      はじめに

      古典的な forloop からforEach()メソッドまで、JavaScript のデータセットから反復するためにさまざまなテクニックとメソッドを使用します。最も一般的なメソッドの1つは、.map() メソッドです。.map() は、親配列内の各項目に特定の関数を呼び出すことから配列を作成します。配列の呼び出しだけを変化させる非変異メソッドに反するものとして、.map( ) は新しい配列を作成する非変異メソッドです。

      このメソッドには、配列で作業するときに多くの用途がある場合があります。このチュートリアルでは、JavaScript の .map() の 4 つの注目に値する使用を見てみましょう。配列要素の呼び出し、文字列を配列に変換、ライブラリのレンダリングリスト、配列オブジェクトの再フォーマットを行います。

      前提条件

      このチュートリアルではコーディングは必要ありませんが、例とともに次のものに興味がある場合、Node.js REPL またはブラウザ開発者ツールを使用することもできます。

      ステップ 1 — 配列内の各項目の関数を呼び出す

      .map() はコールバック関数を引数の 1 つとして受け入れ、その関数の重要なパラメータは関数によって処理される項目の現在の値です。これは必要なパラメータです。このパラメータにより、配列内の各項目を変更し、新しい関数を作成できます。

      次に例を示します。

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

      この出力はコンソールにログインします。

      Output

      [ 4, 6, 8, 10, 70 ]

      これにより、さらに簡素化できます。

      // 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);
      

      同様の出力はコンソールにログインします。

      Output

      [ 4, 6, 8, 10, 70 ]

      sweetArray.map(makeSweeter) のようなコードがあなたのコードを少し読みやすくします。

      ステップ 2 — 文字列を配列に変換

      .map() は配列プロトタイプに属することが知られています。このステップでは、文字列を使用して配列に変換します。ここでは文字列の機能のメソッドを開発しません。むしろ、特別な.call() メソッドを使用します。

      JavaScript のすべてはオブジェクトであり、メソッドはこうしたオブジェクトに付随する関数です。.call() により、別のオブジェクトのコンテキストを使用できます。したがって、配列の .map() のコンテキストを文字列にコピーします。

      .call() は、使用するコンテキストの引数と元の関数の引用のパラメータを渡すことができます。

      次に例を示します。

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

      この出力はコンソールにログインします。

      Output

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

      ここでは、文字列の .map() のコンテキストを使用して、.map() が予期する関数の引数を渡しています。

      この関数は、文字列の .split() メソッドのようなもので、配列に戻す前に各文字列の文字が変更できるだけです。

      ステップ 3 — JavaScript ライブラリのレンダリングリスト

      React のような JavaScript ライブラリは、リストの項目をレンダリングするために .map() を使用します。しかし、.map() メソッドは JSX 構文に含まれるため、これは JSX 構文を必要とします。

      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);
      

      これは、React のステートレスなコンポーネントであり、リストにより div をレンダリングします。各リスト項目は、最初に作成された名前の配列を繰り返すため、.map() を使用してレンダリングされます。このコンポーネントは、rootID を使用して DOM 要素の ReactDOM を使用します。

      ステップ 4 — 配列オブジェクトの再フォーマット

      .map() は、配列のオブジェクトを反復するために使用し、従来の配列に似た方法で、各オブジェクトの内容を変更し新しい配列を戻します。この変更は、コールバック関数で戻されるものに基づいて行われます。

      次に例を示します。

      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);
      

      この出力はコンソールにログインします。

      Output

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

      ここでは、ブラケットとドット表記を使用して、配列の各オブジェクトを修正します。このユースケースは、フロントエンドアプリケーションで保存または解析する前に、受信したデータを処理または縮約するために使用できます。

      まとめ

      このチュートリアルでは、JavaScript の .map() メソッドの 4 つの使用を見てきました。他のメソッドと組み合わせて、.map() の機能は拡張できます。詳しくは、JavaScript: 反復メソッドの記事にある配列メソッドの使用方法を参照してください。



      Source link

      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

      Verwenden von .map() zur Iteration durch Array-Elemente in JavaScript


      Einführung

      Von der klassischen forloop– bis zur forEach()-Methode werden verschiedene Techniken und Methoden verwendet, um durch Datensätze in JavaScript zu iterieren. Eine der beliebtesten Methoden ist die .map()-Methode. .map() erstellt ein Array durch den Aufruf einer bestimmten Funktion für jedes Element im übergeordneten Array. .map() ist eine nicht mutierende Methode, die ein neues Array erzeugt, im Gegensatz zu mutierenden Methoden, bei denen nur Änderungen am aufrufenden Array vorgenommen werden.

      Diese Methode kann bei der Arbeit mit Arrays viele Anwendungen haben. In diesem Tutorial behandeln wir vier bemerkenswerte Verwendungsmöglichkeiten von .map() in JavaScript: Aufrufen einer Funktion von Array-Elementen, Konvertieren von Zeichenfolgen in Arrays, Rendern von Listen in JavaScript-Bibliotheken und Neuformatieren von Array-Objekten.

      Voraussetzungen

      Dieses Tutorial erfordert keine Programmierung, aber wenn Sie die Beispiele mitverfolgen möchten, können Sie entweder das Node.js REPL oder Browser-Entwicklertools verwenden.

      Schritt 1 — Aufrufen einer Funktion für jedes Element in einem Array

      .map() akzeptiert eine Callback-Funktion als eines ihrer Argumente und ein wichtiger Parameter dieser Funktion ist der aktuelle Wert des Elements, das von der Funktion verarbeitet wird. Dies ist ein erforderlicher Parameter. Mit diesem Parameter können Sie jedes Element in einem Array ändern und eine neue Funktion erstellen.

      Hier ist ein Beispiel:

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

      Diese Ausgabe wird in der Konsole protokolliert:

      Output

      [ 4, 6, 8, 10, 70 ]

      Um sie sauberer zu gestalten, kann sie weiter vereinfacht werden mit:

      // 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);
      

      Die gleiche Ausgabe wird in der Konsole protokolliert:

      Output

      [ 4, 6, 8, 10, 70 ]

      Durch Verwendung von Code wie sweetArray.map(makeSweeter) wird Ihr Code etwas lesbarer.

      Schritt 2 — Konvertieren einer Zeichenfolge in ein Array

      .map() ist dafür bekannt, zum Array-Prototyp zu gehören. In diesem Schritt verwenden Sie es, um eine Zeichenfolge in ein Array zu konvertieren. Sie entwickeln hier nicht die Methode, die für Zeichenfolgen funktioniert. Vielmehr verwenden Sie die spezielle Methode .call().

      In JavaScript ist alles ein Objekt und Methoden sind Funktionen, die an diese Objekte angehängt sind. Mit .call() können Sie den Kontext eines Objekts auf ein anderes Objekt anwenden. Sie würden also den Kontext von .map() in einem Array in eine Zeichenfolge kopieren.

      .call() können Argumente des zu verwendenden Kontexts und Parameter für die Argumente der ursprünglichen Funktion übergeben werden.

      Hier ist ein Beispiel:

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

      Diese Ausgabe wird in der Konsole protokolliert:

      Output

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

      Hier haben Sie den Kontext von .map() auf einer Zeichenfolge verwendet und ein Argument der Funktion übergeben, die .map() erwartet.

      Dies funktioniert wie die .split()-Methode einer Zeichenfolge, nur dass jedes einzelne Zeichen einer Zeichenfolge geändert werden kann, bevor es in ein Array zurückgegeben wird.

      Schritt 3 — Rendern von Listen in JavaScript-Bibliotheken

      JavaScript-Bibliotheken wie React verwenden .map(), um Elemente in einer Liste zu rendern. Dies erfordert jedoch die JSX-Syntax, da die .map()-Methode in JSX-Syntax eingehüllt ist.

      Hier ist ein Beispiel für eine React-Komponente:

      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);
      

      Dies ist eine zustandslose Komponente in React, die ein div mit einer Liste rendert. Die einzelnen Listenelemente werden mit .map() gerendert, um über das ursprünglich erstellte Namens-Array zu iterieren. Diese Komponente wird mit ReactDOM auf dem DOM-Element mit der Id von root gerendert.

      Schritt 4 — Neuformatieren von Array-Objekten

      .map() kann verwendet werden, um durch Objekte in einem Array zu iterieren und, ähnlich wie bei herkömmlichen Arrays, den Inhalt jedes einzelnen Objekts zu ändern und ein neues Array zurückzugeben. Diese Änderung erfolgt anhand dessen, was in der Callback-Funktion zurückgegeben wird.

      Hier ist ein Beispiel:

      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);
      

      Diese Ausgabe wird in der Konsole protokolliert:

      Output

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

      Hier haben Sie jedes Objekt im Array mit der Klammer- und Punktnotation geändert. Dieser Anwendungsfall kann zur Verarbeitung oder Kondensierung empfangener Daten verwendet werden, bevor sie in einer Frontend-Anwendung gespeichert oder geparst werden.

      Zusammenfassung

      In diesem Tutorial haben wir vier Verwendungsmöglichkeiten der Methode .map() in JavaScript betrachtet. In Kombination mit anderen Methoden kann die Funktionalität von .map() erweitert werden. Weitere Informationen finden Sie in unserem Artikel Verwenden von Array-Methoden in JavaScript: Iterationsmethoden.



      Source link