aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/javascript/reference/global_objects/array/push/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-br/web/javascript/reference/global_objects/array/push/index.html')
-rw-r--r--files/pt-br/web/javascript/reference/global_objects/array/push/index.html184
1 files changed, 184 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/push/index.html b/files/pt-br/web/javascript/reference/global_objects/array/push/index.html
new file mode 100644
index 0000000000..7b93843b2b
--- /dev/null
+++ b/files/pt-br/web/javascript/reference/global_objects/array/push/index.html
@@ -0,0 +1,184 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+tags:
+ - Array
+ - JavaScript
+ - Push
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef("Global_Objects", "Array")}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>O método <strong>push() </strong>adiciona um ou mais elementos ao final de um array e retorna o novo comprimento desse array.</p>
+
+<pre class="brush: js">var numeros = [1, 2, 3];
+numeros.push(4);
+
+console.log(numeros); // [1, 2, 3, 4]
+
+numeros.push(5, 6, 7);
+
+console.log(numeros); // [1, 2, 3, 4, 5, 6, 7]
+</pre>
+
+<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Sintaxe</strong></p>
+
+<pre class="syntaxbox"><code><var>arr</var>.push(<var>elemento1</var>, ..., <var>elementoN</var>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<dl>
+ <dt><code>elemento<em>N</em></code></dt>
+ <dd>Os elementos a serem incluídos ao final do array.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Retorno</h3>
+
+<p>O novo valor da propriedade {{jsxref("Array.length", "length")}} do objeto no qual o método foi chamado.</p>
+
+<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Descrição</strong></p>
+
+<p>O método <code style="font-style: normal;">push</code> adiciona valores a um array.</p>
+
+<p>Esse método é intencionalmente genérico. Podendo ser utilizado por {{jsxref("Function.call", "call()")}} ou {{jsxref("Function.apply", "apply()")}} em objetos que implementam arrays.  O método <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">push </span><span style="line-height: 1.5;">depende da propriedade </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">length</span><span style="line-height: 1.5;"> para determinar onde começar a inserir os valores. Caso a propriedade <code>length</code></span> não possa ser convertida em número, é utilizado 0 como índice. Isto inclui a possibilidade de <code>length </code>não existir, nesse caso, essa propriedade será criada.</p>
+
+<p>Os únicos objetos que implementam nativamente array são as {{jsxref("Global_Objects/String", "strings", "", 1)}}, porém elas não são adequadas para a aplicação desse método, pois são imutáveis.</p>
+
+<h2 id="Examples" name="Examples">Exemplos</h2>
+
+<h3 id="Example:_Adding_elements_to_an_array" name="Example:_Adding_elements_to_an_array">Exemplo: Adicionando elementos a um array</h3>
+
+<p>O seguinte código cria um array <code>esportes</code> que contém dois elementos. Então adiciona dois elementos a ele. A variável <code>total</code> contém o novo comprimento do array.</p>
+
+<pre class="brush: js">var esportes = ['futebol', 'beisebol'];
+var total = esportes.push('handebol', 'natacao');
+
+console.log(esportes); // ['futebol, 'beisebol', 'handebol', 'natacao']
+console.log(total); // 4
+</pre>
+
+<h3 id="Example:_Adding_elements_to_an_array" name="Example:_Adding_elements_to_an_array" style="line-height: 24px; font-size: 1.71428571428571rem;">Exemplo: Fusão de dois arrays</h3>
+
+<p>Este exemplo utiliza {{jsxref("Function.apply", "apply()")}} para adicionar todos os elementos de um segundo array.</p>
+
+<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> vegetais <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">'cenoura'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'batata'</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="keyword token" style="color: #0077aa;">var</span> maisVegetais <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">[</span><span class="string token" style="color: #669900;">'aipo'</span><span class="punctuation token" style="color: #999999;">,</span> <span class="string token" style="color: #669900;">'beterraba'</span><span class="punctuation token" style="color: #999999;">]</span><span class="punctuation token" style="color: #999999;">;</span>
+<span class="comment token" style="color: #708090;">
+// Adiciona o segundo array no primeiro
+</span><span class="comment token" style="color: #708090;">// Equivalente a vegetais.push('aipo', 'beterraba');
+</span>Array<span class="punctuation token" style="color: #999999;">.</span>prototype<span class="punctuation token" style="color: #999999;">.</span>push<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">apply<span class="punctuation token" style="color: #999999;">(</span></span>vegetais<span class="punctuation token" style="color: #999999;">,</span> maisVegetais<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
+
+console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>vegetais<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // ['cenoura', 'batata', 'aipo', 'beterraba']</span></code></pre>
+
+<h3 id="Example:_Using_an_object_in_an_array-like_fashion" name="Example:_Using_an_object_in_an_array-like_fashion" style="line-height: 24px; font-size: 1.71428571428571rem;">Exemplo: Utilizando um object como um array-like</h3>
+
+<p>Como mencionado acima, <code>push</code> é intencionalmente genérico, e podemos usar isso para nossa vantagem. <code>Array.prototype.push</code> pode trabalhar em um objeto muito bem, como mostra este exemplo. Observe que não criamos um array para armazenar uma coleção de objetos. Em vez disso, armazenamos a coleção no objeto em si e usamos a chamada em <code>Array.prototype.push</code> para enganar o método e pensar que estamos lidando com um array, e ele simplesmente funciona, graças à forma como o JavaScript nos permite estabelecer o contexto de execução quando queremos.</p>
+
+<pre class="brush: js">var obj = {
+ length: 0,
+
+ addElem: function addElem(elem) {
+ // obj.length é automaticamente incrementado
+ // toda vez que um elemento for adicionado.
+ [].push.call(this, elem);
+ }
+};
+
+// Vamos adicionar alguns objetos vazios apenas para ilustrar.
+obj.addElem({});
+obj.addElem({});
+console.log(obj.length);
+// → 2
+</pre>
+
+<p>Observe que, embora <code>obj</code> não seja um array, o método <code>push</code> aumentou com sucesso a propriedade de comprimento (<code>length</code>) do <code>obj</code> como se estivéssemos lidando com um array.</p>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Especificação</th>
+ <th scope="col">Estado</th>
+ <th scope="col">Comentário</th>
+ </tr>
+ <tr>
+ <td>ECMAScript 3ª Edição</td>
+ <td>Padrão</td>
+ <td>Implementação inicial. Implentado no JavaScript 1.2.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+ <td>{{Spec2('ES5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+ <td>{{Spec2('ES6')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade em navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Característica</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Suporte básico</td>
+ <td>{{CompatChrome("1.0")}}</td>
+ <td>{{CompatGeckoDesktop("1.7")}}</td>
+ <td>{{CompatIE("5.5")}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th><span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Característica</span></th>
+ <th>Android</th>
+ <th>Chrome para Android</th>
+ <th>Firefox Móvel (Gecko)</th>
+ <th>IE M<span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">óvel</span></th>
+ <th>Opera <span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Móvel</span></th>
+ <th>Safari <span style="font-family: 'Open Sans Light',sans-serif; font-size: 16px; line-height: 16px;">Móvel</span></th>
+ </tr>
+ <tr>
+ <td><span style="font-size: 12px; line-height: 18px;">Suporte básico</span></td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>