Arrayに書き込み可能な有用な関数「map」

8328 ワード
JavaScript テキストリンク

Array.prototype.map()

  • mdnの定義
    "The map() method creates a new array populated with the results of calling a provided function on every element in the calling array."
    • =>独自の理解に従って説明すると、map()は、array内のすべての要素を迂回して所定の関数を呼び出す結果を含む新しいarrayを作成する方法である.
    =>アレイ内の各要素にアクセスし、関数を実行し、結果を収集して新しいアレイに戻る場合は、この関数を使用します.

    Syntax

    // Arrow function
map((element) => { /* ... */ })
map((element, index) => { /* ... */ })
map((element, index, array) => { /* ... */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function(element) { /* ... */ })
map(function(element, index) { /* ... */ })
map(function(element, index, array){ /* ... */ })
map(function(element, index, array) { /* ... */ }, thisArg)
  • callbackFn
    arrayの各要素には、パラメータとして呼び出されたコールバック関数があります.コールバック関数が実行されるたびに、返される値が新しい配列に追加されます.このコールバック関数には、以下のような様々なパラメータがあります.
  • element
    arrayで進行中の現在の要素を表します.
  • index
    arrayで行われている現在の要素を表すindex.
  • array
    mapは呼び出しの配列を表す.
  • thisArg (Optional)
    これはcallback関数の実行時に使用される値を意味します.

    • 戻り値


    map()を実行すると、各要素に対してコールバック関数を実行した結果を含む新しい配列が返されます.
    したがって、以下の場合、map()と比較してforeachまたはfor...ofを使ったほうがいいです.
  • 返された新しいアレイまたは
    • は使用されていません.
  • コールバック関数に戻り値がない場合、
    • (新しいarrayに戻っても使えないので!)

    📌はい。

    class Asset {
  constructor(name,shape,price) {
    this.name = name;
    this.shape = shape;
    this.price = price;
  }
}

const assetList = [
  new Asset('car', '🚗', 10000000),
  new Asset('house', '🏡',2000000000),
  new Asset('cash','💵', 3000000)
];

//Q. assetList에서 price만 담은 배열을 만들고 싶다면?
const priceList = assetList.map(asset => asset.price); 
console.log(priceList); //output: [10000000, 2000000000, 3000000]
    リファレンス
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
    SpringMVCがJSONに戻ってIEの中でダウンロードする問題を解決します
    pythonがwindowsの下でファイルIOErrorを作成した理由の1つ