diff options
Diffstat (limited to 'files/es/web/api/console/tabla/index.html')
-rw-r--r-- | files/es/web/api/console/tabla/index.html | 212 |
1 files changed, 212 insertions, 0 deletions
diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/tabla/index.html new file mode 100644 index 0000000000..53f57f5636 --- /dev/null +++ b/files/es/web/api/console/tabla/index.html @@ -0,0 +1,212 @@ +--- +title: Console.table() +slug: Web/API/Console/tabla +tags: + - API + - Consola + - DOM + - Depuración +translation_of: Web/API/Console/table +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Muestra datos tabulares como una tabla.</span></p> + +<p>Esta función toma un argumento obligatorio: <code>data</code>, que debe ser un array o un objeto, y un parámetro adicional: <code>columns</code>.</p> + +<p>Muestra <code>data</code> como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si <code>data</code> es un objeto) será una fila en la tabla.</p> + +<p>La primera columna de la tabla se identificará como <code>(index)</code>. Si <code>data</code> es un array, sus valores serán los índices del array. Si <code>data</code> es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) <code>console.table</code> está limitado a mostrar 1000 filas (la primera columna es la llamada <code>index</code>).</p> + +<p>{{AvailableInWorkers}}</p> + +<h3 id="Colecciones_de_tipos_primitivos">Colecciones de tipos primitivos</h3> + +<p>El argumento <code>data</code> puede ser un array o un objeto.</p> + +<pre class="brush: js">// un array de strings + +console.table(["apples", "oranges", "bananas"]);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png"></p> + +<pre class="brush: js">// un objeto cuyas propiedades son strings + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var me = new Person("John", "Smith"); + +console.table(me);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png"></p> + +<h3 id="Colecciones_de_tipos_compuestos">Colecciones de tipos compuestos</h3> + +<p>Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:</p> + +<pre class="brush: js">// un array de arrays + +var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] +console.table(people);</pre> + +<p><img alt="Table displaying array of arrays" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png"></p> + +<pre class="brush: js">// un array de objetos + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily]);</pre> + +<p>Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.</p> + +<p><img alt="Table displaying array of objects" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png"></p> + +<pre class="brush: js">// un objeto cuyas propiedades son objetos + +var family = {}; + +family.mother = new Person("Jane", "Smith"); +family.father = new Person("John", "Smith"); +family.daughter = new Person("Emily", "Smith"); + +console.table(family);</pre> + +<p><img alt="Table displaying object of objects" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png"></p> + +<h3 id="Restringiendo_las_columnas_mostradas">Restringiendo las columnas mostradas</h3> + +<p>Por defecto, <code>console.table()</code> muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional <code>columns</code> para seleccionar un subconjunto de columnas que mostrar:</p> + +<pre class="brush: js">// an array of objects, logging only firstName + +function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; +} + +var john = new Person("John", "Smith"); +var jane = new Person("Jane", "Doe"); +var emily = new Person("Emily", "Jones"); + +console.table([john, jane, emily], ["firstName"]);</pre> + +<p><img alt="Table displaying array of objects with filtered output" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png"></p> + +<h3 id="Ordenando_columnas">Ordenando columnas</h3> + +<p>Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">console.table(data [, <em>columns</em>]); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>data</code></dt> + <dd>La información a mostrar. Puede ser tanto un array como un objeto.</dd> + <dt><code>columns</code></dt> + <dd>Un array que contenga los nombres de las columnas a incluir.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#table", "console.table()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Disponible en workers</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Disponible en workers</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("38.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> |