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

reduceEz 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 callbackaz 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 initialValuenem kötelező, és az akkumulátor kezdeti értékét jelöli.

reduceA függvény végrehajtása a következő:

  1. 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 a initialValueused .
  2. 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.
  3. 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.
  4. Miután a visszahívási függvény végrehajtásra került a tömb minden elemére, reducea 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ű reducefü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 myReducea függvény 3 paramétert fogad el: a reducemű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 myReducea 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ű reducefüggvény nem vesz figyelembe sok határesetet és összetett alkalmazási forgatókönyvet, de segíthet jobban megérteni reducea függvény megvalósítási elvét.