La función de reducción puede realizar operaciones como acumulación, filtrado, agrupación, mapeo, etc. según sea necesario, y es un método de matriz muy poderoso. Se usa con mucha frecuencia en el procesamiento de datos. Muchas lógicas complejas son muy simples si se procesan con reduce. En el proceso de trabajo de desarrollo real, algunos fragmentos de código comunes y súper útiles de técnicas de reducción se han acumulado y examinado de la siguiente manera 10 para su referencia
reducir la introducción
reduceEs un método de matriz, que puede ejecutar una función de devolución de llamada para cada elemento de la matriz y calcular un valor final secuencialmente de izquierda a derecha. Su sintaxis es:
arr.reduce (devolución de llamada (acumulador, valor actual [, índice [, matriz]]) [, valor inicial])
Entre ellos, callbackse encuentra la función de devolución de llamada ejecutada por cada elemento, que contiene 4 parámetros:
accumulator: Acumulador, que es el valor de retorno de la última ejecución de la función de devolución de llamada.currentValue: El valor del elemento actual.index: El subíndice del elemento actual.array: la matriz original.
initialValuees opcional y representa el valor inicial del acumulador.
reduceLa ejecución de la función es la siguiente:
Si no se proporciona
initialValue, el primer elemento de la matriz se usa como el valor inicial del acumulador; de lo contrario, seinitialValueusa .Ejecuta la función de devolución de llamada para cada elemento de la matriz, a partir del segundo elemento de la matriz.
El valor de retorno de la función de devolución de llamada se usa como el valor del acumulador cuando la función de devolución de llamada se ejecuta la próxima vez.
Después de ejecutar la función de devolución de llamada para cada elemento de la matriz,
reducela función devuelve el valor de retorno de la última función de devolución de llamada, que es el valor acumulado final.
Cuente el número de ocurrencias de cada elemento en una matriz
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 }
Aplanar arreglos anidados
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]
agrupar por condición
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 }]
// }
Combinar varias matrices en un objeto
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' }
convertir cadena en objeto
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' }
Convertir objeto en cadena de consulta
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"
Imprime la sucesión de Fibonacci
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]
Comprueba si una cadena es un palíndromo
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
Comprueba si hay paréntesis coincidentes
const str = "(()()())";
const balanced = str.split("").reduce((acc, cur) => {
if (cur === "(") {
acc++;
} else if (cur === ")") {
acc--;
}
return acc;
}, 0) === 0;
console.log(balanced); // true
Obtener propiedades de objetos recursivamente
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
reducir manuscrita
Puede comprender mejor cómo funciona escribiendo una reducefunción :
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;
}
En el código anterior, myReducela función acepta 3 parámetros: la matriz en la que se reduceoperará arr, la función de devolución de llamada callbacky el valor inicial del acumulador initialValue. Si no se proporciona un valor inicial, el primer elemento de la matriz se utiliza como valor inicial del acumulador.
Luego, en el ciclo, si hay un valor inicial, la devolución de llamada se recorre desde el primer elemento. En este momento, el segundo parámetro de callabck comienza desde el primer elemento de la matriz; si no hay un valor inicial, comienza desde el segundo Al atravesar la devolución de llamada, en este momento, el segundo parámetro de la devolución de llamada comienza desde el segundo elemento de la matriz. A partir del segundo elemento de la matriz, la función de devolución de llamada se ejecuta para cada elemento de la matriz a su vez, y el retorno value se usa como la siguiente función de devolución de llamada El valor del acumulador en el momento de la ejecución.
Finalmente, myReducela función devuelve el valor de retorno de la última función de devolución de llamada, que es el valor acumulado final.
Esta reducefunción no considera muchos casos límite y escenarios de aplicación complejos, pero puede ayudarnos a comprender mejor reduceel principio de realización de la función.
Acerca de este artículo
Autor: shichuan
https://juejin.cn/post/7224043114360225847