ホームページ ウェブフロントエンド jsチュートリアル JavaScript配列のmapメソッドの使い方

JavaScript配列のmapメソッドの使い方

Jul 19, 2021 pm 06:46 PM
javascript 配列

JavaScript では、配列の map メソッドを使用して、配列の各要素に対して指定されたコールバック関数を呼び出し、結果を含む配列を返します。構文形式は「array.map(callbackfn[, thisArg」) ]); "。

JavaScript配列のmapメソッドの使い方

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript の map() メソッドは、配列の各要素に対して指定されたコールバック関数を呼び出し、結果を含む配列を返すことができます。具体的な使用法は次のとおりです。

array.map(callbackfn[, thisArg]);
ログイン後にコピー

パラメータの説明:

  • array: 必須パラメータ、配列オブジェクト。

  • callbackfn: 必須パラメータ。最大 3 つのパラメータを受け取ることができる関数。配列内の各要素に対して、map() メソッドは callbackfn 関数を 1 回呼び出します。

  • thisArg: オプションのパラメータ。callbackfn 関数の this キーワードによって参照できるオブジェクト。 thisArg を省略した場合は、this の値として未定義が使用されます。

map() メソッドは、各要素が関連付けられた元の配列要素のコールバック関数の戻り値である新しい配列を返します。 map() メソッドは、配列内の各要素に対して callbackfn 関数を 1 回 (インデックスの昇順で) 呼び出します。配列内の欠落している要素に対してはコールバック関数を呼び出しません。

map() メソッドは、配列オブジェクトに加えて、Arguments パラメーター オブジェクトなど、長さプロパティとインデックス付きプロパティ名を持つ任意のオブジェクトで使用できます。

コールバック関数の構文は次のとおりです。

function callbackfn (value, index, array);
ログイン後にコピー

ユーザーは、最大 3 つのパラメータを使用してコールバック関数を宣言できます。コールバック関数のパラメータの説明は次のとおりです。

  • #value: 配列要素の値。

  • index: 配列要素の数値インデックス。

  • array: 要素を含む配列オブジェクト。

map() メソッドは元の配列を直接変更しませんが、コールバック関数によって変更される可能性があります。マップメソッドの開始後に配列オブジェクトを変更して得られた結果を表に示します。

##Noコールバック関数で欠落している要素を埋めるために要素を追加します。 array はい、インデックスがコールバック関数に渡されていない場合は要素が変更されましたはい、要素が変更されていない場合はコールバック関数に渡されました配列から要素を削除要素がコールバック関数に渡されていない限り、いいえ
配列を変更するコールバック関数の影響
map メソッドの開始後の条件要素がメソッドに渡されるかどうかコールバック関数
配列の元の長さを超える要素を追加します

例 1

次の例では、map() メソッドを使用して配列をマップし、配列内の各要素の値を 2 乗し、それに PI 値を乗算し、返された円の面積値を新しい配列の要素値として取得し、最後に新しい配列を返します。

function f (radius) {
    var area = Math.PI * (radius * radius);
    return area.toFixed(0);
}
var a = [10,20,30];
var a1 = a.map(f);
console.log(a1);
ログイン後にコピー

例 2

次の例では、map() メソッドを使用して配列をマップし、配列内の各要素の値をしきい値で除算し、コールバック関数としきい値の両方がオブジェクトのプロパティとして存在する新しい配列を返します。このメソッドは、マップ内で thisArg パラメーターを使用する方法を示します。

var obj = {
    val : 10,
    f : function (value) {
        return value % this.val;
    }
}
var a = [6,12,25,30];
var a1 = a.map(obj.f, obj);
console.log(a1);  //6,2,5,0
ログイン後にコピー

例 3

次の例は、JavaScript 組み込みメソッドをコールバック関数として使用する方法を示しています。

var a = [9, 16];
var a1 = a.map(Math.sqrt);
console.log(a1);  //3,4
ログイン後にコピー
[推奨学習:

JavaScript 上級チュートリアル]

以上がJavaScript配列のmapメソッドの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

foreach ループを使用して PHP 配列から重複要素を削除するにはどうすればよいですか? foreach ループを使用して PHP 配列から重複要素を削除するにはどうすればよいですか? Apr 27, 2024 am 11:33 AM

foreach ループを使用して PHP 配列から重複要素を削除する方法は次のとおりです。配列を走査し、要素がすでに存在し、現在の位置が最初に出現しない場合は、要素を削除します。たとえば、データベース クエリの結果に重複レコードがある場合、このメソッドを使用してそれらを削除し、重複レコードのない結果を取得できます。

PHP 配列キー値の反転: さまざまな方法のパフォーマンス比較分析 PHP 配列キー値の反転: さまざまな方法のパフォーマンス比較分析 May 03, 2024 pm 09:03 PM

PHP の配列キー値の反転メソッドのパフォーマンスを比較すると、array_flip() 関数は、大規模な配列 (100 万要素以上) では for ループよりもパフォーマンスが良く、所要時間が短いことがわかります。キー値を手動で反転する for ループ方式は、比較的長い時間がかかります。

PHP 配列ディープ コピーの技術: さまざまな方法を使用して完璧なコピーを実現する PHP 配列ディープ コピーの技術: さまざまな方法を使用して完璧なコピーを実現する May 01, 2024 pm 12:30 PM

PHP で配列をディープ コピーする方法には、json_decode と json_encode を使用した JSON エンコードとデコードが含まれます。 array_map と clone を使用して、キーと値のディープ コピーを作成します。シリアル化と逆シリアル化には、serialize と unserialize を使用します。

PHP 配列の多次元ソートの実践: 単純なシナリオから複雑なシナリオまで PHP 配列の多次元ソートの実践: 単純なシナリオから複雑なシナリオまで Apr 29, 2024 pm 09:12 PM

多次元配列のソートは、単一列のソートとネストされたソートに分類できます。単一列のソートでは、array_multisort() 関数を使用して列ごとにソートできますが、ネストされたソートでは、配列を走査してソートするための再帰関数が必要です。具体的な例としては、製品名による並べ替えや、売上数量や価格による化合物の並べ替えなどがあります。

PHP 配列のディープ コピーのベスト プラクティス: 効率的な方法を発見する PHP 配列のディープ コピーのベスト プラクティス: 効率的な方法を発見する Apr 30, 2024 pm 03:42 PM

PHP で配列のディープ コピーを実行するためのベスト プラクティスは、 json_decode(json_encode($arr)) を使用して配列を JSON 文字列に変換し、それから配列に戻すことです。 unserialize(serialize($arr)) を使用して配列を文字列にシリアル化し、それを新しい配列に逆シリアル化します。 RecursiveIteratorIterator を使用して、多次元配列を再帰的に走査します。

データソートにおけるPHP配列グループ化機能の応用 データソートにおけるPHP配列グループ化機能の応用 May 04, 2024 pm 01:03 PM

PHP の array_group_by 関数は、キーまたはクロージャ関数に基づいて配列内の要素をグループ化し、キーがグループ名、値がグループに属する要素の配列である連想配列を返すことができます。

重複要素の検索における PHP 配列グループ化関数の役割 重複要素の検索における PHP 配列グループ化関数の役割 May 05, 2024 am 09:21 AM

PHP の array_group() 関数を使用すると、指定したキーで配列をグループ化し、重複する要素を見つけることができます。この関数は次の手順で動作します。 key_callback を使用してグループ化キーを指定します。必要に応じて、value_callback を使用してグループ化値を決定します。グループ化された要素をカウントし、重複を特定します。したがって、array_group() 関数は、重複する要素を見つけて処理するのに非常に役立ちます。

PHP 配列のマージおよび重複排除アルゴリズム: 並列ソリューション PHP 配列のマージおよび重複排除アルゴリズム: 並列ソリューション Apr 18, 2024 pm 02:30 PM

PHP 配列のマージおよび重複排除アルゴリズムは、元の配列を小さなブロックに分割して並列処理する並列ソリューションを提供し、メイン プロセスは重複排除するブロックの結果をマージします。アルゴリズムのステップ: 元の配列を均等に割り当てられた小さなブロックに分割します。重複排除のために各ブロックを並行して処理します。ブロックの結果をマージし、再度重複排除します。

See all articles