mapの最大の特徴は、配列から新しい配列を取得することで、その配列の各要素は、提供された関数を1回呼び出したときの戻り値となります。
前の文章が中心です。
言い換えれば、配列から新しい配列を取得するときはいつでも、マップを関連付けることができます。
ほとんどの場合、mapの関数に引数を1つ渡すだけで十分です。
アプリケーションのシナリオは以下の通りです。
配列の各要素の2乗を求めます。
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// [1, 4, 9, , ]
var results = arr.map(pow);
配列の各要素を文字列に変換
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// ['1', '2', '3', '4', '5', '6', '7', '8', '9']
var results2 = arr.map(String);
配列内のオブジェクトの再フォーマット
配列の各項目がオブジェクトであるときに、操作を実行することです。または、オブジェクトの値に変更を加えます。
var kvArray = [
{ key: 1, value: 10 },
{ key: 2, value: 20 },
{ key: 3, value: 30 }
];
// [{1: 10}, {2: 20}, {3: 30}]
var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
マップを離散配列で使用する場合
マップの走査は、現在の値が未定義の場合、直接未定義を返します。
// [2,4,,,8]
[1,2,,,4].map(item=>item*2)
文字列は、マップと組み合わせて新しい配列を生成することもできます。
たとえば、文字列の各文字に対応する ASCII コードの配列を取得するには、次のようにします。
var map = Array.prototype.map;
var a = map.call("Hello World", function(x) {
return x.charCodeAt(0);
});
// a [, , , , ]
クラス配列は、マップを使用して新しい配列を生成することもできます。
例えば、選択されたすべてのオプションの値を取得して印刷します：
var ele = document.querySelectorAll("select option:checked");
var values = Array.prototype.map.call(ele, function(obj) {
return obj.value;
});
<!-- res -->
var res = ["1", "2", "3"].map(parseInt);
気をつけないと、[1,2,3]と言ってしまうかもしれません。
ポイント：マップのコールバックには複数のパラメータがあり、cur、index、curIndexの合計3つのパラメータがあります。
parseInt は2つの引数を取ることができるので、2つ目の引数である index が渡されるため、上記は [1, NaN, NaN] となります。改良されたメソッド
["1", "2", "3"].map( item => parseInt(item));
``
マップメソッドの手書き実装
こちらの公式方がより権威があります。こちらは近似ロジックの簡単な実装です。
Array.prototype.map = function(fn) {
let res = [];
// thisは現在の配列
let curArr = this;
for (let i = 0; i < curArr.length; i++) {
let value = curArr[i];
if (typeof value !== "undefined") {
let mappedValue = fn(value, i, curArr);
res[i] = mappedValue;
}
}
return res;
};
引用
この記事は基本的に文書の要約に基づいています。
