ReactとReduxの配列処理の説明

この記事では、reduce()、filter()、map()、every()、some()、spread 演算子など、よく使用される配列処理関数と構文を紹介します。この知識はReactやRedux自体に直接関係するものではありませんが、この章の例にはこれらの関数や構文の使い方が含まれているので、プログラムの中で学ぶことができます。また、reduce()、filter()、map() などの関数のアイデアは関数型プログラミングから来ていることも特筆に値します。JavaScript は関数型プログラミング言語であるため、もともと複雑だったロジック処理が非常にシンプルになりました。

減らす（）

概要

Reduce() メソッドは関数を累積器として受け取り、配列内の各値 (左から右へ) が結合されて 1 つの値を形成します。

文法

配列.reduce(コールバック、初期値)

パラメータについては以下で説明します。
コールバック: 4 つのパラメータを含む配列内の各値を実行する関数 (リデューサーとも呼ばれます)。
previousValue: 最後のコールバック呼び出しによって返された値、または指定された初期値 (initialValue)。
currentValue: 配列内で現在処理中の要素。
index: 配列内の現在の要素のインデックス。
array: Reduce を呼び出す配列 · initialValue: 最初のコールバック呼び出しの最初のパラメーター。このパラメータは必須ではありません。
例

const 完了カウント = todos.reduce(
(count,todo)=>(todo.completed?count+1:count),
0);

コードの説明:

todos は配列です。
Reduce() の最初のパラメータは矢印関数です。この矢印関数の最初のパラメータ count は前の戻り値であり、2 番目のパラメータ todo は現在の要素の値です。
Reduce() の 2 番目のパラメータ 0 は初期化値であり、count の初期値を 0 にするために使用されます。
配列 todos の最初の値まで遡ると、count は 0 になります。todo は todos の最初の項目であり、戻り値は 1 増加するか、変更されません (todo.completed が true の場合は count+1 が返され、それ以外の場合は count が返されます)。
todos 配列の 2 番目の値を走査する場合、count は前の戻り値になります。 todo は todos の 2 番目の項目であり、戻り値は 1 増加するか、変更されません。
トラバーサルが完了すると、配列内のcompleted属性がtrueであるタスクの数、つまり完了したタスクの数を取得できます。

フィルター（）

概要

filter() メソッドは、指定された関数を使用してすべての要素をテストし、テストに合格したすべての要素を含む新しい配列を作成します。

文法

配列.フィルター(コールバック、thisArg)

パラメータについては以下で説明します。

コールバック: 配列の各要素をテストするために使用される関数。3 つのパラメータが含まれます。要素を保持する（テストに合格する）場合は true を返し、保持しない場合は false を返します。
currentValue: 現在渡されている配列内の要素。
index: 要素のインデックス。
配列: 走査する配列。
thisArg: オプション。コールバックを実行するときに使用する this 値。

状態.filter(todo=> を返す
todo.id!==アクション.id
）

コードの説明:

状態はタスクの配列です。
filter() のパラメータは矢印関数です。矢印関数には、配列内の現在の項目である todo という 1 つのパラメーターのみがあります。矢印の後の判定ステートメントが true を返す場合、現在の項目は保持され、それ以外の場合は現在の項目は削除されます。
このコードスニペットの目的は、指定された ID と同じ ID を持つタスク配列内のタスクをフィルター処理し、新しいタスク配列を返すことです。

地図（）

概要

map() メソッドは、元の配列の各要素に対して指定されたメソッドを呼び出した際の戻り値で構成される新しい配列を返します。

文法

配列.map(コールバック、thisArg)

パラメータについては以下で説明します。

コールバック: このメソッドは元の配列の要素に対して呼び出され、新しい要素を返します。このメソッドには次の 3 つのパラメーターが含まれます。
currentValue: 現在渡されている配列内の要素。
·index: 要素のインデックス。
配列: 走査する配列。
thisArg: オプション。コールバックを実行するときに使用する this 値。

例

状態.map(todo=>( を返す
todo.id === action.id ですか?
オブジェクトを割り当てます({},todo.{text:action.text}):
やること
));

コードの説明:

state は変更前の状態であり、配列です。
map() への引数は矢印関数です。矢印関数の最初のパラメーターは todo であり、戻り値は三項演算子を使用して新しい要素を返す式です。 idが一致する場合、0bject.assign()を通じて新しい属性がマージされます。つまり、テキスト属性がtodoに追加または書き換えられ、属性値はaction.textになります。
Object.assign() メソッドは、ソースオブジェクト自身の列挙可能なプロパティを任意の数だけターゲットオブジェクトにコピーし、ターゲットオブジェクトを返すことができます。

構文は Object.assign(target,...sources) です。target はターゲットオブジェクト、sources は任意の数のソースオブジェクトです。
このコードは、配列で指定されたタスクのテキストプロパティを更新します。

毎（）

概要

every() メソッドは、配列内のすべての要素が指定された関数のテストに合格するかどうかをテストするために使用されます。

文法

配列.every(コールバック、thisArg)

callbak: 各要素をテストするために使用される関数。
currentValue: 現在渡されている配列内の要素。
index: 要素のインデックス。
配列: トレースする配列。
thisArg: オプション。コールバックを実行するときに使用する this 値。

例

const areAllMarked = state.every(todo=>todo.completed)

タスク配列が走査され、各タスクの完了属性が true の場合、true を返します。

いくつかの（）

概要

some() メソッドは、指定された関数のテストに合格する要素が配列内に少なくとも 1 つあるかどうかをテストするために使用されます。

文法

配列.some(コールバック[,thisArg])

パラメータについては以下で説明します。

callback: 各要素をテストするために使用される関数。
currentValue: 現在渡されている配列内の要素。
index: 要素のインデックス。
配列: 走査する配列。
thisArg: オプション。コールバックを実行するときに使用する this 値。

例

const areAllMarked = state.some(todo=>todo.completed)

タスク配列を走査し、完了プロパティが true であるタスクがある限り true を返します。

スプレッド演算子

概要

スプレッド演算子を使用すると、式をある時点で展開できます。一般的なシナリオには、関数パラメータ、配列要素、分解割り当てなどがあります。
さらに、JSX のコンポーネントプロパティは、スプレッド演算子を使用して割り当てることもできます。
構造化代入構文は、配列またはオブジェクトからデータを抽出し、それを別の変数に割り当てることを可能にする JavaScript 式です。

文法

関数パラメータの場合:

myFunction(...iterable0bj);

配列要素の場合:

[...反復可能オブジェクト、4、5、6]

分割代入の場合:

定数[a,b,...残り]=[1,2,3,4,5]
定数{a,b,...残り}={a:1,b:2,c:3,d:4}

React コンポーネントのプロパティ:

<App...iterable0bj/>

例

状態を展開
配列の各項目が現在の配列に追加されます。

戻る[
id:state.reduce((maxId,todo)=>Math,max(todo,id,maxId),-1)+1,
{
完了:false、
テキスト:アクション.テキスト、
},
...州、
];

アクションの各プロパティをコンポーネントに展開します。

<TodoItem キー = {todo.id} todo = {todo}{...アクション} />

要約する

Reduce() メソッドは関数を累積器として受け取り、配列内の各値 (左から右へ) が結合されて 1 つの値を形成します。
filter() メソッドは、指定された関数を使用してすべての要素をテストし、テストに合格したすべての要素を含む新しい配列を作成します。
map() メソッドは、元の配列の各要素に対して指定されたメソッドを呼び出した際の戻り値で構成される新しい配列を返します。 every() メソッドは、配列のすべての要素が指定された関数のテストに合格するかどうかをテストします。
some() メソッドは、指定された関数のテストに合格する要素が配列内に少なくとも 1 つあるかどうかをテストするために使用されます。
スプレッド演算子を使用すると、式をある時点で展開できます。よく使用されるフィールド変数、関数パラメータ、配列の構築と割り当て。さらに、JSX のコンポーネントプロパティは、スプレッド演算子を使用して割り当てることもできます。

ReactとReduxの配列処理に関する記事はこれで終わりです。ReactとReduxの配列処理についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: