JS.map()メソッドの使い方（配列メソッド）

この記事では、JavaScript の Array.map() メソッドについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

変更された要素を含む新しい配列を取得するために、配列を取得し、その子にいくつかの操作を適用する必要がある場合があります。

ループを使用して配列を手動で繰り返す代わりに、組み込みの Array.map() メソッドを使用するだけで済みます。

Array.map() メソッドを使用すると、コールバック関数を使用して配列を反復処理し、その要素を変更できます。その後、配列の各要素に対してコールバック関数が実行されます。

たとえば、次の配列要素があるとします。

let arr = [3, 4, 5, 6];

次に、配列の各要素を 3 で乗算する必要があるとします。次のように for でループを使用することを検討することもできます。

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

しかし、実際には Array.map() メソッドを使用して同じ結果を得ることができます。例を次に示します。

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

Array.map() メソッドは通常、上記のコードのように特定の数値を乗算するか、任意の値を適用するかにかかわらず、要素に何らかの変更を加えるために使用されます。必要となる可能性のあるその他のアクション。

オブジェクトの配列で map() を使用する方法

たとえば、firstName と lastName を格納するオブジェクトの配列があるとします。友達の値は次のようになります:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

配列の map() メソッドを使用して、firstName# の値を反復して結合できます。 ## と lastName は次のとおりです。

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

map() メソッドは複数の要素を渡します。コールバック関数に渡された map() パラメータをすべて見てみましょう。

map() メソッドの完全な構文

map() メソッドの構文は次のとおりです:

arr.map(function(element, index, array){  }, this);

function() このコールバックは各配列要素で呼び出され、map() メソッドは常に現在の element、現在の要素の index、および全体をマップします。 array オブジェクトが渡されました。

この

this パラメータはコールバック関数で使用されます。デフォルトでは、その値は 未定義です。たとえば、this 値を数値 80 に変更する方法は次のとおりです。

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(this) // 80
}, 80);

console.log() 興味がある場合は、

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

Array.map() メソッドについて知っておく必要があるのはこれだけです。通常、コールバック関数のパラメータは element のみを使用し、残りは無視します。これは私が日常のプロジェクトでよく行っていることです :)

英語の元のアドレス:

https://www.freecodecamp.org/news/javascript-map- how-to-use-the-js-map-function-array-method/

プログラミング関連の知識については、

プログラミング入門をご覧ください。 ！

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