ES6 アレイの新しいメソッドに関する知識ポイントの概要

反復メソッド:

ECMAScript では、配列に対して 5 つの反復メソッドが定義されています。各メソッドは 2 つのパラメーターを受け取ります。1 つは引数として各項目を使用して実行される関数、もう 1 つは関数が実行されるコンテキストとしてのオプションのスコープ オブジェクトです (関数内の this の値に影響します)。各メソッドに渡される関数は、配列要素、要素インデックス、配列自体の 3 つのパラメーターを受け取ります。特定のメソッドに応じて、この関数の結果がメソッドの戻り値に影響を与える場合もあれば、影響しない場合もあります。配列の 5 つの反復メソッドは次のとおりです。

1. Map メソッド:配列の各項目に対して渡された関数を実行し、各関数呼び出しの結果で構成される配列を返します。

これは、配列内の各要素に対して特別な処理を実行した後、新しい配列を返すとも解釈できます。 。

例:

価格配列を単純化する前に、

prices=[50,80,90] とします。
価格=価格.マップ((品目,インデックス)=>{
     返品商品+「元」
})
console.log(prices)

の省略後

価格=[50,80,120] とします。
//単価の後に「元」を追加
価格=価格.マップ(アイテム=>アイテム+"元")
console.log(price)//出力は ['50 元', '80 元', '90 元'] です。

アプリケーション シナリオは次のとおりです。 WeChat アプレット Douban Film Review は、

map メソッドを使用して xxx を www replace

( )メソッド 文字列内の一部の文字を他の文字に置き換えたり、正規表現に一致する部分文字列を置き換えたりするために使用されます。

let movie=[{id:1,name:"ショーシャンクの空に",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"ショーシャンクの空に",imgUrl :" http://xxx.douban.com/2.jpg"},{id:3,name:"ショーシャンクの空に",imgUrl:"http://xxx.douban.com/1.jpg"}]
        映画=映画.map(item=>{
            item.imgUrl=item.imgUrl.replace("xxx","www")
            返品商品
        })
        console.log(movies)

2. Filter メソッド:渡された関数を配列の各項目に対して実行し、関数が true を返した項目が配列を形成して返されます。

これは、次のように理解することもできます。要件を満たす配列内の要素をフィルターで除外し、新しい配列を返します。

letscores=[80,59,10,55,90,88]
        let arr=scores.filter(item=>{
			if(アイテム>60){
				trueを返す
			}
		})
		console.log(arr)//出力は以下のようになります:

出力は以下のようになり、60 未満の配列は除外されます。

省略後:

スコア = [80,59,10,55,90,88]
let arr=scores.filter(item=>item>=60)
console.log(arr)//(3) [80, 90, 88]

アプリケーション シナリオでは、都市名の配列を配置してキーワードを検索できます。これはデータが小さい場合にのみ公開します。この例については、後で管理システムのアプリケーション シナリオにキーワード検索が含まれているので参照してください。

3 つと 4 つ、some メソッドと each メソッド

は英語で some と翻訳され、every は all と each として翻訳されます。そのため、some メソッドは、いずれか 1 つが true である限り true を返します。

が false

であっても、

配列の判定プロセス中に、メソッド全体の各要素が基本要件を満たしているかどうかが判断されます。

true の場合、それらの 1 つが一致する限り、true を返します。
すべてのメソッド: 1 つの false は false です。そのうちの 1 つが要件を満たしていない限り、false が返されます。

// クラス内のすべての生徒のスコアを調べて、全員が合格したかどうかを確認します let得点=[80,49,12 ,50,69]
         let result=scores.every(item=>item>=60)
         console.log(result)//Return false すべてがパスされるわけではありません。

使用シナリオ: フロントエンドバリデーターが AJAX リクエストを送信する前に、送信する前にすべての検証に合格する必要があります。フロントエンド データ バリデータに関する記事。

Merge メソッド:

5. Reduce メソッド: ECMAScript は、配列に対して 2 つのマージ メソッド、reduce() と ReduceRight() を提供します。どちらのメソッドも配列のすべての項目を反復処理し、これに基づいて最終的な戻り値を構築します。 reduce() メソッドは、配列内の最初の項目から最後の項目までを走査します。そして、reduceRight() は最後の項目から最初の項目までトラバースします。これは、単純に、配列内の要素を統合し、新しいコンテンツを返すと理解することもできます。

どちらのメソッドも、各項目に対して実行されるマージ関数と、マージを開始するオプションの初期値という 2 つのパラメーターを受け入れます。 Reduce() および ReduceRight() に渡される関数は、前のマージされた値、現在の項目、現在の項目のインデックス、および配列自体の 4 つのパラメーターを受け取ります。この関数によって返された値は、同じ関数の次回の呼び出しで最初の引数として使用されます。オプションの 2 番目のパラメーター (マージ開始値として) がこれら 2 つのメソッドに渡されない場合、最初の反復は配列の 2 番目の項目から開始されるため、マージ関数に渡される最初のパラメーターは最初の項目になります。 2 番目のパラメータは配列の 2 番目の項目です。

まず、次のコードを通じて概念を理解します。

次のコードの 4 つのパラメーターの意味:

• prev: 前の操作によって返された結果

• item: この操作の要素

• Index: この操作の要素のインデックス値

• 配列: the現在の操作の配列

let arr =[20,40,50,21]
        letvalues=arr.reduce((prev,item,index,array)=>{
            console.log("前"+前)
            console.log("アイテム"+アイテム)
            console.log("インデックス"+インデックス)
            console.log("配列"+配列)
            console.log("______")
        })

出力は次のとおりです。

なぜ 3 回だけループするのでしょうか? Prev にはデフォルト値を設定できます。デフォルト値が設定されていない場合、最初の要素が最初の prev になります。
2 番目と 3 番目のループで prev が未定義になるのはなぜですか?

を

取得する必要があります。これは、戻り値が最初に設定されていないため、未定義になります。

上記のことを理解したら、配列の合計の実装を開始します。

arr=[20,40,50,21]
        letvalues=arr.reduce((prev,item,index,array)=>{
            console.log("前"+前)
            前へ+項目を返す
 //リターンして 4 回ループします。最初の出力は prev で、2 回目は 40+20 で 60、3 回目は 110、最後は 131 を出力します。
        })
        console.log(values) //131

prev のデフォルト値はいつ設定する必要がありますか?

各配列要素に <li> </li> を追加します。

arr=["Eason Chan","Miriam Yeung","Jiji Ku","Hacken Lee"] とします。
//prev のデフォルト値を設定します。 機能 1. すべての要素がループに参加します 2. 返される内容を決定します let result=arr.reduce((prev,item)=>{
      //console.log(前)
      return prev+"<li>"+item+"</li>"
},"")//空の文字列を追加 console.log(result)//<li>イーソン・チャン</li><li>ミリアム・ヨン</li><li>ジュジ・クー</li><li>ケチンLi</li> li>

別のケースを考えてみましょう

。reduce を使用して配列の重複排除を実現し、空の配列を作成し、元の配列を順番に走査し、空の配列にないものを挿入します。挿入されないものは挿入されなくなります。

let arr=["張三","李四","李四","王爾","李四","麻子","張三"]
        let result=arr.reduce((prev,item)=>{
            //includes は指定された要素があるかどうかを判断して t を返し、それ以外の場合は f を返します。
            if(!prev.includes(item)){
                prev.push(item) //.push() は新しい項目を配列に追加します}
            前に戻る
        },[])//デフォルトの空の配列を設定します console.log(result)//(4) ['Zhang San', 'Li Si', 'Wang Er', 'Mazi']

別のケース: (reduce メソッド You多くのことができます)

文字の出現数を数えます: 以下のコードを参照してください

let arr=["a","b","a","c","b","a","c"]
        //各文字の出現数をカウントするオブジェクトを返します {a:2,w:3}
        let result=arr.reduce((prev,item)=>{
            // //オブジェクトに対応する属性があるかどうかを判断します if(item in prev){
                 //対応する属性値を検索++  
                 prev[item]++ //将来オブジェクト属性を設定または取得したい場合、この属性は直接の場合、括弧 []++ の形式の変数で表されます。属性名は次のようになります。の形式。}else{
                 前[項目]=1
             }
             前に戻る
        }、{}）
        console.log(結果)//{a: 3、b: 2、c: 2}