jsメモ:filter()、forEach()、map()、reduce()、reduceRight()の違い

一、簡単に述べる

ECMAScript 5は配列に対して5つの反復法を定義する.各メソッドには、各項目で実行する関数と(オプション)関数を実行する役割ドメインオブジェクトの2つのパラメータが受信されます.これらのメソッドに入力された関数は、配列アイテムの値、配列内のアイテムの位置、配列オブジェクト自体の3つのパラメータを受信します.使用する方法によっては、この関数の実行後の戻り値がアクセスの戻り値に影響を与えない場合があります.以下に,この5つの反復法の役割を示す.

every():配列内の各項目に対して所定の関数を実行し、各項目に対してtrueを返すとtrueを返します.

some():配列の各項目に対して所定の関数を実行し、その関数がいずれかに対してtrueを返す場合、true

を返す.

filter():配列内の各項目に対して所定の関数を実行し、trueの項目からなる配列を返します.

forEach():配列内の各項目に対して所与の関数を実行します.このメソッドは値を返していません.

map():配列の各項目に対して所定の関数を実行し、各関数呼び出しの結果からなる配列を返します.

パラメータは同じです.

各項目で実行される関数(この関数には3つのパラメータがあります)

関数の最初のパラメータ:配列項目の値

関数の2番目のパラメータ:配列項目のインデックス

関数の3番目のパラメータ:配列オブジェクト自体

この関数を実行する役割ドメインオブジェクト(オプション)

二、区別

filter()、forEach()、map()、some()、every()は、配列の各呼び出し関数を処理します.

区別:–some()、every()の戻り値:true/false–filter()、map()の戻り値:新しい配列–forEach()に戻り値がありません.

filter()、forEach()、map()、some()、every()を使用しても、元の配列は変更されません.
次に本題に入り、filter()、forEach()、map()の違いを例で区別します.

filter()

var arr = [1,2,3,4];
var my = arr.filter(function(item,index,arr){
    return item*2 > 2; 
});
console.log(my);   //[2, 3, 4] //  filter   true       
console.log(arr);  //[1, 2, 3, 4]

var arr = [1,2,3,4];
var my = arr.filter(function(item,index,arr){
    return item*2;
});
console.log(my);   //[1, 2, 3, 4]  //        true
console.log(arr);  //[1, 2, 3, 4]

forEach()

var arr = [1,2,3,4];
var my = arr.forEach(function(item,index,arr){
    return item*2;
});
console.log(my);   //undefined    //  forEach       
console.log(arr);  //[1, 2, 3, 4]

map()

var arr = [1,2,3,4];
var my = arr.map(function(item,index,arr){
    return item*2;
});
console.log(my);   //[2, 4, 6, 8]
console.log(arr);  //[1, 2, 3, 4]

三、forEach()とmap()

forEach()とmap()の違いを詳しく説明します.map()はメモリ領域を割り当てて新しい配列を格納して返し、forEach()はデータを返しませんが、元の配列を変更できます.
1、forEach()forEachは、データを変更しようとしないときに適しています.他の変数に保存したり印刷したりするなど、データで何かをしたいだけです.

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

もちろんforEachは元の配列を変更することもできます.

var arr = [1,2,3,4,5];
arr.forEach((num, index) => {
   return arr[index] = num * 2;
});
console.log(arr)   //[2, 4, 6, 8, 10]

2、map()map()は、データ値を変更するときに、新しい配列を返すのに適しています.このような利点は、複合(composition)(map()、filter()、reduce()などを組み合わせて使用することで、より多くの模様を遊ぶことができることです.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
console.log(arr2)  // [6, 8, 10]

四、reduce()、reduceRight()

配列には、reduce()、reduceRight()reduce()メソッドが左から右に配列を巡回する2つの集計方法があります.一方、reduceRight()は右から左に配列を巡回します.
reduce()、reduceRight()のパラメータは同じです.

最初のパラメータ:各呼び出し関数(4つのパラメータを含む)

関数の最初のパラメータ:前の値

関数の2番目のパラメータ:現在のアイテムの値

関数の3番目のパラメータ:項目のインデックス

関数の4番目のパラメータ:配列オブジェクト

の2番目のパラメータ:集計の基礎値として(オプション)

reduce()、reduceRight()の最初のパラメータは、 の関数です.集計のために、配列の最初の項目と2番目の項目を最初の遍歴とします.(すなわち、配列にn個の要素がある場合、reduce()またはreduceRight()を呼び出してn-1回遍歴する)分からない場合は、次の例を参照してください.
例1:

var a = [1,2,3].reduce(function(prev,item,key,array){
    console.log(9);  //      9
    return prev+item;
});
console.log(a);//6

出力:9 9 9 6
何が起こったかを見てみましょう.まず最初の集計を行います.配列の第1項と第2項を加算し(すなわち1+2)、結果3を関数の第1パラメータとして次の項に渡します.次に2回目の集計を行います:3+3で、最終的に6を返します.その間に2回の集計が行うため、出力6の前に2回出力.
もしこの配列が1つか空の配列しかなかったら?下を見てみましょう
例2:

var a = [1].reduce(function(prev,item,key,array){
    console.log(2);  //   
    return prev+item;
});
console.log(a);//1
//         ，    

出力:1
2を印刷せず、1を直接出力し、reduceの関数が実行されていないことを示し、元の配列を直接返します.この配列が空の場合、reduce()またはreduceRight()を呼び出すと直接エラーが報告されるため、 は空では処理されません.