アプリケーションのforEachのJavaScriptの配列、マップ、フィルタ、削減

説明する方法のJavaScriptの配列

 

それぞれの方法ES5.0 ES3.0方法:

  1. 変更元の配列:、ソート、逆プッシュ、ポップ、アンシフト、シフト、スプライス
  2. ソース配列を変更することはできません。操作は元の配列を変更しない、配列は、抽出されたを使用して変更することができるforEachの、フィルタ、地図、減らす、reduceRight、スライス、連結、参加、 - >スプリット、のtoString

Aは、プッシュいずれかによって、アレイの末尾に追加し、任意の数のパラメータを受信し、配列の長さが変更された返してもよいです。

配列を達成するためにプッシュ:プロトタイプチェーン上のすべての使用に関数をコールする必要がなく、直接呼ばれるプログラミングの配列に貢献します。

アレイ.prototype。プッシュ =  関数  (){

VAR  LEN = 引数が.LENGTH。

ためVAR  iが =  0 ; iは <  lenを私は ++ ){

この[ この.LENGTH] =  引数[ I ];

}

戻る この.LENGTHを。

}

:ポップ、アレイの最後の一端を除去値の配列の長さを短くし、その後除去アイテムが返さ

シフト():元の最初の配列を削除し、削除される要素の値を返し、空の配列戻り未定義 

アンシフト:元の配列の先頭にパラメータを追加し、配列の長さを返します。

ソート():昇順アレイエントリ-すなわち、最小値が前方に位置し、底面の最大値。人々はあなたが望む、独自の機能の関数を定義するためのインタフェースを提供します。

メソッドのソート - >インタフェース機能を提供します

1、2つのパラメータ必見

2値は、フロントの前にリターンの数負の場合)戻り値1を参照

2)正の数、後者の前に数

3)固定され、0であります

ARR ソート関数  (A、B ){

// ABを返す; //昇順

//戻りBA;降順

リターン 。数学ランダム()-  0.5 ; //ランダムな順序

});

Sのplice:メソッドの非常に強力な配列、それは削除、挿入を達成し、置き換えることができ、多くの用途があります。スプライス(削除するいくつかの開始位置、[挿入する数(-s)])

II。

 Cはoncat:元の配列にパラメータを追加します。このメソッドは、現在の配列のコピーを作成し、このコピーの最後に受信したパラメータを追加し、最終的には新たに建設されたの配列を返します

T Ostring:文字列にパラメータを説教されます

Sのシラミは:配列から元のインデックスの開始端へのインデックスを返しますエンディング上付き文字を除くの間でのアイテムの新しい配列。スライス()メソッドは、アイテムの開始及び終了位置に戻るように、すなわち、一つまたは二つのパラメータを受け入れることができます。

J OIN:参加(セパレータ):アレイの群からの要素の文字列は、セパレータ:セパレータにおけるセパレータとして、デフォルトのパラメータを1つだけ受信したカンマ区切りであり、省略されています。

S Plit:スプリット(セパレータ):文字列に分割アレイセパレータ:唯一つのパラメータを受信するセパレータとして分離しました。

これらの方法はES3.0のアレイであります

新しいメソッドES5.0は、次の方法があります:

。1、forEachの:指定された関数に、アレイ内の各項目の操作のアレイトラバースサイクル。このメソッドは、戻り値はありません。型関数パラメータはデフォルトパラメータが渡されているが、パラメータは次のとおりコンテンツトラバースのアレイと、第一のアレイ、アレイ自体のインデックスに対応します。

実施例の様々な方法の後続の呼び出しを容易にする配列を定義します。

[= ARRました

{名: "劉肥"、デ: '子宮頸悪い'、性別: 'M'、年齢:23}、

{名: 'LiuYingJian'、デ: '聖体の良い'、性別: 'F'、年齢:19}、

{名: '王ジュ'、DES: 'いいえ聖体'、性別: 'F'、年齢:20}、

{名: 'レイ王'、デ:「あなたが見ていない男、セックス: 'M'、年齢:21}、

{名: '劉ラング'、DES: '非常に皮膚'、性別: 'M'、年齢:22}

];

伝達関数パラメータマストFUNC、ポイントを通過することができず、この点を通過しなくてもよい第二パスは窓関数が実行されたときに(各要素、インデックスindexビットは、自己自身をELE)

VAR oLiArray = document.getElementsByTagName( '李');

arr.forEach(関数(ELE、指数、自己){

この[インデックス] .innerText = ele.name。

}、oLiArray)

出力:

結果は、(この例では、アレイ中のLiのそれぞれに挿入される)配列の特定の機能を達成するために、この関数を呼び出すすべてのターンを説いのアレイであります

プロトタイプチェーンアレイ配列に直接使用することが、当然の簡単なプログラミング:もちろん、私たちは、同じ機能を実現するために、それを書き換えることができます

Array.prototype.myForEach =ファンクション(FUNC){

//次の2つのパラメータを渡すことができ、そして、(使用中の機能を指して)この関数は、parma2でこれを受信します

// _ ARRコールが(誰ポイントを呼び出す)現在の配列を受信します

VaRの_arrは、この、LEN = _arr.length、parma2 =引数[1] = || 窓;

{(; iが<lenのI ++ varがI = 0)するため

func.apply(parma2、[_arr [i]は、I、_arr])。

}

}

再呼び出しは、より多くの結果を得ることができます。

フィルタ:フィルタ」は、所与の機能を実行している各アレイは、フィルタ条件の配列を返します。

例えば:

VAR newArr = arr.filter(関数(ELE、指数、自己){

IF(ele.sex == 'M')

trueを返します。

});

結果;

関数の内部で、真か偽かを決定現在の項目が返された場合はtrue、そうでない場合は現在の項目をフィルタリングします。

それを書き直し:

Array.prototype.myFilter =ファンクション(FUNC){

//最後の空の配列を受け取るに新たに追加を定義し、その結果を返します。

これを= _arr VAR、LEN = _arr.length。parma2 =引数[1] || 窓、newArr = [];

{(; iが<lenのI ++ varがI = 0)するため

func.apply(parma2、[_arr [i]は、I、_arr])?newArr.push(deepClone({}、_arr [I])): '';

}

newArrを返します。

}

M APは:指定された機能を実行するアレイ内の各アイテムの「マッピング」とは、各関数呼び出しは、アレイの結果を返します。

Xは--------------- + 10 ---------> Y、すなわち、各X 10が増加した場合との間のマッピングの異なるアレイに送られます。

どのように使用するには:

VAR newArr = arr.map(関数(ELE、指数、自己){

ele.name + = 10。

ELE返す;または元の各戻り//

})

結果は以下のとおりです。

 

書き換え:

Array.prototype.myMap =ファンクション(FUNC){

VaRの_arrは、この、LEN = _arr.length、parma2 =引数[1] = || 窓、newArr = [];

{(; iが<lenのI ++ varがI = 0)するため

newArr.push(deepClone({}、func.apply(parma2、[_arr [i]は、I、_arr]))); //深さを使用してクローンを元の配列に影響を及ぼしません

}

newArrを返す; //新しい配列が受け入れ返します

}

R&LT educeとreduceRight:右から左トラバーサルreduceRightに一端が横断する配列の最初の項目から減らす()メソッド、、。前の値、インデックスの現在値、およびオブジェクトエントリの配列:(減少させるために渡された関数)とreduceRightは()は、4つのパラメータを受け取りました。この関数によって返された値は、自動的に最初のパラメータとして次のいずれかに渡されます。二番目の配列の最初の反復で発生するので、配列の最初の項目は、最初のパラメータであり、2番目のパラメータは、配列の2番目の項目です。

どのように使用するには:

VARはinitialValue = {名: '22'}。

VAR lastValue = arr.reduce(関数(preValue、CURVALUE、指数、自己){

preValue.name + = 1;

リターンpreValue

}、 初期値);

呼び出しの結果:

プラス、左から右に1それぞれが、結果は下の蓄積時間としての最後の呼び出しではありません。

書き換えを達成することができます。

Array.prototype.myReduce =関数(FUNC、はinitialValue){//ここで、当然のことながら、2番目と3番目のパラメータは、上記のように、送信のために利用可能ではないかもしれないしなければならない2つのパラメータを渡します

VaRの_arr =この、LEN = _arr.length、parma2 =引数[2]。

{(; iが<lenのI ++ varがI = 0)するため

initialValue = func.apply(parma2、〔はinitialValue、_arr [i]は、I、_arr])。

}

initialValueを返します。

}

アプリケーション:文字列とその全体がアレイに分け、元の文字列の数のその属性と値:

例えば:

VARクッキー= "1 = 2 = B; 3 = C; D = 4; 5 = E 6 = F; 7 = G"。

関数parseCookie(STR){

VAR cookieArr = str.split( ";");

cookObjは= {}でした。

cookieArr.reduce(関数(前、次、指数、自己){

VAR nextArr = next.split( '=');

cookObj [nextArr [0] = nextArr [1]。

事前に返します。

} Chokobj)

cookObjを返します。

}

varが料理= parseCookie(クッキー);

console.log(料理)。

 

出力:

この方法は少し難しいを低減することは困難であるが、それはまだ良いの使用ですが、

すべての方法:それは(&&相当)がfalseを返す場合、配列を分析することの各要件と一致していません

いくつかの方法:それがtrueを返す場合、配列の存在を決定するには、満足のいくものではありません。(||相当)

VARフラグ= arr.every(関数(ELE、指数、自己){

リターンele.age> 20。

});

VAR FLAG1 = arr.some(関数(ELE、指数、自己){

リターンele.age> 20。

});

出力

 

それを書き直し:

Array.prototype.myEvery =ファンクション(FUNC){

//変数の決意を追加し、trueを返す促進

これを= _arr VAR、LEN = _arr.length。parma2 =引数[1] || 窓、フラグ=真。

{(; iが<lenのI ++ varがI = 0)するため

IF(!func.apply(parma2、[_arr [i]は、I、_arr])){

フラグ= falseは、

}

}

フラグを返します。

}

いくつかの類似の方法

 

 

主な目的は、使いやすい、私たちはより良い基本的な原理を理解することができるように書き換えることです

これは、自律性を高めるために他の人の方法に非常に依存している必要はありません

 

上記は、一般的にJavaScriptで使用される方法の配列です。、自分の提案の書き込みを採用するありがとう

公開された19元の記事 ウォン称賛58 ビュー50000 +

おすすめ

転載: blog.csdn.net/cyg_l02/article/details/82286432