私たちの毎日の開発では、配列の操作と変換は非常に一般的な操作です。例を見てみましょう：
コードコピーは次のとおりです。
var descolors = []、
srccolors = [
{r：255、g：255、b：255}、//白
{r：128、g：128、b：128}、//灰色
{r：0、g：0、b：0} //ブラック
];
for（var i = 0、ilen = srccolors.length; i <ilen; i ++）{
var color = srccolors [i]、
format = function（color）{
return math.round（color / 2）;
};
descolors.push（{
R：フォーマット（color.r）、
G：フォーマット（color.g）、
B：フォーマット（color.B）
}）;
}
//出力：
// [
// {r：128、g：128、b：128}、
// {r：64、g：64、b：64}、
// {r：0、g：0、b：0}
//];
console.log（descolors）;
上記の例から、すべての操作が比較的高い繰り返し率を持っていることがわかります。それを最適化する方法は？幸いなことに、ECMAScript 5はマップ方法を提供します。これを使用して、上記の例を最適化できます。
コードコピーは次のとおりです。
var srccolors = [
{r：255、g：255、b：255}、//白
{r：128、g：128、b：128}、//灰色
{r：0、g：0、b：0} //ブラック
]、、
descolors = srccolors.map（function（val）{
var format = function（color）{
return math.round（color/2）;
};
戻る {
R：フォーマット（VAL.R）、
G：フォーマット（Val.G）、
B：フォーマット（VAL.B）
}
}）;
//出力：
// [
// {r：128、g：128、b：128}、
// {r：64、g：64、b：64}、
// {r：0、g：0、b：0}
//];
console.log（descolors）;
上記の例から、MAPを使用してforループ部品を置き換えるために、各要素自体の実装ロジックについてのみ注意する必要があることがわかります。マップ方法の詳細については、ここをクリックしてください。
1。マップの基本的な定義：
array.map（callback [、thisarg]）;
MAPメソッドは、元の配列内の各要素に対して、コールバック関数を1回呼び出します。各実行後のリターン値をコールバックして、新しい配列を形成します。コールバック関数は、値のあるインデックスでのみ呼び出されます。値が割り当てられたことがない、または削除で削除されたインデックスは呼び出されません。
コールバック関数は、配列要素、要素インデックス、元の配列自体の3つのパラメーターで自動的に渡されます。
thisargパラメーターに値がある場合、これはコールバック関数が呼び出されるたびにthisargパラメーターにこのオブジェクトを指します。 thisargパラメーターが省略されている場合、または値がnullに割り当てられているか、未定義になっている場合、これはグローバルオブジェクトを指します。
MAPは、それを呼び出す元の配列自体を変更しません（もちろん、コールバックが実行されたときに元の配列を変更できます）。
配列がMAPメソッドを実行すると、最初のコールバックメソッドが呼び出される前に配列の長さが決定されます。 MAPメソッドの完全な操作中に、コールバック関数の操作が元の配列に要素を追加するか削除するかに関係なく。マップ方法はわかりません。配列要素が増加した場合、新しく追加された要素はマップによって通過しません。配列要素が減少した場合、MAPメソッドは、元の配列の長さが変更されておらず、アウトバウンドへの配列アクセスが発生するとも考えます。配列内の要素が変更または削除された場合、それらがコールバックに渡される値は、その瞬間に移動するマップメソッドの値です。
2.mapインスタンス：
コードコピーは次のとおりです。
//例1：文字列にマップメソッドを呼び出します
var result = array.prototype.map.call（ "hello world"、function（x、index、arr）{
// string {0： "h"、1： "e"、2： "l"、3： "l"、4： "o"、5： ""、6： "w"、7： "o"、8： "r"、9： "l"、10： "d"、長さ：11}}
console.log（arr）;
x.charcodeat（0）を返します。
}）;
//出力：[72、101、108、108、111、32、119、111、114、108、100]
console.log（result）;
上記の例は、文字列のMAPメソッドを使用して、文字列内の各文字に対応するASCIIコードの配列を取得することを示しています。 console.log（arr）印刷の印刷結果に注意してください。
コードコピーは次のとおりです。
//例2：次の操作の結果は何ですか？
var result = ["1"、 "2"、 "3"]。map（parseint）;
// outputs：[1、nan、nan]
console.log（result）;
たぶんあなたは質問があるでしょう、なぜ[1,2,3]ではありませんか？ ParSeintメソッドは2つのパラメーターを受信できることを知っています。最初のパラメーターは変換する必要がある値であり、2番目のパラメーターはバイナリの数です。わからない場合は、ここをクリックできます。 MAPメソッドを使用すると、コールバック関数は3つのパラメーターを受信しますが、ParseIntはせいぜい2つのパラメーターしか受信できないため、3番目のパラメーターが直接破棄されます。同時に、Parseintは渡されたインデックス値をバイナリ番号として使用して、NANを返します。次の出力結果を見てください。
コードコピーは次のとおりです。
// OUPUTS：1
console.log（parseint（ "1"、0））;
// OUPUTS：1
console.log（parseint（ "1"、未定義））;
// OUPUTS：NAN
console.log（parseint（ "2"、1））;
// OUPUTS：NAN
console.log（parseint（ "3"、2））;
最後の2つは理解しやすいですが、なぜ最初の2つは1を返すのですか？この問題を説明するために、公式の説明を見てみましょう。
基数が未定義の場合、または0（または存在しない）場合、JavaScriptは次のとおりです。
a）入力文字列が「0x」または「0x」で始まる場合、RADIXは16（16進数）で、文字列の残りは解析されます。
b）入力文字列が「0」で始まる場合、RADIXは8（オクタル）または10（小数）です。正確に選択される基数は実装依存です。ECMASACTIP5仕様は10（小数）を使用しますが、すべてのブラウザーがこれをサポートしていません。
c）入力文字列が他の値で始まる場合、基数は10（小数）です。
3番目のポイントでは、文字列が別の値の場合、デフォルトは10です。
では、上記の例を正常に出力するように変更するにはどうすればよいですか？次の例を参照してください。
コードコピーは次のとおりです。
var result = ["1"、 "2"、 "3"]。マップ（function（val）{
parseint（val、10）を返します。
}）;
//出力：[1、2、3]
console.log（result）;
3。マップメソッド互換性：
MAPメソッドは、IE8以下のブラウザではサポートされていません。ブラウザの古いバージョンと互換性がある場合は、次のことができます。
a） mapを使用しないでください。B）ES5-SHIM _.mapようなものを使用して、古いIEのサポートmapを作成します。
上記は、マップ方法の理解です。初心者に役立つことを願っています。記事に不適切なポイントがある場合は、修正できることを願っています！