Dada una array de objetos y la tarea es ordenar los elementos de la array por 2 campos del objeto. Hay dos métodos para resolver este problema que se discuten a continuación:
Enfoque 1:
- Primero compare la primera propiedad, si ambas son desiguales, ordénelas en consecuencia.
- Si son iguales, haz lo mismo con la segunda propiedad.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to sort an array of object
by two fields in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style = "font-size:
15px; 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 arr = [
{first: 3, second: 4},
{first: 3, second: 1},
{first: 1, second: 10}
];
el_up.innerHTML = "Click on the button to sort "
+ "the array accordingly.<br>Array = '"
+ JSON.stringify(arr[0]) + ", "
+ JSON.stringify(arr[1]) +", "
+ JSON.stringify(arr[2]) + "'";
arr.sort(function (a, b) {
var af = a.first;
var bf = b.first;
var as = a.second;
var bs = b.second;
if(af == bf) {
return (as < bs) ? -1 : (as > bs) ? 1 : 0;
} else {
return (af < bf) ? -1 : 1;
}
});
function gfg_Run() {
el_down.innerHTML = "'" + JSON.stringify(arr[0])
+ ", " + JSON.stringify(arr[1]) + ", "
+ JSON.stringify(arr[2]) + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Primero compare la primera propiedad, si ambas son desiguales, ordénelas en consecuencia.
- Si son iguales, haga lo mismo para la segunda propiedad, este ejemplo sigue el mismo enfoque pero usa OR Gate para reducir el código.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to sort an array of object
by two fields in JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; 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 arr = [
{first: 3, second: 4},
{first: 3, second: 1},
{first: 1, second: 10}
];
el_up.innerHTML = "Click on the button to sort "
+ "the array accordingly.<br>Array = '"
+ JSON.stringify(arr[0]) + ", " +
JSON.stringify(arr[1]) +", " +
JSON.stringify(arr[2]) + "'";
arr.sort(function (a, b) {
return a.first - b.first || a.second - b.second;
});
function gfg_Run() {
el_down.innerHTML = "'" + JSON.stringify(arr[0])
+ ", " + JSON.stringify(arr[1]) + ", "
+ JSON.stringify(arr[2]) + "'";
}
</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