La tarea es ordenar la array de JavaScript en varias columnas con la ayuda de JavaScript. Hay dos enfoques que se analizan a continuación.
Enfoque 1: combinar las operaciones de clasificación múltiple por operador OR y comparar las strings. Para comparar la string, usaremos el método localeCompare() .
Ejemplo: Este ejemplo implementa el enfoque anterior. Primero clasificando en cuatro columnas y luego en dos columnas.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to sort an array on multiple
columns using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="GFG_Fun();">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var arr = [
[1, 'GFG', 2, 'Geek'],
[3, 'g', 1, 'for'],
[2, 'portal', 0, 'Geeks'],
];
up.innerHTML = "Click on the button to sort "
+ "the array on multiple columns on "
+ "strings.< br > [" + arr[0]
+ "] < br > [" + arr[1] + "] < br > ["
+ arr[2] + "]";
function GFG_Fun() {
arr.sort(function (a, b) {
return a[3].localeCompare(b[3])
|| a[1].localeCompare(b[1]);
});
down.innerHTML = "[" + arr[0] + "]<br>["
+ arr[1] + "]<br>[" + arr[2] + "]";
}
</script>
</body>
</html>
Producción:
Enfoque 2: si clasificamos los elementos en números, use los operadores de comparación para comparar los valores. La idea es realizar primero la operación en una sola columna y, si los valores son similares, pasar a la siguiente columna y hacer lo mismo.
Ejemplo: Este ejemplo implementa el enfoque anterior.
Primero clasificando en tres columnas y luego en una columna.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to sort an array on multiple
columns using JavaScript?
</title>
</head>
<body style="text-align:center;">
<h1>GeeksForGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="GFG_Fun();">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var arr = [
[1, 'GFG', 2, 'Geek'],
[3, 'g', 0, 'for'],
[2, 'portal', 0, 'Geeks'],
];
up.innerHTML = "Click on the button to sort "
+ "the array on multiple columns on "
+ "strings.< br > [" + arr[0]
+ "] < br > [" + arr[1]
+ "] < br > [" + arr[2] + "]";
function GFG_Fun() {
arr.sort(function (a, b) {
var o1 = a[2];
var o2 = b[2];
var p1 = a[0];
var p2 = b[0];
if (o1 < o2) return -1;
if (o1 > o2) return 1;
if (p1 < p2) return -1;
if (p1 > p2) return 1;
return 0;
});
down.innerHTML = "[" + arr[0] + "]<br>["
+ arr[1] + "]<br>[" + arr[2] + "]";
}
</script>
</body>
</html>
Producció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