JSは配列を書きました.map ()

概要
この記事では、配列を説明します.マップ機能は、その使用法であり、それが詳細にどのように動作するかのより深い理解を得るために真のカスタム機能を作成することによってその動作を再現します.

マップ関数

用途

関数の書き換え

資源

結論

1マップ関数
Arrayのmap関数は、配列の各要素をそれぞれ別のものに変換する機能的な方法です.
基本的に、この関数は、開発者が提供するコールバック関数と、オプションのthisarg(コールバックでこれを使用する値)を入力します.次の署名があります.

Array.map(callbackFn(currentElement, currentIndex, currentArray), thisArg)

つの入力を受け付けます.

callbackfn :配列の要素内の任意の演算を実行するために開発者が提供する関数.これは、要素がマップされている新しい意図された値を返す必要があります.
この関数は3つの引数を受け取ります:

CurrentElement :反復される現在の要素.

CurrentIndex :反復される要素の現在のインデックス.

CurrentArray :現在の配列オブジェクト.

この値は、指定したコールバックfnによってこれを使用する.オプションの引数です.

この関数の戻り値は、すべてのマップされた要素を含む新しい配列です.

使用法
この簡単な例では、数値を正方形にする関数をマップのコールバックとして使用します.数の配列を与えられて、要素の各々はマップ操作の結果として真新しい配列のその二乗された値にマップされます.
簡単のため、THISARGは省略された.

/* Defines a squaring function to be used as a callback argument */
function squareFn(currentElement, index, currentArray){
   return currentElement**2;
}

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(squareFn);
/* Prints the brand new generated list */
console.log(squaredNumbers);
/* output: [1, 4, 9, 16, 25] */

面白いgotcha:

オプションのパラメータを使用したい場合は、コールバック関数定義を標準的な方法で行うようにしてください.function myFunc(){} ), 矢印関数式ではありません(const myFunc = () => {} ). この関数は、矢印の関数がそのコンテキストをその字句スコープにバインドしているため、指定したコールバック内で正しく動作するように、この値をバインドするために必要です.

関数の書き換え
あなたは魔法のどのような種類のコールバック関数に引数の値を提供する疑問がありますか?
マップ機能が何をするかを知ることは、それがフードの下でどのように働くかについてより良い理解を得るためにその行動を複製する新しい機能でそれを再現することが可能です.これは、次の実装でJavaScript配列オブジェクトに新しいカスタム関数を追加することによって行うことができます.

Array.prototype.customMap = function(callback, thisArg) {
    /* Sets the "this" context to be used within the callback function, defaults to the array which this function was called. */
    const _this = thisArg || this;
    const mappedArr = [];
    /* For each element, the callback function is called passing the provided context for "this" keyword */
    for(let i = 0; i < this.length; i++) {
        mappedArr.push(callback.call(_this, this[i], i, this));
    }
    return mappedArr;
};

以前に行われたマップコールを置き換えることで、新しいCustomMap関数をテストできます.同じ出力を表示する必要があります.

const squaredNumbers = numbers.customMap(squareFn);

この実装はブラウザによって実装されたネイティブのものとは異なるかもしれません.

リソース
参考にして

MDN - Array.map

MDN - Callback function

結論
この記事は、配列の地図機能がフードの下でどのように働くかをより深く理解することを目的としました.map関数の“magic”は、関数の元の動作に従って実装を再現することによってdeystifiedされました.