1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
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>
|
