JS のエレガントな書き方 (reduce/map) をいくつか共有します。

この記事では、JS に関する知識を紹介し、JS のエレガントな書き方を中心に紹介します。興味のある友達は一緒に見てください。皆さんのお役に立てれば幸いです。

#JS のエレガントな記述方法

reduce

1 .reduce メソッドを使用すると、オブジェクト配列内の特定のキー値に基づいて合計を実装できます。

たとえば、次のオブジェクト配列があるとします:

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];

合計を求める場合価格属性に基づいて、次のコードを使用できます。

const sum = arr.reduce((acc, cur) => acc + cur.price, 0);
console.log(sum); // 9

その中で、reduce メソッドの最初のパラメーターはコールバック関数であり、これは 2 つのパラメーターを受け取ります。アキュムレータ (acc) と現在の要素 (cur)。コールバック関数の戻り値は、次回コールバック関数が呼び出されるときにアキュムレータ値として使用されます。 reduce メソッドの 2 番目のパラメータはアキュムレータの初期値で、ここでは 0 に設定されています。

コールバック関数では、アキュムレーターと現在の要素の価格属性を追加し、最後にすべての要素の価格属性の合計を取得します。

#map

#1.map メソッドを使用すると、オブジェクト配列内の特定のキー値に基づいて別のキーの値を取得できます。

たとえば、次のオブジェクト配列があるとします。

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];

name 属性に基づいて価格属性を取得する場合は、次のコードを使用できます。

const prices = arr.map(item => item.name === 'banana' ? item.price : null);
console.log(prices); // [null, 3, null]

このうち、map メソッドのパラメータはコールバック関数で、現在の要素 (項目) という 1 つのパラメータを受け取ります。コールバック関数の戻り値は、新しい配列の要素として使用されます。コールバック関数では、現在の要素の name 属性が 'banana' に等しいかどうかを判断し、等しい場合は現在の要素の Price 属性を返し、それ以外の場合は null を返します。最後に、name 属性が「banana」である要素の Price 属性のみが値を持ち、他の要素の Price 属性は null である新しい配列が取得されます。

2. map メソッドを使用すると、特定のキー値に基づいてオブジェクト配列内の要素の価格属性を取得できます。これを実現するには、find メソッドを使用します。

たとえば、次のオブジェクト配列があるとします。

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];

name 属性に基づいて価格属性を取得する場合は、次のコードを使用できます。

const banana = arr.find(item => item.name === 'banana');if (banana) {
  console.log(banana.price); // 3}复制代码

このうち、find メソッドのパラメータはコールバック関数で、現在の要素 (項目) という 1 つのパラメータを受け取ります。コールバック関数は、現在の要素が条件を満たしているかどうかを示すブール値を返す必要があります。 find メソッドは条件を満たす最初の要素を返しますが、条件を満たす要素がない場合は未定義を返します。

コールバック関数では、現在の要素がバナナであるかどうかを判断し、バナナである場合は現在の要素を返します。最終的に、name属性が'banana'である要素のprice属性のみが値を持ち、他の要素のprice属性は未定義のオブジェクトが得られる。 if文を使用して条件を満たす要素が見つかったかどうかを判定し、見つかった場合はそのprice属性を出力します。

推奨学習: 「

JavaScript ビデオ チュートリアル

」

以上がJS のエレガントな書き方 (reduce/map) をいくつか共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。