diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/api/console/table/index.html | |
parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip |
initial commit
Diffstat (limited to 'files/pt-br/web/api/console/table/index.html')
-rw-r--r-- | files/pt-br/web/api/console/table/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/files/pt-br/web/api/console/table/index.html b/files/pt-br/web/api/console/table/index.html new file mode 100644 index 0000000000..946a642003 --- /dev/null +++ b/files/pt-br/web/api/console/table/index.html @@ -0,0 +1,143 @@ +--- +title: Console.table() +slug: Web/API/Console/table +translation_of: Web/API/Console/table +--- +<div>{{APIRef("Console API")}}</div> + +<p><span class="seoSummary">Exibe dados tabulares como uma tabela.</span></p> + +<p>Essa função recebe um parâmetro obrigatório <code>data</code>, que deve ser um array ou um objeto, e um parametro opcional <code>columns</code>.</p> + +<p>Registra <code>data</code> como uma tabela. Cada elemento no array (ou propriedade enumerável se <code>data</code> for um objeto) será uma linha na tabela.</p> + +<p>A primeira coluna na tabela será rotulada <code>(index)</code>. Se <code>data</code> for um array, seus valores serão os índices da matriz. Se <code>data</code> for um objeto, seus valores serão os nomes das propriedades. Observe que (no Firefox) o <code>console.table</code> está limitado a exibir 1000 linhas (a primeira linha é o índice rotulado).</p> + +<p>{{AvailableInWorkers}}</p> + +<h3 id="Coleções_de_tipos_primitivos">Coleções de tipos primitivos</h3> + +<p>O argumento <code>data</code> pode ser um array ou um objeto.</p> + +<pre class="brush: js">// um 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">// um objeto cujas propriedades são 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="Coleções_de_tipos_compostos">Coleções de tipos compostos</h3> + +<p>Se os elementos no array, ou propriedades no objeto, forem arrays ou objetos, seus elementos ou propriedades serão enumerados na linha, um por coluna:</p> + +<pre class="brush: js">// um 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">// um 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>Observe que, se a matriz contiver objetos, as colunas serão rotuladas com o nome da propriedade.</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">// um objeto cujas propriedades são 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="Restringindo_as_colunas_exibidas">Restringindo as colunas exibidas</h3> + +<p>Por padrão, <code>console.table()</code> lista todos os elementos em cada linha. Você pode usar o parâmetro opcional <code>columns</code> para selecionar um subconjunto de colunas a serem exibidas:</p> + +<pre class="brush: js">// um array de objetos, registrando apenas 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="Classificando_colunas">Classificando colunas</h3> + +<p>Você pode classificar a tabela por uma coluna específica clicando no rótulo dessa coluna.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">console.table(data [, <em>columns</em>]); +</pre> + +<h3 id="Parâmentros">Parâmentros</h3> + +<dl> + <dt><code>data</code></dt> + <dd>Os dados a serem exibidos. Deve ser um array ou um objeto.</dd> + <dt><code>columns</code></dt> + <dd>Um array contendo os nomes das colunas para incluir na saída.</dd> +</dl> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Console API", "#table", "console.table()")}}</td> + <td>{{Spec2("Console API")}}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browsers">Compatibilidade de browsers</h2> + +<div> + + +<p>{{Compat("api.Console.table")}}</p> +</div> |