Reduce 関数は、必要に応じて蓄積、フィルタリング、グループ化、マッピングなどの操作を実行でき、非常に強力な配列メソッドです。データ処理では非常に頻繁に利用されており、多くの複雑なロジックもreduceで処理すれば非常に単純になるが、実際の開発作業プロセスにおいては、reduce手法の共通かつ非常に有用なコード断片がいくつか蓄積されており、その選択は以下の通りである10ご参考に
導入を減らす
reduceこれは配列メソッドであり、配列内の各要素に対してコールバック関数を順番に実行し、最終値を左から右に順番に計算できます。その構文は次のとおりです。
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
その中には、callback各要素によって実行されるコールバック関数があり、これには 4 つのパラメーターが含まれます。
accumulator: アキュムレータ。最後のコールバック関数実行の戻り値です。currentValue: 現在の要素の値。index: 現在の要素の添え字。array: 元の配列。
initialValueはオプションで、アキュムレータの初期値を表します。
reduce関数の実行は次のようになります。
1. 指定されていない場合はinitialValue、配列の最初の要素がアキュムレータの初期値として使用され、それ以外の場合はinitialValueアキュムレータの初期値として使用されます。
2. 配列の 2 番目の要素から始めて、配列内の各要素に対してコールバック関数を順番に実行します。
3. コールバック関数の戻り値は、次回コールバック関数を実行する際のアキュムレータの値として使用されます。
4. 配列内の各要素に対してコールバック関数が実行された後、reduce関数は最後のコールバック関数の戻り値、つまり最終累積値を返します。
配列内の各要素の出現数をカウントします。
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((accumulator, currentValue) => {
accumulator[currentValue] = (accumulator[currentValue] || 0) + 1;
return accumulator;
}, {
});
console.log(count); // Output: { apple: 3, banana: 2, orange: 1 }
ネストされた配列を平坦化する
const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6]
条件ごとにグループ化する
const people = [
{
name: 'Alice', age: 25 },
{
name: 'Bob', age: 30 },
{
name: 'Charlie', age: 35 },
{
name: 'David', age: 25 },
{
name: 'Emily', age: 30 }
];
const groupedPeople = people.reduce((accumulator, currentValue) => {
const key = currentValue.age;
if (!accumulator[key]) {
accumulator[key] = [];
}
accumulator[key].push(currentValue);
return accumulator;
}, {
});
console.log(groupedPeople);
// Output: {
// 25: [{ name: 'Alice', age: 25 }, { name: 'David', age: 25 }],
// 30: [{ name: 'Bob', age: 30 }, { name: 'Emily', age: 30 }],
// 35: [{ name: 'Charlie', age: 35 }]
// }
複数の配列を 1 つのオブジェクトに結合する
const keys = ['name', 'age', 'gender'];
const values = ['Alice', 25, 'female'];
const person = keys.reduce((accumulator, currentValue, index) => {
accumulator[currentValue] = values[index];
return accumulator;
}, {
});
console.log(person); // Output: { name: 'Alice', age: 25, gender: 'female' }
文字列をオブジェクトに変換する
const str = 'key1=value1&key2=value2&key3=value3';
const obj = str.split('&').reduce((accumulator, currentValue) => {
const [key, value] = currentValue.split('=');
accumulator[key] = value;
return accumulator;
}, {
});
console.log(obj);
// Output: { key1: 'value1', key2: 'value2', key3: 'value3' }
オブジェクトをクエリ文字列に変換する
const params = {
foo: "bar", baz: 42 };
const queryString = Object.entries(params).reduce((acc, [key, value]) => {
return `${
acc}${
key}=${
value}&`;
}, "?").slice(0, -1);
console.log(queryString); // "?foo=bar&baz=42"
フィボナッチ数列を出力する
const fibonacci = n => {
return [...Array(n)].reduce((accumulator, currentValue, index) => {
if (index < 2) {
accumulator.push(index);
} else {
accumulator.push(accumulator[index - 1] + accumulator[index - 2]);
}
return accumulator;
}, []);
};
console.log(fibonacci(10)); // Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
文字列が回文かどうかを確認します
const str = 'racecar';
const isPalindrome = str.split('').reduce((accumulator, currentValue, index, array) => {
return accumulator && currentValue === array[array.length - index - 1];
}, true);
console.log(isPalindrome); // Output: true
一致する括弧をチェックします
const str = "(()()())";
const balanced = str.split("").reduce((acc, cur) => {
if (cur === "(") {
acc++;
} else if (cur === ")") {
acc--;
}
return acc;
}, 0) === 0;
console.log(balanced); // true
オブジェクトのプロパティを再帰的に取得する
const user = {
info: {
name: "Jason",
address: {
home: "Shaanxi", company: "Xian" },
},
};
function get(config, path, defaultVal) {
return path.split('.').reduce((config, name) => config[name], config) || defaultVal;
return fallback;
}
get(user, "info.name"); // Jason
get(user, "info.address.home"); // Shaanxi
get(user, "info.address.company"); // Xian
get(user, "info.address.abc", "default"); // default
手書き縮小
function myReduce(arr, callback, initialValue) {
let accumulator = initialValue === undefined ? arr[0] : initialValue;
for (let i = initialValue === undefined ? 1 : 0; i < arr.length; i++) {
accumulator = callback(accumulator, arr[i], i, arr);
}
return accumulator;
}
上記のコードでは、myReduce関数は 3 つのパラメータを受け入れます:reduce演算対象の配列arr、コールバック関数callback、アキュムレータの初期値ですinitialValue。初期値が指定されていない場合は、配列の最初の要素がアキュムレータの初期値として使用されます。
次に、ループ内で、initialValue があれば最初の要素からコールバックをたどりますが、このとき callabck の 2 番目のパラメータは配列の最初の要素から始まり、initialValue がない場合は 2 番目の要素から始まります。 element コールバックを走査すると、コールバックの 2 番目のパラメータは配列の 2 番目の項目から始まります。配列の 2 番目の要素から開始して、配列内の各要素に対してコールバック関数が順番に実行され、戻り値が使用されます次のコールバック関数として、実行時のアキュムレータの値。
最後に、myReduce関数は最後のコールバック関数の戻り値、つまり最終累積値を返します。
この単純な関数では、多くの境界ケースや複雑なアプリケーション シナリオが考慮されていませんが、関数の実現原理をreduceより深く理解するのに役立ちます。reduce