A redukció funkció szükség szerint végrehajthat olyan műveleteket, mint a felhalmozás, szűrés, csoportosítás, leképezés stb., és nagyon hatékony tömbmódszer. Nagyon gyakran használják az adatfeldolgozás során. Sok összetett logika nagyon egyszerű, ha redukcióval dolgozzuk fel. A tényleges fejlesztési munkafolyamat során a redukciós technikák néhány gyakori és rendkívül hasznos kódrészletét felhalmozták és átvizsgálták az alábbiak szerint 10 referenciaként
csökkenti a bevezetést
reduce
Ez egy tömbmetódus, amely a tömb minden elemére felváltva végrehajthat egy visszahívási függvényt, és balról jobbra haladva sorrendben kiszámítja a végső értéket. A szintaxisa a következő:
arr.reduce(visszahívás(akkumulátor, jelenlegiÉrték[, index[, tömb]])[, kezdetiÉrték])
Ezek közül a callback
az egyes elemek által végrehajtott visszahívási függvény, amely 4 paramétert tartalmaz:
accumulator
: Akkumulátor, amely a visszahívási függvény utolsó végrehajtásának visszatérési értéke.currentValue
: Az aktuális elem értéke.index
: Az aktuális elem alsó indexe.array
: az eredeti tömb.
A initialValue
nem kötelező, és az akkumulátor kezdeti értékét jelöli.
reduce
A függvény végrehajtása a következő:
- Ha nincs megadva
initialValue
, akkor a tömb első eleme lesz az akkumulátor kezdeti értéke, ellenkező esetben az akkumulátor kezdeti értéke ainitialValue
used . - Sorra hajtja végre a visszahívási függvényt a tömb minden elemére, a tömb második elemétől kezdve.
- A visszahívási függvény visszatérési értéke az akkumulátor értékeként kerül felhasználásra a visszahívási függvény következő végrehajtásakor.
- Miután a visszahívási függvény végrehajtásra került a tömb minden elemére,
reduce
a függvény az utolsó visszahívási függvény visszatérési értékét adja vissza, amely a végső kumulatív érték.
Számolja meg egy tömb egyes elemeinek előfordulási számát
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 }
Beágyazott tömbök simítása
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]
csoport feltétel szerint
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 }] // }
Egyesítsen több tömböt egyetlen objektummá
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' }
karakterláncot objektummá alakítani
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' }
Konvertálja az objektumot lekérdezési karakterláncsá
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"
Nyomtassa ki a Fibonacci sorozatot
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]
Ellenőrzi, hogy egy karakterlánc palindrom-e
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
Ellenőrzi a megfelelő zárójeleket
const str = "(()()())"; const balanced = str.split("").reduce((acc, cur) => { if (cur === "(") { acc++; } else if (cur === ")") { acc--; } return acc; }, 0) === 0; console.log(balanced); // true
Objektumtulajdonságok lekérése rekurzívan
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
Kézzel írt kicsinyítés
Jobban megértheti, hogyan működik, ha ír egy egyszerű reduce
függvényt:
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; }
A fenti kódban myReduce
a függvény 3 paramétert fogad el: a reduce
működtetni kívánt tömböt arr
, a visszahívási függvényt callback
és az akkumulátor kezdeti értékét initialValue
. Ha nincs megadva kezdeti érték, akkor a tömb első eleme lesz az akkumulátor kezdeti értéke.
Ezután a ciklusban, ha van kezdeti érték, a visszahívás az első elemtől indul be. Ekkor a callabck második paramétere a tömb első elemétől kezdődik; ha nincs kezdeti érték, akkor a második elemtől indul A visszahívást bejárva a visszahívás második paramétere a tömb második elemétől kezdődik. A tömb második elemétől kezdve a visszahívási függvény a tömb minden elemére sorra kerül végrehajtásra, a visszatérési érték pedig a következő visszahívási függvényként Az akkumulátor végrehajtási időpontban érvényes értéke.
Végül a myReduce
a függvény az utolsó visszahívási függvény visszatérési értékét adja vissza, amely a végső összesített érték.
Ez az egyszerű reduce
függvény nem vesz figyelembe sok határesetet és összetett alkalmazási forgatókönyvet, de segíthet jobban megérteni reduce
a függvény megvalósítási elvét.