.map（）を使用してJavaScriptの配列アイテムを反復処理する方法

投稿日: 2022-04-20 2022-10-13
タグ: Development, javascript

序章

クラシックから for にループします forEach() JavaScript のデータセットを反復処理するために、メソッド、さまざまな手法およびメソッドが使用されます。最も人気のある方法の1つは .map() 方法。 .map() 親配列の各項目で特定の関数を呼び出して配列を作成します。 .map() は、呼び出し元の配列にのみ変更を加える変更メソッドとは対照的に、新しい配列を作成する非変更メソッドです。

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

前提条件

このチュートリアルではコーディングは必要ありませんが、例に沿ってフォローすることに興味がある場合は、 Node.jsREPLまたはブラウザー開発者ツールのいずれかを使用できます。

Node.jsをローカルにインストールするには、Node.jsをインストールしてローカル開発環境を作成する方法の手順に従います。
Chrome DevTools は、最新バージョンの GoogleChromeをダウンロードしてインストールすることで利用できます。

ステップ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() リスト内のアイテムをレンダリングします。ただし、これにはJSX構文が必要です。 .map() メソッドは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() 繰り返します names 配列。このコンポーネントは、DOM要素でReactDOMを使用してレンダリングされます。 Id の root.

ステップ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}
]

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

結論

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

getdocs

13036