JavaScript マップの使用方法 - .map()

古典的な for ループから forEach() メソッドまで、JavaScript でデータセットを反復処理するためにさまざまな技術やメソッドが使用されます。最も一般的なメソッドの 1 つは .map() メソッドです。 .map() は、親配列内の各項目に対して特定の関数を呼び出して配列を作成します。 。地図（） は、新しい js 配列を作成する非突然変異メソッドです。 呼び出し元の配列のみを変更する変更メソッド。

このメソッドは、配列を操作するときにさまざまな用途に使用できます。このチュートリアルでは、.map() の 4 つの注目すべき使用法を見ていきます。 JavaScript の場合: 配列要素の関数の呼び出し、文字列の変換 配列への変換、JavaScript ライブラリのリストのレンダリング、および再フォーマット 配列オブジェクト。

配列内の各項目に対して JS 関数を呼び出す方法

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

例を示します:

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

この出力は、 console:

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) のようなコードを使用すると、コードがもう少し読みやすくなります。

JS 文字列を次のように変換する方法Array

.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() メソッドと同様に機能しますが、個々の文字列文字を変更する前に変更できる点が異なります。

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() を使用して名前配列を反復処理してレンダリングされます。このコンポーネントは、ルートの ID を持つ DOM 要素で ReactDOM を使用してレンダリングされます。

JavaScript 配列オブジェクトを再フォーマットする方法

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

この出力は、 console:

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

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

以上がJavaScript マップの使用方法 - .map()の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。