console.table() en JavaScript - Codificación N Conceptos

En este tutorial, aprenderemos cómo mostrar datos como una tabla en la consola usando mesa de consola() método de registro avanzado. Esto es muy útil para ver matrices y objetos complejos en JavaScript.

Índice
  1. mesa de consola([])
  2. mesa de consola([ [], [], [] ])
  3. consola.tabla(Objeto)
  4. consola.tabla(Objetos[])
  5. consola.tabla(Objeto de Objetos)
  6. Conclusión

mesa de consola([])

Nos conectamos desplegar de números usando ambos consola.log() y mesa de consola() para ver cuanto mesa de consola() imprimió una tabla para mostrar la tabla de números.

var numbers = ["one", "two", "three"];

console.log(numbers);
console.table(numbers);

Output

[ 'one', 'two', 'three' ] ┌─────────┬─────────┐ │ (index) │ Values │ ├─────────┼─────────┤ │ 0 │ 'one' │ │ 1 │ 'two' │ │ 2 │ 'three' │ └─────────┴─────────┘

mesa de consola([ [], [], [] ])

La visualización en forma tabular se vuelve más conveniente cuando imprimimos matriz de matrices utilizando mesa de consola() como comparar consola.log() método.

var numbers = [["one", "1", "I"], ["two", "2", "II"], ["three", "2", "III"]];

console.log(numbers);
console.table(numbers);

Output

[ [ 'one', '1', 'I' ], [ 'two', '2', 'II' ], [ 'three', '3', 'III' ] ] ┌─────────┬─────────┬─────┬───────┐ │ (index) │ 0 │ 1 │ 2 │ ├─────────┼─────────┼─────┼───────┤ │ 0 │ 'one' │ '1' │ 'I' │ │ 1 │ 'two' │ '2' │ 'II' │ │ 2 │ 'three' │ '3' │ 'III' │ └─────────┴─────────┴─────┴───────┘

consola.tabla(Objeto)

Similar a las tablas, Objetos se puede imprimir usando mesa de consola() para ser visto en forma tabular.

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

var john = new Person("John", "Smith", 41);

console.log(john);
console.table(john);

Output

Person { firstName: 'John', lastName: 'Smith', age: 41 } ┌───────────┬─────────┐ │ (index) │ Values │ ├───────────┼─────────┤ │ firstName │ 'John' │ │ lastName │ 'Smith' │ │ age │ 41 │ └───────────┴─────────┘

consola.tabla(Objetos[])

La visualización en forma tabular se vuelve más conveniente cuando imprimimos matriz de objetos utilizando mesa de consola() como comparar consola.log() método.

var john = new Person("John", "Smith", 41);
var jane = new Person("Jane", "Doe", 38);
var emily = new Person("Emily", "Jones", 12);

console.log([john, jane, emily]);
console.table([john, jane, emily]);

Output

[ Person { firstName: 'John', lastName: 'Smith', age: 41 }, Person { firstName: 'Jane', lastName: 'Doe', age: 38 }, Person { firstName: 'Emily', lastName: 'Jones', age: 12 } ] ┌─────────┬───────────┬──────────┬─────┐ │ (index) │ firstName │ lastName │ age │ ├─────────┼───────────┼──────────┼─────┤ │ 0 │ 'John' │ 'Smith' │ 41 │ │ 1 │ 'Jane' │ 'Doe' │ 38 │ │ 2 │ 'Emily' │ 'Jones' │ 12 │ └─────────┴───────────┴──────────┴─────┘
Restringir la visualización de columnas

Puede pasar los segundos argumentos como una matriz de campos que desea mostrar. Solo estas columnas se mostrarán como una tabla.

console.table([john, jane, emily], ["firstName"]);

Output

┌─────────┬───────────┐ │ (index) │ firstName │ ├─────────┼───────────┤ │ 0 │ 'John' │ │ 1 │ 'Jane' │ │ 2 │ 'Emily' │ └─────────┴───────────┘

consola.tabla(Objeto de Objetos)

Complejo objetos anidados son muy fáciles de visualizar usando mesa de consola()

var family = {};

family.mother = new Person("Jane", "Smith", 38);
family.father = new Person("John", "Smith", 41);
family.daughter = new Person("Emily", "Smith", 12);

console.table(family);

Output

┌──────────┬───────────┬──────────┬─────┐ │ (index) │ firstName │ lastName │ age │ ├──────────┼───────────┼──────────┼─────┤ │ mother │ 'Jane' │ 'Smith' │ 38 │ │ father │ 'John' │ 'Smith' │ 41 │ │ daughter │ 'Emily' │ 'Smith' │ 12 │ └──────────┴───────────┴──────────┴─────┘
Ordenar visualización de columnas

También tenga en cuenta que cuando estos formatos tabulares se representan en la consola del navegador. Puede hacer clic en los encabezados de las columnas de la tabla para ordenar por columna.

┌──────────┬─────────────┬──────────┬─────┐
│ (index)  │ firstName ▲ │ lastName │ age │
├──────────┼─────────────┼──────────┼─────┤
│ daughter │  'Emily'    │ 'Smith'  │ 12  │
│  mother  │  'Jane'     │ 'Smith'  │ 38  │
│  father  │  'John'     │ 'Smith'  │ 41  │
└──────────┴─────────────┴──────────┴─────┘
Restringir la visualización de columnas

Nuevamente, pase los segundos argumentos como una matriz de campos que desea mostrar. Solo estas columnas se mostrarán como una tabla.

console.table(family, ["firstName", "age"]);

Output

┌──────────┬───────────┬─────┐ │ (index) │ firstName │ age │ ├──────────┼───────────┼─────┤ │ mother │ 'Jane' │ 38 │ │ father │ 'John' │ 41 │ │ daughter │ 'Emily' │ 12 │ └──────────┴───────────┴─────┘

Conclusión

Hemos aprendido en este tutorial cómo mesa de consola() es útil para ver tablas y objetos complejos en formato tabular y también brinda la capacidad de ordenar columnas y restringir la visualización de columnas.

Este método de registro avanzado es compatible con todos los navegadores modernos, como Chrome, Edge, Firefox, Opera y Safari.

Referencia: documentación web de MDN

Si quieres conocer otros artículos parecidos a console.table() en JavaScript - Codificación N Conceptos puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas