Dada una array de objetos y la tarea es obtener el valor máximo y mínimo de la array de objetos. Hay algunos métodos utilizados que se discuten a continuación:
- Método Javascript apply(): es un método de escritura que se utiliza en diferentes objetos. Este método es diferente de la función call() debido a que toma los argumentos como una array.
Sintaxis:
apply()
Valor de retorno: Devuelve los valores del método de una función dada.
- Método JavaScript Array map(): este método se usa para crear una nueva array con los resultados de llamar a una función para cada elemento de la array. Este método llama a la función dada una vez para cada elemento de una array, en orden.
Sintaxis:
array.map(function(cValue, index, arr), thisValue)
Parámetros:
- function(cValue, index, arr): Es un parámetro requerido. Es una función que se ejecutará para cada elemento de la array.
- cValue: Es un parámetro requerido. Especifica el valor del elemento actual.
- índice: Es un parámetro opcional. Especifica el índice de array del elemento actual.
- arr: Es un parámetro opcional. Especifica el objeto de array al que pertenece el elemento actual.
- thisValue: Es un parámetro opcional. Especifica el valor que se pasará a la función para que se utilice como su valor «este». Si no se usa, el valor «indefinido» se pasará como su valor «este».
Valor de retorno: Devuelve una array que tiene los resultados de llamar a la función proporcionada para cada elemento de la array original.
- function(cValue, index, arr): Es un parámetro requerido. Es una función que se ejecutará para cada elemento de la array.
- Método JavaScript Array reduce(): este método reduce la array a un solo valor. Este método ejecuta una función definida para cada valor de la array (de izquierda a derecha). El valor de retorno de la función se almacena en un acumulador (resultado o total).
Sintaxis:
array.reduce(function(total, curValue, curIndex, arr), initialValue)
Parámetros:
- function(total, curValue, curIndex, arr): Es un parámetro requerido. Es una función que se ejecutará para cada elemento de la array.
- total: Es un parámetro obligatorio. Especifica el valor inicial, o el valor devuelto previamente de la función.
- curValue: Es un parámetro requerido. Especifica el valor del elemento actual.
- curIndex: Es un parámetro requerido. Especifica el índice de array del elemento actual.
- arr: Es un parámetro opcional. Especifica el objeto de array al que pertenece el elemento actual.
- initialValue: Es un parámetro opcional. Especifica el valor que se pasará a la función como valor inicial.
Valor de retorno: Devuelve el resultado acumulado de la última llamada de la función de devolución de llamada.
- function(total, curValue, curIndex, arr): Es un parámetro requerido. Es una función que se ejecutará para cada elemento de la array.
Ejemplo 1: Este ejemplo obtiene el valor máximo de la propiedad y usando el método apply() y map() .
<!DOCTYPE HTML>
<html>
<head>
<title>
Max value of an attribute in an array of objects
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style = "font-size: 16px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var array = [
{ "x": "3/10/2003", "y": 0.023452007 },
{ "x": "8/12/2002", "y": 0.02504234 },
{ "x": "1/16/2001", "y": 0.024533546 },
{ "x": "8/19/2006", "y": 0.03123423457 }];
el_up.innerHTML = JSON.stringify(array);
function gfg_Run() {
el_down.innerHTML = "Maximum value of y = " +
Math.max.apply(Math, array.map(function(o) {
return o.y;
}));
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: Este ejemplo obtiene el valor mínimo de la propiedad y usando el método array.reduce() . Devuelve el objeto completo.
<!DOCTYPE HTML>
<html>
<head>
<title>
Min value of an attribute in an array of objects
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style = "font-size: 16px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var array = [
{ "x": "3/10/2003", "y": 0.023452007 },
{ "x": "8/12/2002", "y": 0.02504234 },
{ "x": "1/16/2001", "y": 0.024533546 },
{ "x": "8/19/2006", "y": 0.03123423457 }];
el_up.innerHTML = JSON.stringify(array);
function gfg_Run() {
el_down.innerHTML =
JSON.stringify(array.reduce(function(prev, current) {
return (prev.y < current.y) ? prev : current
}));
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA