diff options
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.html | 184 |
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> |