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/javascript/reference/global_objects/array | |
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/javascript/reference/global_objects/array')
42 files changed, 7060 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/pt-br/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..4256678efd --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,122 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +<div>{{JSRef}}</div> + +<p>O valor inicial da propriedade <code><strong>@@iterator</strong></code> é o mesmo objeto função que o valor inicial da propriedade {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Iteração_usando_laço_for...of">Iteração usando laço <code>for...of</code></h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +// seu navegador deve suportar laço for..of +// e variáveis de escopo let em laços for +for (let letter of arr) { + console.log(letter); +} +</pre> + +<h3 id="Iteração_alternativa">Iteração alternativa</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr[Symbol.iterator](); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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("38")}}</td> + <td>{{CompatGeckoDesktop("36")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("36")}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A partir do Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) até o Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) a propriedade <code>iterator</code> era usada (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), e a partir do Gecko 27 até o Gecko 35 o placeholder <code>"@@iterator"</code> era usado. No Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), o <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Symbol">símbolo</a> <code>@@iterator</code> foi implementado (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/pt-br/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..53805d6ada --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,75 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +tags: + - ES2015 + - JS + - Propriedade + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +<div>{{JSRef}}</div> + +<div>A propriedade de símbolo <code><strong>@@unscopable</strong></code> contém nomes de propriedades que não foram incluídos no padrão ECMAScript antes da versão ES2015. Essas propriedades são excluídas do statement bindings <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>. </div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>As propriedades padrão de array que são excluídas dos bindings <code>with</code> são: copyWithin, entries, fill, find, findIndex, includes, keys, e values.</p> + +<p>Veja {{jsxref("Symbol.unscopables")}} para saber como definir <code>unscopables</code> para seus objetos.</p> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O código a seguir funciona bem no ES5 e abaixo. No entanto, no ECMAScript 2015 e posterior, o método {{jsxref("Array.prototype.keys()")}} foi introduzido. Isso significa que dentro de ambientes <code>with</code>, as "keys" seriam agora o método e não a variável. É aqui que a propriedade de símbolo <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> entra em ação e impede que alguns métodos do Array estejam sendo definidos na instrução <code>with</code>.</p> + +<pre class="brush: js">var keys = []; + +with (Array.prototype) { + keys.push('alguma coisa'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/concat/index.html b/files/pt-br/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..dc8fc20d38 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,159 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>O método concat() retorna um novo array contendo todos os arrays ou valores passados como parâmetro</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><code><em>arr</em>.concat(<em>valor1</em>, <em>valor2</em>, ..., <em>valorN</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">valorN</span></font></dt> + <dd>Arrays ou valores para concatenar (unir) ao array retornado.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p><strong>concat </strong>cria um novo array unindo todos os elementos que foram passados como parâmetro, na ordem dada, para cada argumento e seus elementos (se o elemento passado for um array).</p> + +<p><strong>concat </strong>não altera a si mesmo ou a qualquer um dos argumentos passados, apenas providencia um novo array contendo uma cópia de si mesmo e dos argumentos passados. Os elementos copiados são:</p> + +<ul> + <li>Referência aos objetos (e não o objeto): concat copia a referência aos objetos para o novo array. Tanto o original quanto a cópia apontam para o mesmo objeto. Ou seja, se o objeto foi modificado, tais mudanças serão visíveis no objeto original e no array.</li> +</ul> + +<ul> + <li>Strings e numbers (diferente dos objetos {{jsxref("Global_Objects/String", "String")}} e {{jsxref("Global_Objects/Number", "Number")}}): <code>concat</code> copia os valores de strings e numbers para o novo array. Qualquer alteração no novo array não refletirá no original, e vice versa.</li> +</ul> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example:_Concatenating_two_arrays" name="Example:_Concatenating_two_arrays">Exemplo: Concatenando dois arrays</h3> + +<p>O código a seguir une dois arrays:</p> + +<pre class="brush: js">var alpha = ["a", "b", "c"]; +var numeric = [1, 2, 3]; + +// creates array ["a", "b", "c", 1, 2, 3]; alpha and numeric are unchanged +var alphaNumeric = alpha.concat(numeric); +</pre> + +<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">Exemplo: Concatenando três arrays</h3> + +<p>O código a seguir une três arrays:</p> + +<pre class="brush: js">var num1 = [1, 2, 3]; +var num2 = [4, 5, 6]; +var num3 = [7, 8, 9]; + +// creates array [1, 2, 3, 4, 5, 6, 7, 8, 9]; num1, num2, num3 are unchanged +var nums = num1.concat(num2, num3); +</pre> + +<h3 id="Example:_Concatenating_values_to_an_array" name="Example:_Concatenating_values_to_an_array">Exemplo: Concatenando valores ao array</h3> + +<p>O código a seguir une três valores ao array</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; + +// creates array ["a", "b", "c", 1, 2, 3], leaving alpha unchanged +var alphaNumeric = alpha.concat(1, [2, 3]); +</pre> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition</td> + <td>Standard</td> + <td>Initial definition.<br> + Implemented in JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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.push", "push")}} / {{jsxref("Array.pop", "pop")}} - add/remove elements from the end of the array;</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} - add/remove elements from the beginning of the array;</li> + <li>{{jsxref("Array.splice", "splice")}} - add/remove elements from the specified location of the array.</li> + <li>{{jsxref("String.prototype.concat")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html b/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html new file mode 100644 index 0000000000..a0f794df1a --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/contains/index.html @@ -0,0 +1,106 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/contains +tags: + - Array + - ECMAScript7 + - Experimental + - Expérimental(2) + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p><span class="seoSummary">O método includes<code>()</code> determina se um array contém um determinado elemento, retornando <code>true</code> ou <code>false</code> apropriadamente.</span></p> + +<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Sintaxe</strong></p> + +<pre class="syntaxbox"><code><var>array</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>O elemento a buscar</dd> + <dt><code>fromIndex</code></dt> + <dd>Opcional. A posição no array de onde a busca pelo <code>searchElement </code>se iniciará. Por padrão, 0.</dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes +if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, 'includes', { + value: function(searchElement, fromIndex) { + + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If len is 0, return false. + if (len === 0) { + return false; + } + + // 4. Let n be ? ToInteger(fromIndex). + // (If fromIndex is undefined, this step produces the value 0.) + var n = fromIndex | 0; + + // 5. If n ≥ 0, then + // a. Let k be n. + // 6. Else n < 0, + // a. Let k be len + n. + // b. If k < 0, let k be 0. + var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 7. Repeat, while k < len + while (k < len) { + // a. Let elementK be the result of ? Get(O, ! ToString(k)). + // b. If SameValueZero(searchElement, elementK) is true, return true. + // c. Increase k by 1. + // NOTE: === provides the correct "SameValueZero" comparison needed here. + if (o[k] === searchElement) { + return true; + } + k++; + } + + // 8. Return false + return false; + } + }); +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<p>Proposta ES7: <a href="https://github.com/domenic/Array.prototype.contains/blob/master/spec.md">https://github.com/domenic/Array.prototype.contains/blob/master/spec.md</a></p> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<div>{{Compat("javascript.builtins.Array.includes")}}</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/copywithin/index.html b/files/pt-br/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..4802e87b94 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,203 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>copyWithin()</strong></code> copia parte de um array para outra localização dentro deste mesmo array e o retorna, sem alterar seu tamanho. </p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.copyWithin(<var>target</var>, <var>start</var>[, <var>end</var> = this.length])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Posição para a qual os elementos serão copiados. Caso negativo, o <code>target</code> será contado a partir do final.</dd> + <dt><code>start</code></dt> + <dd>Índice inicial de onde se copiará os elementos. Caso negativo, o <code>start</code> será contado a partir do final.</dd> + <dt><code>end </code>{{optional_inline}}</dt> + <dd>Índice final de onde se copiará os elementos. Caso negativo, o <code>end</code> será contado a partir do final.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Os argumentos <code>target</code>, <code>start</code> e <code>end</code> são restritos a {{jsxref("Number")}} e truncados para valores inteiros.</p> + +<p>Se <code>start</code> for negativo, ele é tratado como <code>length+start</code>, onde <code>length</code> é o comprimento do array. Se <code>end</code> for negativo, ele é tratado como <code>length+end</code>.</p> + +<p>A função <code>copyWithin</code> é intencionalmente <em>genérica</em>, não requer que seu valor <code>this</code> seja um objeto {{jsxref("Array")}} e, adicionalmente, <code>copyWithin</code> é um <em>método mutável</em>, irá mudar o próprio objeto <code>this</code> e retorná-lo, não apenas retornar uma cópia dele.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(0, 3); +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4); +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, -2, -1); +// [4, 2, 3, 4, 5] + +[].copyWithin.call({length: 5, 3: 1}, 0, 3); +// {0: 1, 3: 1, length: 5} + +// Typed Arrays do ES6 são subclasses de Array +var i32a = new Int32Array([1, 2, 3, 4, 5]); + +i32a.copyWithin(0, 2); +// Int32Array [3, 4, 5, 4, 5] + +// Em plataformas que ainda não são compatíveis com ES6: +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.copyWithin) { + Array.prototype.copyWithin = function(target, start/*, end*/) { + // Passos 1-2. + if (this == null) { + throw new TypeError('this é null ou não definido'); + } + + var O = Object(this); + + // Passos 3-5. + var len = O.length >>> 0; + + // Passos 6-8. + var relativeTarget = target >> 0; + + var to = relativeTarget < 0 ? + Math.max(len + relativeTarget, 0) : + Math.min(relativeTarget, len); + + // Passos 9-11. + var relativeStart = start >> 0; + + var from = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Passos 12-14. + var end = arguments[2]; + var relativeEnd = end === undefined ? len : end >> 0; + + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Passo 15. + var count = Math.min(final - from, len - to); + + // Passos 16-17. + var direction = 1; + + if (from < to && to < (from + count)) { + direction = -1; + from += count - 1; + to += count - 1; + } + + // Passo 18. + while (count > 0) { + if (from in O) { + O[to] = O[from]; + } else { + delete O[to]; + } + + from += direction; + to += direction; + count--; + } + + // Passo 19. + return O; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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("45")}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/entries/index.html b/files/pt-br/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..8abb0cf088 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,117 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>entries()</strong></code> retorna um novo objeto <code><strong>Array Iterator</strong></code> que contém os pares chave/valor para cada índice no array.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.entries()</code></pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush:js">var arr = ['a', 'b', 'c']; +var eArr = arr.entries(); + +console.log(eArr.next().value); // [0, 'a'] +console.log(eArr.next().value); // [1, 'b'] +console.log(eArr.next().value); // [2, 'c'] +</pre> + +<h3 id="O_mesmo_que_acima_utilizando_um_loop_for…of">O mesmo que acima, utilizando um loop <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a></h3> + +<pre class="brush:js">var arr = ['a', 'b', 'c']; +var eArr = arr.entries(); + +for (let e of eArr) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c']</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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("38")}}</td> + <td>{{CompatGeckoDesktop("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/every/index.html b/files/pt-br/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..a7d290e58a --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,176 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +tags: + - Array + - JavaScript + - Método(2) + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>every() </strong>testa se todos os elementos do array passam pelo teste implementado pela função fornecida.</code></p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função que testa cada elemento, recebe três parametros: + <dl> + <dt><code>currentValue</code> (obrigatório)</dt> + <dd>O elemento atual sendo processado na array. </dd> + <dt><code>index</code> (opcional)</dt> + <dd>O índice do elemento atual sendo processado na array.</dd> + <dt><code>array</code> (opcional)</dt> + <dd>O array de origem.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opcional. Valor a ser usado como <code>this</code> quando o <code>callback</code> é executado.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p><strong>true</strong> se a função de callback retorna um valor {{Glossary("truthy")}} para cada um dos elementos do array; caso contrário, <strong>false</strong>.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>O método <code>every </code>executa a função <code>callback </code>fornecida uma vez para cada elemento presente no array, até encontrar algum elemento em que a função retorne um valor false (valor que se torna false quando convertido para boolean). Se esse elemento é encontrado, o método <code>every </code>imediatamente retorna false. Caso contrário, se a função <code>callback </code>retornar true para todos elementos, o método retorna true. A função <code>callback</code> é chamada apenas para os elementos do array original que tiverem valores atribuídos; os elementos que tiverem sido removidos ou os que nunca tiveram valores atribuídos não serão considerados.</p> + +<p>A função <code>callback</code> é chamada com três argumentos: o valor do elemento corrente, o índice do elemento corrente e o array original que está sendo percorrido.</p> + +<p>Se o parâmetro <code>thisArg</code> foi passado para o método <code>every</code>, ele será repassado para a função <code>callback</code> no momento da chamada para ser utilizado como o <code>this</code>. Caso contrário, o valor <code>undefined </code>será repassado para uso como o <em><code>this</code></em>. O valor do <code>this</code> a ser repassado para o <code>callback</code> é determinado de acordo com as <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/this">regras usuais para determinar o this visto por uma função</a>.</p> + +<p>O método <code>every </code>não modifica o array original.</p> + +<p>A lista de elementos que serão processados pelo <font face="Consolas, Liberation Mono, Courier, monospace"><code>every</code> </font>é montada antes da primeira chamada da função <code>callback</code>. Se um elemento for acrescentado ao array original após a chamada ao <code>every</code> , ele não será visível para o callback. Se os elementos existentes forem modificados, os valores que serão repassados serão os do momento em que o método <code>every</code> chamar o <code>callback</code>. Elementos removidos não serão considerados.</p> + +<p><code>every</code> funciona como o qualificador "for all" em matemática. Particularmente, para um vetor vazio, é retornado true. (<a href="https://pt.wikipedia.org/wiki/Verdade_por_vacuidade">É verdade por vacuidade</a> que todos os elementos do <a href="https://pt.wikipedia.org/wiki/Conjunto_vazio">conjunto vazio</a> satisfazem qualquer condição.)</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Testando_tamanho_de_todos_os_elementos_do_vetor">Testando tamanho de todos os elementos do vetor</h3> + +<p>O exemplo a seguir testa se todos elementos no array são maiores que 10.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Usando_arrow_functions">Usando arrow functions</h3> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> fornecem sintaxe mais curta para o mesmo teste. </p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(elem => elem >= 10); // false +[12, 54, 18, 130, 44].every(elem => elem >= 10); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>every</code> foi adicionado ao padrão ECMA-262 na 5ª edição; como tal, pode não estar presente em outras implementações do padrão. Você pode contornar isso adicionando o seguinte código no começo dos seus scripts, permitindo o uso de every em implementações que não o suportam nativamente. Esse algoritimo é exatamente o mesmo especificado no ECMA-262, 5ª edição, assumindo que <code>Object e<font face="Open Sans, arial, x-locale-body, sans-serif"> </font></code><code>TypeError tem os seus valores originais e que</code> <code>callbackfn.call retorna o valor original de </code>{{jsxref("Function.prototype.call")}}</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the this + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method + // of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method + // of O with argument Pk. + kValue = O[k]; + + // ii. Let testResult be the result of calling the Call internal method + // of callbackfn with T as the this value and argument list + // containing kValue, k, and O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. If ToBoolean(testResult) is false, return false. + if (!testResult) { + return false; + } + } + k++; + } + return true; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial. Implementada no JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.every")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/fill/index.html b/files/pt-br/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..8957bf3023 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,125 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Global_Objects/Array/fill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>fill()</strong></code> preenche todos os valores do array a partir do índice inicial a um índice final com um valor estático.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.fill(<var>valor</var>[, <var>ínicio<var> = 0[, <var>fim</var> = this.length]])</var></var></code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code><var>valor</var></code></dt> + <dd>Valor para preencher o array.</dd> + <dt><code><var>ínicio</var></code></dt> + <dd>Opcional. Índice inicial.</dd> + <dt><code><var><var><var>fim</var></var></var></code></dt> + <dd>Opcional. Índice final.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O intervalo de preenchimento dos elementos é [<code>início</code>, <code>fim</code>).</p> + +<p>O método <strong><code>fill</code></strong> pode receber até três argumentos <code>valor</code>, <code>ínicio</code> e <code>fim</code>. Os argumentos <code>ínicio</code> e <code>fim</code> são opcionais com valor padrão <code>0 (valor) </code>e o tamanho do objeto <code>(fim)</code>.</p> + +<p>Se o <code>ínicio</code> for negativo, ele será tratado como <code>tamanho + ínicio</code> onde <code>tamanho é o tamanho total do array</code>. Se o <code>fim</code> for negativo, ele será tratado como <code>tamanho + fim</code>.</p> + +<p>A função <strong>fill</strong> é intencionalmente genérica, ele não precisa que o valor do this seja um objeto Array.</p> + +<p>O método <strong>fill</strong> é um método mutável, ele irá mudar o objeto em si, e retorná-lo, não somente uma cópia do objeto.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +Array(3).fill(4); // [4, 4, 4] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.fill) { + Array.prototype.fill = function(value) { + + // Passo 1-2. + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + var O = Object(this); + + // Passo 3-5. + var len = O.length >>> 0; + + // Passo 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Passo 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Passo 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Passo 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Passo 12. + while (k < final) { + O[k] = value; + k++; + } + + // Passo 13. + return O; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.fill")}}</div> + +<div id="compat-desktop"></div> + +<p>[1] Começando com Chrome 36, isto era disponível com uma mudança nas preferencias. Em chrome://flags, ativar a entrada “Enable Experimental JavaScript”.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html b/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html new file mode 100644 index 0000000000..c7b0c08915 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/filtro/index.html @@ -0,0 +1,227 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filtro +tags: + - Array + - ECMAScript 5 + - JavaScript + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>filter()</strong></code> cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtrado é [12, 130, 44] +</pre> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>var newArray = arr</var>.filter(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função é um predicado, para testar cada elemento do array. Retorna <code>true</code> para manter o elemento, <code>false</code> caso contrário, recebendo três argumentos:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd> + <p>O elemento que está sendo processado no array.</p> + </dd> + <dt><code>index</code></dt> + <dd>O índice do elemento atual que está sendo processado no array.</dd> + <dt><code>array</code></dt> + <dd>O array para qual <code>filter</code> foi chamada.</dd> + </dl> + </dd> + <dt><code>thisArg {{Optional_inline}}</code></dt> + <dd>Opcional. Valor a ser usado como <code>this</code> durante a execução do <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Um novo array com os elementos que passaram no teste.</p> + +<h2 id="Descrição">Descrição</h2> + +<p><code>filter()</code> chama a função callback fornecida, uma vez para cada elemento do array, e constrói um novo array com todos os valores para os quais o <code>callback</code> retornou o valor <code>true</code> ou <a href="/en-US/docs/Glossary/Truthy">um valor que seja convertido para true</a>. O <code>callback</code> é chamado apenas para índices do array que possuem valores atribuídos; Ele não é invocado para índices que foram excluídos ou para aqueles que não tiveram valor atribuído. Elementos do array que não passaram no teste do <code>callback</code> são simplesmente ignorados, e não são incluídos no novo array.</p> + +<p><code>callback</code> é invocado com estes três argumentos:</p> + +<ol> + <li>o valor do elemento</li> + <li>o índice do elemento</li> + <li>o objeto do array a ser preenchido</li> +</ol> + +<p>Se o parâmetro <code>thisArg</code> for provido para o filter, ele será passado para o callback<code> quando invocado</code>, para ser usado como o valor do this. Caso contrário, será passado <code>undefined</code> como o valor de <code>this</code>. O valor do <code>this</code> finalmente observado pela função de <code>callback</code> é determinado de acordo com <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">a regra que define o valor do <code>this</code> geralmente visto por uma função</a>.</p> + +<p><code>filter()</code> não altera o <code>array</code> a partir da qual foi invocado.</p> + +<p>O intervalo de elementos processados pela função <code>filter()</code> é definido antes da invocação do primeiro callback. Elementos que forem adicionados ao array depois da invocação do <code>filter()</code> não serão visitados pelo <code>callback</code>. Se elementos existentes no array forem alterados ou deletados, os valores deles que serão passados para o callback são os que eles tiverem quando o <code>filter()</code> visitá-los; Elementos que forem deletados não são visitados.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_Filtrando_todos_os_valores_pequenos">Exemplo: Filtrando todos os valores pequenos</h3> + +<p>Os exemplos a seguir usam <code>filter()</code> para criar um <code>array</code> filtrado em que todos os elementos com valores menores que 10 são removidos.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="Exemplo_Filtrando_entradas_inválidas_para_JSON">Exemplo: Filtrando entradas inválidas para JSON</h3> + +<p>O exemplo a seguir usa <code>filter()</code> para criar um <code>JSON</code> filtrado com todos seus elementos diferentes de zero, e <code>id</code> numérico.</p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function filterByID(obj) { + if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) { + return true; + } else { + invalidEntries++; + return false; + } +} + +var arrByID = arr.filter(filterByID); + +console.log('Filtered Array\n', arrByID); +// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }] + +console.log('Number of Invalid Entries = ', invalidEntries); +// Number of Invalid Entries = 4 +</pre> + +<h3 id="Procurando_em_um_array">Procurando em um array</h3> + +<p>O exemplo a seguir usa <code>filter()</code> para filtrar o conteúdo de um array baseado em um critério de busca</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +function filterItems(query) { + return fruits.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h3 id="Implementação_ES2015">Implementação ES2015</h3> + +<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +const filterItems = (query) => { + return fruits.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1); +}; + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> foi adicionado ao padrão ECMA-262 na 5ª edição; assim como pode não estar presente em todas as implementações do padrão. Você pode trabalhar com isso adicionando o seguinte código no início de seus scripts, permitindo o uso do <code>filter()</code> na implementação ECMA-262 que não tem suporte nativo. Esse algoritmo é exatamente aquele especificado na 5ª edição do ECMA-262, assumindo que <code>fn.call</code> veja o valor original de {{jsxref("Function.prototype.call()")}}, e que {{jsxref("Array.prototype.push()")}} tenha seu valor original.</p> + +<pre class="brush: js">if (!Array.prototype.filter) { + Array.prototype.filter = function(fun/*, thisArg*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var res = []; + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t) { + var val = t[i]; + + // NOTE: Technically this should Object.defineProperty at + // the next index, as push can be affected by + // properties on Object.prototype and Array.prototype. + // But that method's new, and collisions should be + // rare, so use the more-compatible alternative. + if (fun.call(thisArg, val, i, t)) { + res.push(val); + } + } + } + + return res; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial. Implementada no JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<div>{{Compat("javascript.builtins.Array.filter")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> + +<div id="link64_adl_tabid" style="display: none;">24</div> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/find/index.html b/files/pt-br/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..904f65c200 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,157 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>find()</strong></code> retorna o <strong>valor </strong>do <strong>primeiro elemento</strong> do array que satisfizer a função de teste provida. Caso contrario, {{jsxref("undefined")}} é retornado.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div> + +<p class="hidden">O código-fonte desse exemplo interativo está em um repositório do GitHub. Se você quiser contribuir para o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</p> + +<p>Veja também o método {{jsxref("Array.findIndex", "findIndex()")}}, que retorna o <strong>índice</strong> do elemento encontrado no array ao invés do seu valor.</p> + +<p>Se você precisa encontrar a posição de um elemento ou se um elemento existe em um array, use {{jsxref("Array.prototype.indexOf()")}} ou {{jsxref("Array.prototype.includes()")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.find(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função executada a cada iteração do array, recebendo três argumentos: + <dl> + <dt><code>element</code></dt> + <dd>O elemento atual que está sendo processado no array.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>O índice do elemento atualmente sendo processado no array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>O array sobre o qual <code>find</code> foi chamado.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Opcional. Objeto usado como <code>this</code> quando executando o <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>O <strong>valor</strong> do <strong>primeiro elemento</strong> do array que satisfaz a função de teste fornecida; caso contrário, {{jsxref("undefined")}}.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>O método <code>find</code> executa a função <code>callback </code>uma vez para cada elemento presente no array até que encontre um onde <code>callback</code> retorne o valor true. Se o elemento é encontrado, <code>find</code> retorna imediatamente o valor deste elemento. Caso contrário, <code>find</code> retorna {{jsxref("Global_Objects/undefined", "undefined")}}. O <code>callback </code>é acionado para todos os índices do array de <code>0</code> a <code>tamanho-1</code>, não apenas para aqueles que possuem valores atribuídos. Sendo assim, ele pode ser menos eficiente para arrays muito grandes em que existem outros métodos que só visitam os índices que tenham valor atribuído.</p> + +<p>O <code>callback</code> é acionado com três argumentos: o valor do elemento, o índice do elemento e o objeto do Array que está sendo executado.</p> + +<p>Se um parâmetro <code>thisArg</code> é provido ao <code>find</code>, ele será usado como o <code>this</code> para cada acionamento do <code>callback</code>. Se não for provido, então {{jsxref("Global_Objects/undefined", "undefined")}} é usado.</p> + +<p>O <code>find</code> não altera a array à qual foi acionado.</p> + +<p>O conjunto dos elementos processados por <code>find</code> é definido antes do primeiro acionamento do <code>callback</code>. Elementos que são anexados à array após o início da chamada ao <code>find</code> não serão visitados pelo <code>callback</code>. Se um elemento existente ainda não visitado da array for alterado pelo <code>callback</code>, o valor passado ao <code>callback</code> quando o visitar será o valor no momento que <code>find</code> visita o índice daquele elemento; elementos excluídos ainda são visitados.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Encontrar_um_objeto_em_um_array_por_uma_de_suas_propriedades">Encontrar um objeto em um array por uma de suas propriedades</h3> + +<pre class="brush: js notranslate">const inventory = [ + {name: 'apples', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cerejas', quantity: 5} +]; + +function isCherries(fruit) { + return fruit.name === 'cerejas'; +} + +console.log(inventory.find(isCherries)); +// { name: 'cerejas', quantity: 5 }</pre> + +<h4 id="Utilizando_arrow_function">Utilizando arrow function</h4> + +<pre class="brush: js notranslate">const inventory = [ + {name: 'maças', quantity: 2}, + {name: 'bananas', quantity: 0}, + {name: 'cherries', quantity: 5} +]; + +const result = inventory.find( fruit => fruit.name === 'cherries' ); + +console.log(result) // { name: 'cherries', quantity: 5 }</pre> + +<h3 id="Encontrar_um_número_primo_em_um_array">Encontrar um número primo em um array</h3> + +<p>O exemplo a seguir encontra um elemento dentro da array que é número primo (ou retorna {{jsxref("Global_Objects/undefined", "undefined")}} se não houverem números primos).</p> + +<pre class="brush: js notranslate">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found +console.log([4, 5, 8, 12].find(isPrime)); // 5 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este método foi adicionado à especificação do ECMAScript 2015 e pode não estar disponível em todas as implementações do JavaScript. Entretanto, você pode fazer um polyfill para o <code>Array.prototype.find</code> com o trecho de código abaixo:</p> + +<pre class="brush: js notranslate">if (!Array.prototype.find) { + Array.prototype.find = function(predicate) { + if (this === null) { + throw new TypeError('Array.prototype.find called on null or undefined'); + } + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + var list = Object(this); + var length = list.length >>> 0; + var thisArg = arguments[1]; + var value; + + for (var i = 0; i < length; i++) { + value = list[i]; + if (predicate.call(thisArg, value, i, list)) { + return value; + } + } + return undefined; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_Navegador">Compatibilidade do Navegador</h2> + +<div>{{Compat("javascript.builtins.Array.find")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/findindex/index.html b/files/pt-br/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..75c677d20d --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,127 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>findIndex()</strong></code> retorna o <strong>índice</strong> no array do primeiro elemento que satisfizer a função de teste provida. Caso contrário, retorna -1, indicando que nenhum elemento passou no teste.</p> + +<p>Veja também o método {{jsxref("Array.find", "find()")}}, que retorna o <strong>valor</strong> de um elemento encontrado no array em vez de seu índice.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função para executar em cada valor no array, tomando três argumentos: + <dl> + <dt><code>element</code></dt> + <dd>O elemento atual sendo processado no array.</dd> + <dt><code>index</code></dt> + <dd>O índice do elemento atual sendo processado no array.</dd> + <dt><code>array</code></dt> + <dd>O array sobre o qual <code>findIndex</code> foi chamado.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opcional. Objeto para usar como <code>this</code> na execução do <code>callback</code>.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O método <code>findIndex</code> executa a função <code>callback</code> uma vez para cada elemento presente no array até encontrar um onde o <code>callback</code> retorna um valor verdadeiro. Se tal elemento for encontrado, <code>findIndex</code> imediatamente retorna o índice deste elemento. Caso contrário, <code>findIndex</code> retorna -1. <code>callback</code> é invocado apenas para índices no array que têm valores atribuídos; nunca é invocado para índices que foram deletados ou que nunca tiveram valores atribuídos.</p> + +<p><code>callback</code> é invocado com três argumentos: o valor do elemento, o índice do elemento e o objeto Array sendo percorrido.</p> + +<p>Se um parâmetro <code>thisArg</code> for fornecido para <code>findIndex</code>, ele será usado como o <code>this</code> para cada invocação do <code>callback</code>. Se não for fornecido, então {{jsxref("undefined")}} é usado.</p> + +<p><code>findIndex</code> não modifica o array sobre o qual é chamado.</p> + +<p>A série de elementos processados por <code>findIndex</code> é definida antes da primeira invocação do <code>callback</code>. Elementos que são adicionados ao array depois que a chamada a <code>findIndex</code> começa não serão visitados pelo <code>callback</code>. Se um elemento existente não visitado do array for modificado pelo <code>callback</code>, seu valor passado ao <code>callback</code> será o valor no momento em que <code>findIndex</code> visitar o índice deste elemento; elementos que forem deletados não são visitados.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Encontrar_o_índice_de_um_número_primo_em_um_array">Encontrar o índice de um número primo em um array</h3> + +<p>O seguinte exemplo encontra o índice de um elemento no array que é um número primo (ou retorna -1 se não houver número primo).</p> + +<pre class="brush: js notranslate">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, não encontrado +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Esse método foi adicionado à especificação do ECMAScript 6 e pode não estar disponível em todas as implementações de JavaScript ainda. Contudo, você pode fazer o polyfill de <code>Array.prototype.findIndex</code> com o seguinte trecho de código:</p> + +<pre class="brush: js notranslate">if (!Array.prototype.findIndex) { + Array.prototype.findIndex = function(predicate) { + if (this === null) { + throw new TypeError('Array.prototype.findIndex called on null or undefined'); + } + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + var list = Object(this); + var length = list.length >>> 0; + var thisArg = arguments[1]; + var value; + + for (var i = 0; i < length; i++) { + value = list[i]; + if (predicate.call(thisArg, value, i, list)) { + return i; + } + } + return -1; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.findIndex")}}</div> + +<div></div> + +<div><span style="">Veja também</span></div> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/flat/index.html b/files/pt-br/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..b14ffb006f --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,121 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Global_Objects/Array/flat +tags: + - Array + - Experimental + - JavaScript + - Method + - Prototype + - flat +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>O método <code><strong>flat()</strong></code> cria um novo array com todos elementos sub-arrays concatenados nele de forma recursiva até a profundidade<em> </em>especificada.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p> + + + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><var>var novoArray = arr</var>.flat(<var>depth</var>)</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>O nível de profundidade especifíca o quanto um array aninhando deve ser achatado. O Default é 1.</dd> +</dl> + +<h3 id="Retorno">Retorno</h3> + +<p>Um novo array com os elementos sub-array concatenados nele.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Achatando_arrays_aninhados">Achatando arrays aninhados</h3> + +<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] + +<code>const arr4 = [1, 2, [3, 4, [5, 6, [7, 8]]]]; +arr4.flat(Infinity); +// [1, 2, 3, 4, 5, 6, 7, 8]</code></pre> + +<h3 id="Achatando_e_buracos_em_array">Achatando e buracos em array</h3> + +<p>o método flat remove espaços vazios do array:</p> + +<pre class="brush: js notranslate">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5]</pre> + +<div class="line"></div> + +<h2 id="Alternativa">Alternativa</h2> + +<h3 id="reduce_e_concat"><code>reduce</code> e <code>concat</code></h3> + +<pre class="brush: js notranslate">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +//achatar array de nível único +arr1.reduce((acc, val) => acc.concat(val), []); +// [1, 2, 3, 4] + +//para achatamentos mais profundos, use recursividade com reduce e concat +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +(function flattenDeep(arr1){ + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +})(arr1); + +// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] + + +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td> + <td>Draft</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="Veja_Também">Veja Também</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/flatmap/index.html b/files/pt-br/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..f75edaf3ef --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,126 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>O método <strong><code>flatMap()</code></strong> primeiro mapeia cada elemento usando uma função de mapeamento e, em seguida, nivela o resultado em um novo array. É idêntico a um <code>map</code> seguido por um <code>flat</code> de profundidade 1, mas <strong><code>flatMap</code></strong> é bastante útil e mescla ambos em um método um pouco mais eficiente.\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + +<p class="hidden">A fonte deste exemplo interativo é armazenada em um repositório GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone https://github.com/mdn/interactive-examples e envie-nos um PR</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // retorna o elemento para new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função que produz um elemento de uma nova Array, pegando três argumentos: + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>O valor atual sendo processo na array.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>O index do valor atual sendo processo na array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + </dl> + + <p>O <code>map</code> da array que foi chamado.</p> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Valor para ser usado como <code>this</code> quando <code>callback</code> estiver sendo executado.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Uma nova array com cada elemento sendo o resultado da função callback e achatado ao valor de 1.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>Veja {{jsxref("Array.prototype.map()")}} para uma detalhada descrição da função callback. O método <code>flatMap</code> é idêntico ao <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> seguido por um chamado a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten">flatten</a></code> de profundidade 1.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="map_e_flatMap"><code>map</code> e <code>flatMap</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; + +arr1.map(</span></span></span></span></span>x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// [2, 4, 6, 8]</span></span></span></span></span> + +// Só o primeiro nível +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<p>Enquanto que acima poderíamos alcançar apenas com a utilização de map, já aqui temos um exemplo onde <code>flatMap</code> é mais apropriado.</p> + +<p>Vamos gerar uma lista de palavras a partir de uma lista de sentenças.</p> + +<pre class="brush: js">let arr1 = ["it's Sunny in", "", "California"]; + +arr1.map(x=>x.split(" ")); +// [["it's","Sunny","in"],[""],["California"]] + +arr1.flatMap(x => x.split(" ")<span class="js source"><span class="function-call js meta"><span class="br brace js meta square"><span>); +// ["it's","Sunny","in", "", "California"]</span></span></span></span> +</pre> + +<p>Perceba, o comprimento da lista de saída pode ser diferente do comprimento da lista de entrada.</p> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="Alternativa">Alternativa</h2> + +<h3 id="reduce_e_concat"><code>reduce</code> e <code>concat</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; +</span></span></span></span></span> +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// é equivalente a +arr1.reduce((acc, x) => acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span> +<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span> +</pre> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> proposal</a></td> + <td>Rascunho</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2> + +<div> +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira https://github.com/mdn/browser-compat-data e envie-nos uma PR</div> + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatten()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/foreach/index.html b/files/pt-br/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..3ff4e43901 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,212 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p>O método <code>forEach()</code> executa uma dada função em cada elemento de um array.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback(currentValue [, index [, array]])</var>[, <var>thisArg</var>]);</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função para executar em cada elemento, recebendo três argumentos: + <dl> + <dt><code>currentValue</code></dt> + <dd>O valor atual do elemento sendo processado no array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>O índice do elemento atual sendo processado no array.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>O array que <code>forEach()</code> está sendo aplicado.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Opcional. Valor a ser usado como <code>this</code> quando executar <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p><code>undefined</code>.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>O <code>forEach</code> executa o <code>callback</code> fornecido uma vez para cada elemento da ordem com um valor atribuido. Ele não é invocado para propriedades de índices que foram deletados ou que não foram inicializados (por ex. em arrays esparsos).</p> + +<p><code>callback</code> é invocado com <strong>três argumentos</strong>:</p> + +<ul> + <li>o <strong>valor do elemento</strong></li> + <li>o <strong>índice do elemento</strong></li> + <li>o <strong>array que está sendo percorrido</strong></li> +</ul> + +<p>Se um parâmetro <code>thisArg</code> for passado para <code>forEach()</code>, ele será passado para o <code>callback</code> quando invocado como valor para <code>this</code>. Caso contrário, o valor {{jsxref("undefined")}} será passado como valor para <code>this</code>. O valor de <code>this</code> assumido no <code>callback</code> é determinado de acordo com as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">regras usuais para determinação do <code>this</code> visto por uma função</a>.</p> + +<p>O intervalo dos elementos processados por <code>forEach()</code> é determinado antes da primeira invocação do <code>callback</code>. Elementos que forem adicionados ao array depois da chamada ao <code>forEach()</code> começar não serão visitados pelo <code>callback</code>. Se os valores dos elementos existentes do array forem alterados, o valor passado para o <code>callback</code> será o valor no momento em que o <code>forEach()</code> visitá-los; elementos que forem deletados antes de serem visitados não serão visitados.</p> + +<p><code>forEach()</code> executa a a função <code>callback</code> uma vez para cada elemento do array – diferentemente de {{jsxref("Array.prototype.map()", "map()")}} ou {{jsxref("Array.prototype.reduce()", "reduce()")}}, ele sempre retorna o valor {{jsxref("undefined")}} e não é encadeável. O caso de uso típico é alterar o array no final do loop.</p> + +<div class="note"> +<p>A única maneira de parar ou interromper um loop <code>forEach()</code> é disparando uma exceção. Se você precisa desse recurso, o método <code>forEach()</code> é a ferramenta errada. Você estará mais bem servido com um loop simples nesse caso. Se estiver testando o array de elementos para um predicado e precisar de um valor de retorno Boleano, você pode usar {{jsxref("Array.prototype.every()", "every()")}} ou {{jsxref("Array.prototype.some()", "some()")}}. Se estiverem disponíveis, os novos métodos {{jsxref("Array.prototype.find()", "find()")}} e {{jsxref("Array.prototype.findIndex()", "findIndex()")}} também podem ser usados para terminação antecipada em predicados verdadeiros.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Imprimindo_os_conteúdos_de_uma_ordem">Imprimindo os conteúdos de uma ordem</h3> + +<p>Os códigos a seguir logam uma linha para cada elemento na ordem:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log("a[" + index + "] = " + element); +} +[2, 5, 9].forEach(logArrayElements); +// logs: +// a[0] = 2 +// a[1] = 5 +// a[2] = 9 +</pre> + +<h3 id="Função_para_cópia_de_um_objeto">Função para cópia de um objeto</h3> + +<p>O código a seguir cria uma cópia para cada objeto dado. Há diferentes formas de criar uma cópia para um objeto. Esta é somente uma forma de explicar como <code>Array.prototype.forEach</code> funciona. Ela usa um grupo de novas funções ECMAScript 5 Object.*</p> + +<pre class="brush: js">function copy(o){ + var copy = Object.create( Object.getPrototypeOf(o) ); + var propNames = Object.getOwnPropertyNames(o); + + propNames.forEach(function(name){ + var desc = Object.getOwnPropertyDescriptor(o, name); + Object.defineProperty(copy, name, desc); + }); + + return copy; +} + +var o1 = {a:1, b:2}; +var o2 = copy(o1); // o2 looks like o1 now +</pre> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p><code>forEach</code> é uma adição recente para o ECMA-262 standard; assim sendo, pode não estar presente em outras implementações do standard. Você pode contornar isto pela inserção do código a seguir no começo de seus scripts, permitindo o uso de <code>forEach</code> em implementações que normalmente não possuem este suporte.</p> + +<pre class="brush:js">if ( !Array.prototype.forEach ) { + Array.prototype.forEach = function(fn, scope) { + for(var i = 0, len = this.length; i < len; ++i) { + fn.call(scope, this[i], i, this); + } + }; +} +</pre> + +<p>Um algorítimo 100% verdadeiro para a 5ª Edição do ECMA-262, pode ser visto abaixo:</p> + +<p>O algoritmo é exatamente o especificado na 5ª Edição da ECMA-262, assumindo <code>Object</code> e<code> TypeError</code> possuem seus valores originais e avalia <code>callback.call</code> para o valor original de <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="JavaScript/Reference/Global Objects/Function/call">Function.prototype.call</a></code>.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18 +// Reference: http://es5.github.com/#x15.4.4.18 +if ( !Array.prototype.forEach ) { + + Array.prototype.forEach = function forEach( callback, thisArg ) { + + var T, k; + + if ( this == null ) { + throw new TypeError( "this is null or not defined" ); + } + + // 1. Let O be the result of calling ToObject passing the |this| value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; // Hack to convert O.length to a UInt32 + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if ( {}.toString.call(callback) !== "[object Function]" ) { + throw new TypeError( callback + " is not a function" ); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if ( thisArg ) { + T = thisArg; + } + + // 6. Let k be 0 + k = 0; + + // 7. Repeat, while k < len + while( k < len ) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if ( Object.prototype.hasOwnProperty.call(O, k) ) { + + // i. Let kValue be the result of calling the Get internal method of O with argument Pk. + kValue = O[ k ]; + + // ii. Call the Call internal method of callback with T as the this value and + // argument list containing kValue, k, and O. + callback.call( T, kValue, k, O ); + } + // d. Increase k by 1. + k++; + } + // 8. return undefined + }; +} +</pre> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial. Implementado no JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/from/index.html b/files/pt-br/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..798f1c727d --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,205 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +tags: + - Array + - ECMAScript 2015 + - ES6 + - Method + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O método <code><strong>Array.from()</strong></code> cria uma nova instância <code>de um Array</code> quando for passado um array-like ou um iterable object como argumento.</p> + +<p>No ES6, <span id="result_box" lang="pt"><span class="hps">a sintaxe</span> <span class="hps">de classe</span> permite a<span class="hps"> subclassificação de </span>classes nativas e classes <span class="hps">definidas pelo usuário; como </span><span class="hps">resultado</span><span>, os métodos estáticos</span> <span class="hps">pertencentes a classe,</span> <span class="hps">como</span> </span> <code><strong>Array.from,</strong></code><span lang="pt"> <span class="hps">são</span> <span class="atn hps">"</span><span>herdadas</span><span>"</span> por <span class="hps">subclasses</span> <span class="hps">do </span></span><code><strong>Array</strong></code><span lang="pt"> <span class="hps">e criam </span><span class="hps">novas instâncias da</span> <span class="hps">subclasse,</span> <span class="hps">não</span> <span class="hps">do </span></span><code><strong>Array</strong></code><span lang="pt"><span class="hps">.</span></span></p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code>Array.from(arrayLike[, mapFn[, thisArg]]) +</code></pre> + +<h3 id="Parameters" name="Parameters"><span>Parâmetros</span></h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Um array-like ou um objeto iterável para converter em array.</dd> + <dt><code>mapFn</code></dt> + <dd><em>Opcional</em>. Função Map que será chamada para cada elemento do array.</dd> + <dt><code>thisArg</code></dt> + <dd><em>Opcional</em>. Valor a ser utilizado como this quando a mapFn for chamada.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p><code>Array.from()</code> deixa você criar um Array de:</p> + +<ul> + <li>objetos array-like (objetos com a propriedade <code>length</code> e elementos indexados); ou</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">Objetos iteráveis</a> (objetos onde você pode coletar seus elementos, assim como {{jsxref("Map")}} e {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> tem um parametro opcional <code>mapFn</code>, que permite executar a função {{jsxref("Array.prototype.map", "map")}} para cada elemento do array (ou subclasse de objeto) que está sendo criado. Simplificando,<code> Array.from(obj, mapFn, thisArg)</code> é o mesmo que <code>Array.from(obj).map(mapFn, thisArg)</code>, com a excessão de não cria um array intermediário . Isso é importante, principalmente para certas subclasses de array, como <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>, no qual o array intermediário iria necessáriamente ter o valor truncado para encaixar-se no tipo apropriado.</p> + +<p>A propriedade <code>length</code> do método <code>from()</code> é <code>1</code>.</p> + +<p>No ES2015, a sintaxe de class permite a definição de subclasses tanto internas quando definidas pelo usuário. Como resultado, métodos estáticos como <code>Array.from()</code> são "herdados" pelas subclasses de <code>Array</code>, e cria novas instâncias da subclasse, não de <code>Array</code>.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> foi adicionado ao padrão ECMA-262 em sua 6ª edição; desta forma, <span id="result_box" lang="pt"><span class="hps">não</span> <span class="hps">está presente</span> <span class="hps">na</span> <span class="hps">aplicações anteriores da especificação</span></span>. Na ausência do código nativo, você pode inserir o código seguinte no início do script, permitindo <code>o uso parcial da funcionalidade do Array.from</code>. Esse algorítmo é equivalente ao especificado no ECMA-262, 6ª edição, exceto que <code>Object</code> e <code>TypeError</code> tem seus valores originais e que <code>callback.call</code> retorna o valor original de {{jsxref("Function.prototype.call")}}. Além disso, <span id="result_box" lang="pt"><span class="hps">os verdadeiros</span> <span class="hps">iterables</span> <span class="hps">não</span> podem ser representados</span> genéricamente no polyfill, criando a principal distinção do que foi definido na especificação.</p> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError("Array.from requires an array-like object - not null or undefined"); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js notranslate">// Array-like object (arguments) para um Array +function f() { + return Array.from(arguments); +} + +f(1, 2, 3); +// [1, 2, 3] + + +// Qualquer iterable object ... +// com Set +var s = new Set(["foo", window]); +Array.from(s); +// ["foo", window] + + +// Map +var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]] + + +// String +Array.from("foo"); +// ["f", "o", "o"] + + +// Usando um arrow function como função map para +// manipular os elementos +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Gerando uma sequência de números +Array.from({length: 5}, (v, k) => k); +// [0, 1, 2, 3, 4] +</pre> + +<h2 id="Especificação">Especificação</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="compatibilidade_com_navegadores">compatibilidade com navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.from")}}</p> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/index.html b/files/pt-br/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..6130c8d949 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,511 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - JavaScript + - NeedsTranslation + - Refer + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<p>{{JSRef("Global_Objects", "Array")}}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>O objeto <code>Array</code> do JavaScript é um objeto global usado na construção de 'arrays': objetos de alto nível semelhantes a listas.</p> + +<p><strong>Criando um Array</strong></p> + +<pre class="brush: js">var frutas = ['Maçã', 'Banana']; + +console.log(frutas.length); +// 2 +</pre> + +<p><strong>Acessar um item (<em>index</em>) do Array</strong></p> + +<pre class="brush: js"><code>var primeiro = frutas[0]; +// Maçã + +var ultimo = frutas[frutas.length - 1]; +// Banana</code></pre> + +<p><strong>Iterar um Array</strong></p> + +<pre class="brush: js"><code>frutas.forEach(function (item, indice, array) { + console.log(item, indice); +}); +// Maçã 0 +// Banana 1</code></pre> + +<p><strong>Adicionar um item ao final do Array</strong></p> + +<pre class="brush: js"><code>var adicionar = frutas.push('Laranja'); +// ['Maçã', 'Banana', 'Laranja']</code></pre> + +<p><strong>Remover um item do final do Array</strong></p> + +<pre class="brush: js"><code>var ultimo = frutas.pop(); // remove Laranja (do final) +// ['Maçã', 'Banana'];</code></pre> + +<p><strong>Remover do início do Array</strong></p> + +<pre class="brush: js"><code>var primeiro = frutas.shift(); // remove Maçã do início +// ['Banana'];</code></pre> + +<p><strong>Adicionar ao início do Array</strong></p> + +<pre class="brush: js"><code>var adicionar = frutas.unshift('Morango') // adiciona ao início +// ['Morango', 'Banana'];</code></pre> + +<p><strong>Procurar o índice de um item na Array</strong></p> + +<pre class="brush: js"><code>frutas.push('Manga'); +// ['Morango', 'Banana', 'Manga'] + +var pos = frutas.indexOf('Banana'); +// 1</code></pre> + +<p><strong>Remover um item pela posição do índice</strong></p> + +<pre class="brush: js"><code>var removedItem = frutas.splice(pos, 1); // é assim que se remove um item +// ['Morango', 'Manga']</code></pre> + +<p><strong>Remover itens de uma posição de índice</strong></p> + +<pre class="brush: js">var vegetais = ['Repolho', 'Nabo', 'Rabanete', 'Cenoura']; +console.log(vegetais); +// ['Repolho', 'Nabo', 'Rabanete', 'Cenoura'] + +var pos = 1, n = 2; + +var itensRemovidos = vegetais.splice(pos, n); +// Isso é como se faz para remover itens, n define o número de itens a se remover, +// a partir da posição (pos) em direção ao fim da array. + +console.log(vegetais); +// ['Repolho', 'Cenoura'] (o array original é alterado) + +console.log(itensRemovidos); +// ['Nabo', 'Rabanete']</pre> + +<p><strong>Copiar um Array</strong></p> + +<pre class="brush: js"><code>var copiar = frutas.slice(); // é assim que se copia +// ['Morango', 'Manga']</code></pre> + +<p> </p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var><span style="font-style: normal;">[</span>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<em>element0</em>, <em>element1</em>, ..., <em>elementN</em>) +new Array(<em>arrayLength</em>) +</pre> + +<dl> + <dt><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var> </code></dt> + <dd>Um array JavaScript é inicializado com os elementos contém, exceto no caso onde um único argumento é passado para o construtor do <code>Array</code> e esse argumento é um número (veja o parâmetro arrayLength abaixo). Esse caso especial só se aplica para os arrays JavaScript criados com o construtor <code>Array</code> , e não para literais de array criados com a sintaxe de colchetes [].</dd> + <dt><code><var>arrayLength</var></code></dt> + <dd>Se o único argumento passado para o construtor do <code>Array</code> for um número inteiro entre 0 and 2<sup>32</sup>-1 (inclusive), um novo array com o tamanho desse número é retornado. Se o argumento for qualquer outro número, uma exceção <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RangeError" title="JavaScript/Reference/Global_Objects/RangeError">RangeError</a></code> é lançada.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Arrays são objetos semelhantes a listas que vêm com uma série de métodos embutidos para realizar operações de travessia e mutação. Nem o tamanho de um array JavaScript nem os tipos de elementos são fixos. Já que o tamanho de um array pode ser alterado a qualquer momento e os dados podem ser armazenados em posições não contíguas, arrays JavaScript não tem a garantia de serem densos; isso depende de como o programador escolhe usá-los. De uma maneira geral, essas são características convenientes, mas, se esses recursos não são desejáveis para o seu caso em particular, você pode considerar usar arrays tipados.</p> + +<p>Arrays não podem usar strings como índices (como em um <a href="https://pt.wikipedia.org/wiki/Vetor_associativo">array associativo</a>), devem ser usados números inteiros. Definir ou acessar não-inteiros usando <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors">notação de colchetes (ou notação de ponto)</a> não vai definir ou recuperar um elemento do array em si, mas sim definir ou acessar uma variável associada com a <a href="/pt-BR/docs/Web/JavaScript/Data_structures#Propriedades">coleção de propriedades de objeto</a> daquele array. As propriedades de objeto do array e a lista de elementos do array são separados, e as operações de travessia e mutação não podem ser aplicadas a essas propriedades nomeadas.</p> + +<h3 id="Accessando_elementos_de_um_array">Accessando elementos de um array </h3> + +<p>Arrays JavaScript começam com índice zero: o primeiro elemento de um array está na posição <code>0</code> e o último elemento está na posição equivalente ao valor da propriedade <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/length" title="JavaScript/Reference/Global_Objects/Array/length">length</a></code> (tamanho) menos 1.</p> + +<pre class="brush: js">var arr = ['este é o primeiro elemento', 'este é o segundo elemento']; +console.log(arr[0]); // exibe '<span style="font-size: 1rem;">este é o primeiro elemento'</span> +console.log(arr[1]); // exibe 'este é o segundo elemento' +console.log(arr[arr.length - 1]); // exibe 'este é o segundo elemento' +</pre> + +<p>Elementos de um array são somente propriedades de objetos, da forma que <code><a href="/en-US/docs/toString" title="toString">toString</a></code> é uma propriedade. Contudo, note que tentando acessar o primeiro elemento de um array da seguinte forma causará um erro de sintaxe, pois o nome da propriedade é inválido:</p> + +<pre class="brush: js">console.log(arr.0); // um erro de sintaxe +</pre> + +<p>Não há nada de especial a respeito de arrays JavaScript e suas propriedades que causam isso. As propriedades JavaScript que começam com um dígito não podem ser referenciadas com notação de ponto. Elas necesitam usar notação de colchetes para poderem ser acessadas. Por exemplo, se você tivesse um objeto com a propriedade "3d", também teria que ser referenciá-la usando notação de colchetes. Por exemplo:</p> + +<pre class="brush: js">var anos = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(anos.0); // um erro de sintaxe +console.log(anos[0]); // funciona corretamente +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'personagem.png'); // um erro de sintaxe +renderer['3d'].setTexture(model, 'personagem.png'); //funciona corretamente +</pre> + +<p>Note que no exemplo <code>3d</code>, <code>'3d'</code> teve de ser colocado entre aspas. É possivel também colocar entre aspas os índices de arrays JavaScript (ou seja, <code>years['2']</code> ao invés de <code>years[2]</code>), contudo isto não é necessário. O valor 2 em <code>years[2]</code> eventualmente será convertido a uma string pela engine do JavaScript através de uma conversão explicita com o método <code>toString</code>. E é por esta razão que <code>'2'</code> e <code>'02'</code> irão referenciar dois slots diferentes no objeto <code>anos</code> e o seguinte exemplo pode ser <em><code>true</code></em>:</p> + +<pre class="brush: js">console.log(anos['2'] != anos['02']); +</pre> + +<p>De forma similar, propriedades de objeto que sejam palavras reservadas(!) só podem ser acessadas como strings em notação de colchetes:</p> + +<pre class="brush: js">var promessa = { + 'var': 'texto', + 'array': [1, 2, 3, 4] +}; + +console.log(promessa['var']); +</pre> + +<h3 id="Relação_entre_length_e_propriedades_numéricas">Relação entre <em><code>length</code></em> e propriedades numéricas</h3> + +<p>As propriedades <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/length" title="JavaScript/Reference/Global_Objects/Array/length">length</a></code> e numéricas de um array Javascript são conectadas. Varios dos métodos javascript pré-definidos (por exemplo, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/join" title="JavaScript/Reference/Global_Objects/Array/join">join</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice" title="JavaScript/Reference/Global_Objects/Array/slice">slice</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf" title="JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> etc.) levam em conta o valor da propriedade <code>length</code> de um array quando eles são chamados. Outros métodos (por exemplo, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="JavaScript/Reference/Global_Objects/Array/push">push</a></code>, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/splice" title="JavaScript/Reference/Global_Objects/Array/splice">splice</a></code> etc.) também resultam em uma atualização na propriedade <code>length</code> do array.</p> + +<pre class="brush: js">var frutas = []; +frutas.push('banana', 'maça', 'pêssego'); + +console.log(frutas.length); // 3</pre> + +<p>Quando configurar uma propriedade num array Javascript em que a propriedade é um índice valido do array e este índice está fora do atual limite do array, o array irá crescer para um tamanho grande o suficiente para acomodar o elemento neste índice, e a engine irá atualizar a propriedade <em>length</em> do array de acordo com isto:</p> + +<pre class="brush: js">frutas[5] = 'manga'; +console.log(frutas[5]); // 'manga' +console.log(Object.keys(frutas)); // ['0', '1', '2', '5'] +console.log(frutas.length); // 6</pre> + +<p>Configurar a propriedade <code>length</code> diretamente, também resulta em um comportamento especial:</p> + +<pre class="brush: js">frutas.length = 10; +console.log(Object.keys(frutas)); // ['0', '1', '2', '5'] +console.log(frutas.length); // 10 +</pre> + +<p>Diminuir o valor de <code>length</code>, entretanto, apaga elementos:</p> + +<pre class="brush: js">frutas.length = 2; +console.log(Object.keys(frutas)); // ['0', '1'] +console.log(frutas.length); // 2</pre> + +<h3 id="Criando_um_array_usando_o_resultado_de_uma_comparação">Criando um array usando o resultado de uma comparação</h3> + +<p>O resultado de uma comparação entre uma <em>expressão regular</em> e uma string pode criar um array Javascript. Este array tem propriedades e elementos que disponibilizam informações sobre a comparação. Esse array é o valor de retorno dos métodos {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, e {{jsxref("String.replace")}}. Para explicar melhor sobre estas propriedades e elementos, veja o seguinte exemplo e então consulte a tabela abaixo:</p> + +<pre class="brush: js">// Encontra um d seguido por um ou mais b's seguido por um d +// Salva os b's encontrados e o d seguinte +// Ignora caixa (maiúscula/minúscula) + +var minhaRegex = /d(b+)(d)/i; +var meuArray = minhaRegex.exec('cdbBdbsbz'); +</pre> + +<p>As propriedades e elementos retornados desta comparação são os seguintes:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Propriedade/Elemento</td> + <td class="header">Descrição</td> + <td class="header">Exemplo</td> + </tr> + <tr> + <td><code>input</code></td> + <td> + <p>Uma propriedade somente-leitura que reflete a string original a qual a expressão regular foi comparada.</p> + </td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Uma propriedade somente-leitura que é o índice baseado em zero da comparação na string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Um elemento somente-leitura que especifica os ultimos caracteres que foram encontrados.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Elementos somente-leitura que especificam as <em>substrings</em> de comparações entre parênteses encontradas, se incluidas na expressão regular. O número de possíveis <em>substrings </em>entre parenteses é ilimitado.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Propriedades">Propriedades</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>Propriedade comprimento do construtor <code>Array</code>, cujo valor é 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>A função de construtor que é utilizada para criar objetos derivados.</dd> +</dl> + +<dl> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Permite a adição de propriedades para todos os objetos array.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<div> +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Cria uma nova instância de <code>Array</code> a partir de um objeto semelhante ou iterável.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Retorna <code>true</code> se a variável é um array e <code>false</code> caso contrário.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Cria uma nova instância de <code>Array</code> com um número variável de argumentos, independentemente do número ou tipo dos argumentos.</dd> +</dl> +</div> + +<div> </div> + +<h2 id="Instâncias_de_Array">Instâncias de <code>Array</code></h2> + +<p>Todas as instâncias de <code>Array</code> herdam de <span style="font-family: monospace;"><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/prototype" title="Core_JavaScript_1.5_Reference/Global_Objects/Array/prototype">Array.prototype</a></code></span>. O protótipo do construtor <code>Array</code> pode ser modificado de forma a afetar todas as instâncias de <code>Array</code>.</p> + +<h3 id="Properties_of_Array_instances" name="Properties_of_Array_instances">Propriedades</h3> + +<div>{{ page('/pt-BR/docs/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties') }}</div> + +<h3 id="Methods_of_Array_instances" name="Methods_of_Array_instances">Métodos</h3> + +<h4 id="Métodos_modificadores">Métodos modificadores</h4> + +<div>{{ page('/pt-BR/docs/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods') }}</div> + +<h4 id="Métodos_de_acesso"><span>Métodos de acesso</span></h4> + +<div>{{ page('/pt-BR/docs/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods') }}</div> + +<h4 id="Métodos_de_iteração"><span>Métodos de iteração</span></h4> + +<div>{{ page('/pt-BR/docs/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods') }}</div> + +<h2 id="Métodos_genéricos_de_Array">Métodos genéricos de <code>Array</code></h2> + +<div class="warning"> +<p><strong>Métodos genéricos de arrays não seguem o padrão, são obsoletos e serão removidos em breve.</strong></p> +</div> + +<p>Algumas vezes você poderá querer aplicar métodos de arrays para strings ou outros objetos parecidos com arrays (como em <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">argumentos</a></code> de funções). Ao fazer isto, você trata uma string como um array de caracteres (ou em outros casos onde trata-se não-arrays como um array). Por exemplo, para checar se cada caractere em uma varivável <var>str</var> é uma letra, você poderia escrever:</p> + +<pre class="brush: js">function isLetter(character) { + return (character >= "a" && character <= "z"); +} + +if (Array.prototype.every.call(str, isLetter)) + alert("A string '" + str + "' contém somente letras!"); +</pre> + +<p>Esta notação é um pouco despendiosa e o JavaScript 1.6 introduziu a seguinte abreviação genérica:</p> + +<pre class="brush: js">if (Array.every(isLetter, str)) + alert("A string '" + str + "' contém somente letras!"); +</pre> + +<p><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String#String_generic_methods" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String#String_generic_methods">Generics</a> também estão disponíveis em <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>String</code></a>.</p> + +<p>Estes não são atualmente parte dos padrões ECMAScript (através do ES2015 <a href="https://github.com/monolithed/ECMAScript-6" title="https://github.com/monolithed/ECMAScript-5"><code>Array.from()</code></a> pode se conseguir isto). A seguir segue uma adaptação para permitir o uso em todos os navegadores:</p> + +<pre class="brush: js">/*globals define*/ +// Assumes Array extras already present (one may use shims for these as well) +(function () { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function (methodName) {return typeof Array[methodName] === 'function'}); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'isArray' + ], + methodCount = methods.length, + assignArrayGeneric = function (methodName) { + var method = Array.prototype[methodName]; + Array[methodName] = function (arg1) { + return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); + }; + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}());</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_Criando_um_array">Exemplo: Criando um array</h3> + +<p>O exemplo a seguir cria um array, <code>msgArray</code>, com <em>length</em> 0, então atribui valores para <code>msgArray[0]</code> e <code>msgArray[99]</code>, trocando o <em>length</em> do array para 100.</p> + +<pre class="brush: js">var msgArray = new Array(); +msgArray[0] = "Hello"; +msgArray[99] = "world"; + +if (msgArray.length == 100) + print("O length é 100."); +</pre> + +<h3 id="Exemplo_Criando_um_array_bi-dimensional">Exemplo: Criando um array bi-dimensional</h3> + +<p>O exemplo a seguir cria um tabuleiro de xadrez usando dois arrays bi-dimensionais de string. A primeira jogada é feita copiando o 'p' em 6,4 para 4,4. A posição antiga de 6,4 é colocada em branco.</p> + +<pre class="brush: js">var board = +[ ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r']]; +print(board.join('\n') + '\n\n'); + +// Fazendo o King's Pawn avançar 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +print(board.join('\n')); +</pre> + +<p>Saída:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h3 id="Browser_compatibility" name="Browser_compatibility">Utilizando um array para tabular um conjunto de valores</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js">values <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> x <span class="operator token"><</span> <span class="number token">10</span><span class="punctuation token">;</span> x<span class="operator token">++</span><span class="punctuation token">)</span><span class="punctuation token">{</span> + values<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">[</span> + <span class="number token">2</span> <span class="operator token">*</span><span class="operator token">*</span> x<span class="punctuation token">,</span> + <span class="number token">2</span> <span class="operator token">*</span> x <span class="operator token">*</span><span class="operator token">*</span> <span class="number token">2</span> + <span class="punctuation token">]</span><span class="punctuation token">)</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">table</span><span class="punctuation token">(</span>values<span class="punctuation token">)</span></code></pre> + +<p>Saída:</p> + +<pre class="eval line-numbers language-html"><code class="language-html">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162</code></pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Especificações</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Novos metodos adicionados: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Novos metodos adicionados: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Novo metodo adicionado: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com os navegadores</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Configuração</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Configuração</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</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">Ver também</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Guide/Working_with_Objects#Indexing_object_properties" title="JavaScript/Guide/Working_with_objects#Indexing_object_properties">"Indexing object properties" in JavaScript Guide: "Working with objects"</a></li> + <li><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.7#Array_comprehensions" title="New_in_JavaScript_1.7#Array_comprehensions">New in JavaScript 1.7: Array comprehensions</a></li> + <li><a href="/en-US/docs/JavaScript/New_in_JavaScript/1.6#Array_extras" title="New_in_JavaScript_1.6#Array_extras">New in JavaScript 1.6: Array extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays" title="JavaScript_typed_arrays">Draft: Typed Arrays</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/indexof/index.html b/files/pt-br/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..1cb6328be8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,186 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +tags: + - Array + - JavaScript + - Método(2) + - Prototype + - Referência(2) + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<div>O método <code><strong>indexOf() </strong></code>retorna o primeiro índice em que o elemento pode ser encontrado no array, retorna -1 caso o mesmo não esteja presente.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>array</var>.indexOf(<var>elementoDePesquisa</var>, [pontoInicial = 0])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>elementoDePesquisa</code></dt> + <dd><code>Elemento a ser pesquisado no array.</code></dd> + <dt><code>pontoInicial</code></dt> + <dd>O índice para iniciar a procura. Se o índice for maior ou igual ao tamanho do array, é retornado -1 e signfica que o item não será procurado. Se o<code> pontoInicial é fornecido</code> com um número negativo, é tomado como deslocamento da extremidade do array. Nota: se o <code>pontoInicial</code> fornecido é negativo, a procura no array acontece de frente para trás. Se o <code>pontoInicial</code> fornecido é 0, então o array inteiro será pesquisado. Padrão: 0 (pesquisa em todo array).</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p><code>indexOf()</code> compara o <code>elementoDePesquisa</code> com os elementos do Array usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">igualdade estrita</a> (o mesmo método usado pelo ===, ou triple-equals operator). </p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_indexOf">Usando <code>indexOf()</code></h3> + +<p><code>O exemplo seguinte usa indexOf() para localizar valores em um array</code></p> + +<pre class="brush: js notranslate">var array = [2, 5, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="Encontrar_todas_as_ocorrências_de_um_elemento">Encontrar todas as ocorrências de um elemento</h3> + +<pre class="brush: js notranslate">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var elemento = 'a'; +var idx = array.indexOf(elemento); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(elemento, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="Encontrar_se_um_elemento_existe_ou_não_e_atualizar_o_array">Encontrar se um elemento existe ou não e atualizar o array</h3> + +<pre class="brush: js notranslate">function atualizarColecaoVegetais (vegetais, vegetal) { + if (vegetais.indexOf(vegetal) === -1) { + vegetais.push(vegetal); + console.log('Nova coleção de vegetais é : ' + vegetais); + } else if (vegetais.indexOf(vegetal) > -1) { + console.log(vegetal + ' já existe na coleção de vegetais.'); + } +} + +var vegetais = ['batata', 'tomate', 'pimenta', 'pimentao']; + +atualizarColecaoVegetais(vegetais, 'espinafre'); +// Nova coleção de vegatais é : batata,tomate,pimenta,pimentao,espinafre +atualizarColecaoVegetais(vegetais, 'espinafre'); +// espinafre já existe na coleção de vegetais. +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>indexOf() </code>foi adicionado ao ECMA-262 standard em sua 5 edição; como tal, não pode estar presente em todos navegadores.Você pode contornar isso utilizando o seguinte codigo no inicio de seus scripts. Isto permitirá que voce use o <code>indexOf() </code>quando não possuir suporte nativo. Esse algoritmo corresponde ao especificado no ECMA-262, edição 5, assumindo {{jsxref("Global_Objects/TypeError", "TypeError")}} e {{jsxref("Math.abs()")}} tem seus valores originais.</p> + +<pre class="brush: js notranslate">// Passos para a produção do ECMA-262, Edition 5, 15.4.4.14 +// Referência: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(elementoDePesquisa, pontoInicial) { + + var k; + + //1. Deixe-o ser o resultado da chamada de toObject + // passando o valor de this como argumento. + if (this == null) { + throw new TypeError('"this" é nulo (null) ou não foi definido (undefined)'); + } + + var O = Object(this); + + // 2. Deixar o tamanhoValor ser o resultado da + // chamada do método interno Get de 0 com o + // argumento "length" + // 3. Deixar o tamanhoValor ser um ToUint32(tamanhoValor). + var tamanho = O.length >>> 0; + + // 4. se o tamanho é 0, retorna -1. + if (tamanho === 0) { + return -1; + } + + // 5. Se o argumento pontoInicial for passado, + // use o ToInteger(pontoInicial); senao use 0. + var n = + pontoInicial || 0; + + if (Math.abs(n) === Infinity) { + n = 0; + } + + //6. Se n >= tamanho, retorna -1. + if (n >= tamanho) { + return -1; + } + + // 7. Se n>= 0, entao k seja n. + // 8. Senao, n<0, k seja tamanho - abs(n). + // Se k é menor que 0, entao k seja 0. + k = Math.max(n >= 0 ? n : tamanho - Math.abs(n), 0); + + // 9. Repita, enquanto k < tamanho + while (k < tamanho) { + // a. Deixe Pk ser ToString(k). + // isto é implicito para operandos LHS de um operador + + // b. Deixe o kPresent ser o resultado da chamada do método + // interno de 0 com argumento Pk + // Este passo pode ser combinado com c. + // c. Se kPresent é true, entao + // i. Deixe o elementK ser o resultado da chamada do metodo + // interno Get de 0 com argumento ToString(k) + // ii. Deixe o resultado ser aplicado pelo Algoritmo de + // Comparação de Igualdade Estrita (Strict Equality Comparison) + // para o elementoDePesquisa e elementK + // iii. caso verdadeiro, retorne k. + if (k in O && O[k] === elementoDePesquisa) { + return k; + } + k++; + } + return -1; + }; +}</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definição inicial implementada no Javascript 1.6.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2> + +<div id="compat-mobile">{{Compat("javascript.builtins.Array.indexOf")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/isarray/index.html b/files/pt-br/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..328790b8e9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,141 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p><font face="Open Sans, Arial, sans-serif">O método </font><code><strong>Array.isArray()</strong></code> retorna <code>true</code> se um objeto é uma array, e <code>false</code> se não é.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>O objeto a ser verificado.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Se o objeto é um {{jsxref("Array")}}, retorna <code>true</code>(verdadeiro), caso contrário é retornado <code>false</code>(falso).</p> + +<p>Veja o artigo <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determinando com absoluta precisão se um objeto em Javascript é ou não uma array”</a> para mais detalhes.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: js">// todas as chamadas conseguintes retornam <code style="font-style: normal;">true</code> +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +// Pequeno detalhe: Array.prototype por si só é uma array: +Array.isArray(Array.prototype); + +// todas as conseguintes retornam false +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>Executando o seguinte código antes de qualquer outro, o método <code>Array.isArray()</code> será criado, caso o browser não o disponibilize nativamente.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição Inicial. Implementado em JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com o Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>Baseado na <a href="http://kangax.github.com/es5-compat-table/">Tabela de Compatibilidade de Kangax</a>.</p> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li>{{jsxref("Global_Objects/Array", "Array")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/join/index.html b/files/pt-br/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..703cc76de0 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,108 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<div><font face="Open Sans, Arial, sans-serif">O método </font><code><strong>join()</strong></code> junta todos os elementos de um array (ou um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>) em uma string e retorna esta string.</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.join([separador = ','])</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><code>separador</code> {{optional_inline}}</dt> + <dd>Específica uma string para separar cada elemento adjacente do array. O separador é convertido em uma string se necessário. Se omitido, os elementos do array são separados com uma vírgula (","). Se o <code style="font-style: normal;">separador</code> for uma string vazia, todos os elementos são juntados sem nenhum caracter entre eles.</dd> +</dl> + +<h3 id="Parameters" name="Parameters">Valor de retorno</h3> + +<dl> + <dd>Uma string com todos os elementos do array juntos. Se <code>arr.length</code> é <code>0</code>, uma string vazia é retornada.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>As conversões em string de todos os elementos de um array são juntados em apenas uma string.</p> + +<div class="warning"> +<p>Obs: Se um elemento é <code>undefined</code> ou <code>null</code>, ele é convertido em uma string vazia.</p> +</div> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_Joining_an_array_three_different_ways" name="Example:_Joining_an_array_three_different_ways">Juntando um array de quatro formas diferentes</h3> + +<p>O exemplo interativo a seguir cria um array, <code>a</code>, com três elementos, e o junta três vezes: a primeira com virgulas, a segunda so junta os elementos e a terceira com um sinal de menos.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-join.html")}} </p> + +<div class="hidden"> +<p>O codigo para o exemplo interativo esta disponivel em um repositorio no GitHub. Se você deseja contribuir projeto, clone o repositório <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</p> +</div> + + + +<h3 id="Juntando_um_array-like_object_objeto_estilo-array">Juntando um array-like object (objeto estilo-array)</h3> + +<p>O exemplo abaixo junta um array-like object (ex: o objeto <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>), chamando {{jsxref("Function.prototype.call")}} no <code>Array.prototype.join</code>.</p> + +<pre class="brush: js notranslate"><code>function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '1,a,true' +} +f(1, 'a', true); +//saida esperada: "1,a,true"</code></pre> + + + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial. Implementado em JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com o Browser</h2> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta pagina é gerada a partir de dados estruturados. Se voce deseja contribuir para os dados, de uma olhada no repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</p> +</div> + +<div>{{Compat("javascript.builtins.Array.join")}}</div> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/keys/index.html b/files/pt-br/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..99a61b896a --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,115 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Global_Objects/Array/keys +tags: + - Iteração + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>O método <code><strong>keys()</strong></code> retorna um novo <code><strong>Array Iterator</strong></code> que contém as chaves para cada <em>index</em> do array.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.keys()</code></pre> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Exemplo_uso_básico">Exemplo: uso básico</h3> + +<pre class="brush: js">var arr = ["a", "b", "c"]; +var iterator = arr.keys(); + +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Exemplo_keys_iterator_não_ignora_lacunas">Exemplo: keys iterator não ignora lacunas</h3> + +<pre class="brush: js">var arr = ["a", , "c"]; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // [0, 2] +console.log(denseKeys); // [0, 1, 2] +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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("38")}}</td> + <td>{{CompatGeckoDesktop("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/pt-br/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..0dc189d7f1 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,184 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>lastIndexOf()</strong></code> retorna o ultimo índice que um certo elemento pode ser encontrado no array, ou -1 se o elemento não estiver presente. O array é pesquisado de trás para frente, começando pelo <code>fromIndex</code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.lastIndexOf(<var>searchElement</var>[, <var>fromIndex</var> = arr.length - 1])</code></pre> + +<h2 id="Parâmetros">Parâmetros</h2> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Elemento para ser localizado no array.</dd> + <dt><code>fromIndex</code></dt> + <dd>Opcional. O índice ao qual a busca será iniciada de traz para frente. O valor padrão é o tamanho total do array menos um (array.length -1), ou seja, todo o array será pesquisado. Se o índice for maior ou igual ao tamanho do array, o array inteiro será pesquisado. Se for negativo, ele é tomado como deslocamento no final do array. Note que mesmo se o índice for negativo, o array ainda será pesquisado de traz para frente. Se o índice calculado for menor que 0, -1 será retornado, ou seja, o array não será pesquisado.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p><code>lastIndexOf</code> compara <code>searchElement</code> a elementos do Array usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">igualdade rigorosa</a> (o mesmo método usado pelo operador ===, ou "igual triplo").</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Examplo_Usando_lastIndexOf">Examplo: Usando <code>lastIndexOf</code></h3> + +<p>O seguinte exemplo utiliza <code>lastIndexOf</code> para localizar elementos em um array.</p> + +<pre class="brush: js">var array = [2, 5, 9, 2]; +array.lastIndexOf(2); // 3 +array.lastIndexOf(7); // -1 +array.lastIndexOf(2, 3); // 3 +array.lastIndexOf(2, 2); // 0 +array.lastIndexOf(2, -2); // 0 +array.lastIndexOf(2, -1); // 3 +</pre> + +<h3 id="Exemplo_Encontrando_todas_as_ocorrências_de_um_elemento">Exemplo: Encontrando todas as ocorrências de um elemento</h3> + +<p>O seguinte exemplo utiliza <code>lastIndexOf</code> para encontrar todos os índices de um elemento em um dado array, utilizando {{jsxref("Array.prototype.push", "push")}} para adicioná-los em outro array quando são encontrados.</p> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.lastIndexOf(element); +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} + +console.log(indices); +// [4, 2, 0] +</pre> + +<p>Note que devemos tratar o caso <code>idx == 0</code> separadamente aqui pois o elemento será sempre encontrado independente do parâmetro <code>fromIndex</code> se ele for o primeiro elemento do array. Isso é diferente do método {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>lastIndexOf</code> foi adicionado ao padrão ECMA-262 na 5ª edição; devido a isso, não deve estar presente em outras implementações do padrão. Você pode contornar isso inserindo o seguinte código no início dos seus scripts, permitindo o uso de <code>lastIndexOf</code> em implementações que não o suportam nativamente. Esse algorítimo é exatamente o mesmo especificado no padrão ECMA-262, 5ª edição, assumindo que {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, {{jsxref("Global_Objects/Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, e {{jsxref("Math.min")}} possuem seus valores originais.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15 +// Reference: http://es5.github.io/#x15.4.4.15 +if (!Array.prototype.lastIndexOf) { + Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var n, k, + t = Object(this), + len = t.length >>> 0; + if (len === 0) { + return -1; + } + + n = len - 1; + if (arguments.length > 1) { + n = Number(arguments[1]); + if (n != n) { + n = 0; + } + else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + + for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) { + if (k in t && t[k] === searchElement) { + return k; + } + } + return -1; + }; +} +</pre> + +<p>Novamente, perceba que essa implementação foca na absoluta compatibilidade com <code>lastIndexOf</code> no Firefox e no motor JavaScript SpiderMonkey, incluíndo vários casos que são, indiscutivelmente, extremos. Se você pretende usar isso em aplicações reais, é possível calcular <code>from</code> com um código menos complicado se você ignorar esses casos.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial. Implementado no JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/length/index.html b/files/pt-br/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..a03b16502c --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,128 @@ +--- +title: Array.prototype.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>A propriedade <code><strong>length</strong></code> representa um inteiro de 32-bit sem sinal, que especifíca o número de elementos em um array.</p> + +<div>{{js_property_attributes(1, 0, 0)}}</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.length</code></pre> + +<h2 id="Descrição">Descrição</h2> + +<p>O valor da propriedade length é um inteiro com um sinal positivo e valor menor que 2 elevado na 32ª potência(2<sup>32</sup>).</p> + +<p>Você pode setar o a propriedade <code>length</code> para truncar um array a qualquer momento. Quando você extende um array mudando sua propriedade <code>length</code>, o numero de elementos atuais não é incrementado; por exemplo, se você setar o tamanho para 3 quando ele é atualmente 2, o array continua somente com 2 elementos. Assim, a propriedade <code>length</code> não diz nada sobre o tamanho de valores definidos no array. Veja também <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Relacionamento entre <code>length</code> e propriedades numérica</a>s.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Iterando_sobre_um_array">Iterando sobre um array</h3> + +<p>No exemplo a seguir <code>numbers </code>é iterado considerando a propriedade <code>length</code> para ver quantos elementos ele tem. O valor de cada elemento recebe então o dobro.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; + +for (var i = 0; i < numbers.length; i++) { + numbers[i] *= 2; +} +// numbers is now [2, 4, 6, 8, 10] +</pre> + +<h3 id="Encurtando_um_array">Encurtando um array</h3> + +<p>O exemplo a seguir encurta o array <code>statesUS</code> para um tamanho de 50 se o tamanho corrente for maior do que 50.</p> + +<pre class="brush: js">if (statesUS.length > 50) { + statesUS.length = 50; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/map/index.html b/files/pt-br/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..278e9ba6a4 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,255 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O método <strong>map()</strong> invoca a função <code>callback</code> passada por argumento para cada elemento do Array e devolve um novo Array como resultado.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.map(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função cujo retorno produz o elemento do novo Array. Recebe três argumentos: + <dl> + <dt><code>valorAtual</code></dt> + <dd>O valor do elemento original do Array de origem. </dd> + <dt><code>indice</code></dt> + <dd>O índice do elemento atual que está sendo processado no array.</dd> + <dt><code>array</code></dt> + <dd>O Array de origem.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opcional. Valor a ser utilizado como o <em><code>this</code></em> no momento da execução da função <code>callback</code>.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>O método <strong><code>map</code></strong> chama a função <code>callback</code> recebida por parâmetro para cada elemento do Array original, em ordem, e constrói um novo array com base nos retornos de cada chamada. A função <code>callback</code> é chamada apenas para os elementos do array original que tiverem valores atribuídos; os elementos que estiverem como <code>undefined</code>, que tiverem sido removidos ou os que nunca tiveram valores atribuídos não serão considerados.</p> + +<p>A função <code>callback</code> é chamada com três argumentos: o valor do elemento corrente, o índice do elemento corrente e o array original que está sendo percorrido.</p> + +<p>Se o parametro <code>thisArg</code> foi passado para o método <code>map</code>, ele será repassado para a função <code>callback</code> no momento da invocação para ser utilizado como o <code>this</code>. Caso contrário, o valor {{jsxref("Global_Objects/undefined", "undefined")}} será repassado para uso como o <em><code>this</code></em>. O valor do <code>this</code> a ser repassado para o <code>callback</code> deve respeitar as <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">regras para determinar como o this é acessado por uma função</a> (em inglês).</p> + +<p>O método <code>map</code> não modifica o array original. No entanto, a função <code>callback</code> invocada por ele pode fazê-lo.</p> + +<p>A lista de elementos que serão processados pelo <code>map</code> é montada antes da primeira invocação à função <code>callback</code>. Se um elemento for acrescentado ao array original após a chamada ao <code>map</code>, ele não será visível para o <code>callback</code>. Se os elementos existentes forem modificados, os valores que serão repassados serão os do momento em que o método <code>map</code> invocar o <code>callback</code>. Elementos removidos não serão visitados.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Exemplo: Mapeando um array de números para um array de raízes quadradas</h3> + +<p>O código a seguir mapeia um array de números e cria um novo array contendo o valor da raiz quadrada de cada número do primeiro array.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var roots = numbers.map(Math.sqrt); +// roots é [1, 2, 3], numbers ainda é [1, 4, 9] +</pre> + +<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Exemplo: Mapeando um array de números usando uma função <code>callback</code> que contém um argumento</h3> + +<p>O código a seguir mostrar como o método <code>map</code> funciona quando a função <code>callback</code> possui apenas um argumento. Esse argumento será automaticamente atribuído para cada elemento do array conforme o <code>map</code> itera sobre o array original.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); +// doubles é agora [2, 8, 18]. numbers ainda é [1, 4, 9] +</pre> + +<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Exemplo: usando <code>map</code> genericamente</h3> + +<p>Esse exemplo demonstra como usar o map em um {{jsxref("Global_Objects/String", "String")}} para recuperar a representação em ASCII de cada caracter em um array de bytes:</p> + +<pre class="brush: js">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { return x.charCodeAt(0); }); +// a agora vale [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Exemplo: usando <code>map</code> genericamente com <code>querySelectorAll</code></h3> + +<p>Esse exemplo demonstra como iterar sobre uma coleção de objetos recuperada através de querySelectorAll. Nesse caso, vamos pegar todos os options selecionados na tela e imprimir no console:</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = [].map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<h3 id="Exemplo_Usando_map_para_inverter_uma_string">Exemplo: Usando <code>map</code> para inverter uma string</h3> + +<pre class="brush: js">var str = '12345'; +[].map.call(str, function(x) { + return x; +}).reverse().join(''); + +// Output: '54321' +// Bonus: utilize '===' para verificar se a string original e a nova string são palíndromos +</pre> + +<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Exemplo: Caso de uso mais complexo</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspirado nesse post)</a> (em inglês)</p> + +<p>É uma prática comum utilizar o callback com apenas um argumento (o elemento atual do array original). Algumas funções também são comumente utilizadas com um argumento, mesmo tendo argumentos adicionais opcionais. Esses hábitos podem resultar em comportamentos indesejado:</p> + +<pre class="brush: js">// Considere: +['1', '2', '3'].map(parseInt); +// Enquanto era de se esperar [1, 2, 3] +// O resultado atual é [1, NaN, NaN] + +// <code>parseInt é normalmente usado com apenas um argumento, mas ele possui dois</code>. +// O primeiro é uma expressão, e o segundo o radical. +// Para a função callback, o Array.prototype.map repassa 3 argumentos: +// o elemento corrente, o indice e o array original +// O terceiro argumento é ignorado pelo parseInt, mas o segundo não, o que certamente gerou o comportamento inesperado. Veja o post para maiores detalhes + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// O resultado atual é um array de números (como esperado) + +// Bonus: Um jeito mais simples de conseguir o mesmo resultado sem nenhuma "pegadinha do Malandro": +['1', '2', '3'].map(Number); // [1, 2, 3] +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>(veja definição em <a href="https://pt.wikipedia.org/wiki/Polyfill">Polyfill</a>)</p> + +<p>O método <code>map</code> foi introduzido ao padrão ECMA-262 na sua 5ª edição, o que significa que ele pode não estar presente em todas as implementações desse padrão. Você pode contornar esse problema inserindo o código a seguir no início dos seus scripts, permitindo o uso do <code>map</code> mesmo que ele não esteja sendo suportado nativamente. Esse algoritmo é exatamente o especificado no ECMA-262 5ª edição, assumindo que {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, e {{jsxref("Global_Objects/Array", "Array")}} tenham seus valores originais, e que <code style="font-style: normal;">callback.call</code> avalie para o valor original de <code style="font-style: normal;">{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback, thisArg) { + + var T, A, k; + + if (this == null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial implementada no JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com os browsers</h2> + +<div>{{Compat("javascript.builtins.Array.map")}}</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} object</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/observe/index.html b/files/pt-br/web/javascript/reference/global_objects/array/observe/index.html new file mode 100644 index 0000000000..d1b06c5ecf --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/observe/index.html @@ -0,0 +1,128 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Reference/Global_Objects/Array/observe +translation_of: Archive/Web/JavaScript/Array.observe +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>O método <strong><code>Array.observe()</code></strong> é usado para observar mudanças de forma assíncrona em Arrays, de forma similar ao método {{jsxref("Object.observe()")}} para objetos. O método fornece um conjunto de mudanças em ordem de ocorrência. É equivalente ao método <code>Object.observe()</code> invocado com a lista aceita <code>["add", "update", "delete", "splice"]</code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>O array a ser observado.</dd> + <dt><code>callback</code></dt> + <dd>A função chamado cada vez que ocorrem mudanças, com o seguinte argumento: + <dl> + <dt><code>changes</code></dt> + <dd>Um array de objetos, sendo que cada um representa uma mudança. As propriedades destes objetos são: + <ul> + <li><strong><code>name</code></strong>: O nome da propriedade que mudou.</li> + <li><strong><code>object</code></strong>: O array modificado depois que a mudança ocorreu.</li> + <li><strong><code>type</code></strong>: Uma string que indica o tipo de mudança que ocorreu. Pode ser <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, ou <code>"splice"</code>.</li> + <li><strong><code>oldValue</code></strong>: Apenas para os tipos <code>"update"</code> e <code>"delete"</code>. O valor antes da mudança.</li> + <li><strong><code>index</code></strong>: Apenas para o tipo <code>"splice"</code>. O índice no qual ocorreu a mudança.</li> + <li><strong><code>removed</code></strong>: Apenas para o tipo <code>"splice"</code>. Um array de elementos removidos.</li> + <li><strong><code>addedCount</code></strong>: Apenas para o tipo <code>"splice"</code>. O número de elementos adicionados.</li> + </ul> + </dd> + </dl> + </dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>A função <code>callback</code> é chamada cada vez que uma mudança é feita em <code>arr</code>, com um array de todas as mudanças na ordem em que elas ocorreram.</p> + +<div class="note"> +<p>Mudanças feitas via métodos de Array, tais como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a> serão reportados como mudanças do tipo <code>"splice"</code>. Mudanças do tipo índice que não alteram o tamanho do array podem ser reportadas como mudanças do tipo <code>"update"</code>.</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Adicionando_diferentes_tipos_em_log">Adicionando diferentes tipos em log</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +Array.observe(arr, function(changes) { + console.log(changes); +}); + +arr[1] = 'B'; +// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}] + +arr[3] = 'd'; +// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}] + +arr.splice(1, 2, 'beta', 'gamma', 'delta'); +// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}] +</pre> + +<h2 id="Especificações">Especificações</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p> + +<h2 id="Compatibilidade_com_Browser">Compatibilidade com Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</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("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidade</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="//stackoverflow.com/q/29269057/778272">Em qual condição a chamada Array.observe irá "adicionar" um gatilho para um evento?</a></li> + <li>{{jsxref("Array.unobserve()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/of/index.html b/files/pt-br/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..d7d72259cb --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,108 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Array + - ECMAScript6 + - JavaScript + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>Array.of()</strong></code> cria um nova instância de <code>Array</code> com um número variável de argumentos, independentemente do número ou do tipo dos argumentos.</p> + +<p>A diferença entre o <code><strong>Array.of()</strong></code> e o construtor de <code><strong>Array</strong></code> é no tratamento dos argumentos inteiros: <code><strong>Array.of(7)</strong></code> cria um array com um único elemento, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">7</span></font>, enquanto <code><strong>Array(7)</strong></code> cria um array vazio de propriedade <code>length</code> igual a <code>7</code> (<strong>Nota</strong>: isso quer dizer um array com <code>7</code> espaços vazios, e não com valores do tipo {{jsxref("undefined")}}).</p> + +<pre>Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // array com 7 espaços vazios +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><code>Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Elementos usados para criar o <code>array</code>.</dd> + <dt> + <h3 id="Valor_de_retorno">Valor de retorno</h3> + </dt> + <dd>Uma nova instância de {{jsxref("Array")}}. </dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Esta função é parte do padrão ECMAScript 6 (ou ECMAScript 2015).</p> + +<p>Para maiores informações veja:</p> + +<ul> + <li><a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> </a></li> + <li><a href="https://gist.github.com/rwaldron/1074126"><code>Array.from</code> proposal</a></li> + <li><a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</li> +</ul> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Executando o seguinte código antes de qualquer outro c[odigo criará o <code>Array.of()</code> se ele não for disponível nativamente.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + // Or + let vals = []; + for(let prop in arguments){ + vals.push(arguments[prop]); + } + return vals; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> + +<div id="compat-mobile"> +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada por dados estruturados. Se você quiser contribuir com os dados, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie uma <em>pull request</em>.</p> +</div> + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/pop/index.html b/files/pt-br/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..6bd4c55b5e --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,81 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +tags: + - Array + - JavaScript + - Pop +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O método <code><strong>pop()</strong></code> remove o <strong>último</strong> elemento de um array e retorna aquele elemento.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.pop()</code></pre> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>O método <code>pop</code> remove o último elemento de um array e retorna aquele valor.</p> + +<p>Esse método é intencionalmente genérico. Podendo ser utilizado por {{jsxref("Function.call", "call", "", 1)}} ou {{jsxref("Function.apply", "apply", "", 1)}} em objetos que implementam arrays.</p> + +<p>Se você chamar <code>pop()</code> em um array vazio, ele retorna o valor {{jsxref("Global_Objects/undefined", "undefined")}}.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_Removing_the_last_element_of_an_array" name="Example:_Removing_the_last_element_of_an_array">Exemplo: Removendo o último elemento de um array</h3> + +<p>O código seguinte cria o array <code>meuPeixe </code>contendo quatro elementos e então remove seu último elemento.</p> + +<pre class="brush: js notranslate">var meuPeixe = ['acara-bandeira', 'palhaco', 'mandarim', 'esturjao']; + +console.log(meuPeixe); // ['acara-bandeira', 'palhaco', 'mandarim', 'esturjao'] + +var meuPeixePop = meuPeixe.pop(); + +console.log(meuPeixe); // ['acara-bandeira', 'palhaco', 'mandarim' ] + +console.log(meuPeixePop); // 'esturjao'</pre> + +<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>Definição inicial. Implementado no JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade nos Navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.pop")}}</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html b/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..e863d9cc69 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,206 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Propriedade +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Instâncias de {{jsxref("Global_Objects/Array", "Array")}} herdam de <code>Array.prototype</code>. Como em todos os construtores, você pode mudar o protótipo desse construtor para modificar todas as instâncias de {{jsxref("Global_Objects/Array", "Array")}}.</p> + +<p>Contudo, a adição de métodos não-padronizados ao objeto array pode causar problemas futuros, seja com seu próprio código, ou na <a href="https://developers.google.com/web/updates/2018/03/smooshgate">adição de novas funcionalidades ao JavaScript</a>.</p> + +<p>Um fato pouco conhecido: O próprio <code>Array.prototype </code>é um {{jsxref("Global_Objects/Array", "Array")}}</p> + +<pre class="brush: js">Array.isArray(Array.prototype); // true +</pre> + +<h2 id="Properties" name="Properties">Propriedades</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>Especifica a função que cria um objeto do protótipo.<br> + </dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>Reflete o número de elementos em um array.</dd> +</dl> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<h3 id="Mutator_methods" name="Mutator_methods">Métodos modificadores</h3> + +<p>Esses métodos modificam o array:</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> + <dd>Copia uma sequência de elementos do array dentro do array.</dd> + <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> + <dd>Preenche todos os elementos de um array com um elemento estático, começando de um índice inicial até um índice final.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>Remove e retorna o último elemento de um array.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>Adiciona um ou mais elementos ao fim de um array e retorna o novo comprimeiro do array.</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>Reverte a ordem dos elementos de um array - o primeiro vira o último e o último vira o primeiro.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>Remove o primeiro elemento de um array e o retorna.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>Ordena os elementos do array em questão e retorna o array.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>Adiciona e/ou remove elementos de um array.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.</dd> +</dl> + +<h3 id="Accessor_methods" name="Accessor_methods">Métodos de acesso</h3> + +<p>Esses métodos não modificam o array, mas sim retornam alguma representação dele.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>Retorna um novo array formado por esse array concatenado com outro(s) array(s) e/ou valores.</dd> + <dt>{{jsxref("Array.prototype.contains()")}} {{experimental_inline}}</dt> + <dd>Verifica se o array possui cer, retornando<code>true</code> ou <code>false</code> apropriadamente.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>Retorna uma string com todos os elementos do array</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>Retorna um novo array com uma parte do array sobre o qual o método foi chamado</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Retorna um array literal representando o array especificado; você pode usar esse valor para criar um novo array. Esse método sobrescreve o método {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>Retonar uma string representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>Retonar uma string adequada ao idioma do usuário representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>Representa o índice da primeira ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>Representa o índice da última ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array</dd> +</dl> + +<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteração</h3> + +<p>Vários métodos tomam como funções de argumento para serem chamados de volta ao processar o array. Quando esses métodos são chamados, o `<code>length` do array</code> é amostrado e qualquer elemento adicionado além deste comprimento (length) de dentro da função (callback) não é visitado. Outras alterações para o array (Definindo o valor de ou apagando um elemento) pode afetar os resultados da operação se o método visita o elemento alterado posteriormente. Enquanto o comportamento específico destes métodos nestes casos é bem definido, não se deve confiar nisso para não confundir os outros que possoam ler seu código. Em vez disso, deve-se copiar para um novo array para modificá-lo.</p> + +<dl> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>Chama a função para cada elemento no array.</dd> + <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> + <dd>Retorna um novo objeto <code>Array Iterator</code> que contem o par chave/valor para cada índice no array.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>Retorna true se todos elementos no array satisfizer a função de teste fornecida.</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>Retorna true se pelo menos um elemento no array satisfizer a função de teste fornecida.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>Cria um novo array com todos os elementos do array para qual a função de filtragem fornecida retorne true.</dd> + <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> + <dd>Retorna o valor encontrado no array, se um elemento no array satisfizer a funçào de teste fornecida ou `<code>undefined` </code>se não for encontrado.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> + <dd>Retorna o índice no array, se um elemento no array satisfizer a função de teste fornecida ou -1 se não for encontrado.</dd> + <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> + <dd>Retorna um novo <code>Array Iterator</code> que contem a chave para cada índice no array.</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>Cria um novo array com os resultados da função fornecida chamada em cada elemento na array.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>Aplica uma função contra um acumulador e cada valor do array (da esquerda para direita) para reduzi-los a um único valor.</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>Aplica uma função contra um acumulador e cada valor do array (da direita para esquerda) para reduzi-los a um único valor.</dd> + <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> + <dd>Retorna um novo objeto <code>Array Iterator</code> que contem os valores de cada índice no array.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Retorna um novo objeto <code>Array Iterator</code> que contem os valores de cada índice no array.</dd> +</dl> + +<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos</h3> + +<p>Vários métodos do objeto Array em Javascript foram feitos para serem aplicados genericamentes em todos os objetos que "pareçam" Arrays. Isso é, eles podem ser usados em qualquer objeto que possuam uma propriedade <code>length</code> (comprimento), e que possa ser usado a partir de propriedades numéricas (como índices no formato <code>array[5]</code>). Alguns métodos, como {{jsxref("Array.join", "join")}}, apenas lêem e as propriedades numéricas do objeto sobre o qual eles sãochamados. Outros, como {{jsxref("Array.reverse", "reverse")}}, exigem que as propriedades numéricas e <code>length </code>sejam mutáveis; sendo assim, esses métodos não podem ser chamados em objetos como {{jsxref("Global_Objects/String", "String")}}, que não permitem que nenhuma das duas propriedades sejam modificadas.</p> + +<h2 id="Specifications" name="Specifications">Especifiações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Padrão</td> + <td>Definição inicial</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com 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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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("Global_Objects/Array", "Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> 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> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.html b/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..0268b64c00 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,513 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce +tags: + - Array + - JavaScript + - Métodos + - Prototipo + - Referencia + - reduce() +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>reduce()</strong></code> executa uma função <strong>reducer</strong> (fornecida por você) para cada elemento do array, resultando num único valor de retorno.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + +<p class="hidden">A fonte desse exemplo interativo está armazenada em um repositório do GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone https://github.com/mdn/interactive-examples e envie-nos um pull request.</p> + +<p>A função <strong>reducer</strong> recebe quatro parâmetros:</p> + +<ol> + <li>Acumulador (<code>acc</code>)</li> + <li>Valor Atual (<code>cur</code>)</li> + <li>Index Atual (<code>idx</code>)</li> + <li>Array original (<code>src</code>)</li> +</ol> + +<p>O valor de retorno da sua função <strong>reducer</strong> é atribuída ao acumulador. O acumulador, com seu valor atualizado, é repassado para cada iteração subsequente pelo array, que por fim, se tornará o valor resultante, único, final.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="brush: js notranslate"><code><var>array</var>.reduce(<var>callback( acumulador, valorAtual</var>[, index[, array]] )[, <var>valorInicial</var>]))</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função que é executada em cada valor no array (exceto no primeiro, se nenhum <font face="Consolas, Liberation Mono, Courier, monospace"><code>valorInicial</code></font> for passado); recebe quatro argumentos:</dd> +</dl> + +<p><strong><font face="Consolas, Liberation Mono, Courier, monospace"><code>acumulador</code></font></strong></p> + +<p>Opcional. O índice do elemento atual que está sendo processado no array. Começa a partir do index <code>0</code> se um <font face="Consolas, Liberation Mono, Courier, monospace"><code>valorInicial</code> </font>for fornecido. Do contrário, começa do index <code>1</code>.</p> + +<dl> + <dt><code>valorInicial</code></dt> + <dd>Opcional. Valor a ser usado como o primeiro argumento da primeira chamada da função <code>callback</code>. Se nenhum <code>valorInicial</code> é fornecido, o primeiro elemento do array será usado como o valor inicial do <font face="Consolas, Liberation Mono, Courier, monospace"><code>acumulador</code></font> e o <code>valorAtual</code> não será lido. Chamar <code>reduce()</code> em uma array vazia sem valor inicial retornará um erro.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>O valor que resulta da redução.</p> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>O método <code>reduce()</code> executa a função de <code>callback</code> uma vez para cada elemento presente no array, excluindo furos (valores indefinidos), recebendo quatro argumentos:</p> + +<ol> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>acumulador</em></span></font> - valor inicial (ou o valor do callback anterior),</li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>valorAtual</em></span></font> - o valor do elemento atual</li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><em>index</em></span></font> - o índice atual e</li> + <li><code><var>array</var></code> - o array onde a iteração está ocorrendo.</li> +</ol> + +<p>A primeira vez que o callback é chamado, o<font face="Consolas, Liberation Mono, Courier, monospace"> <code>acumulador</code> e o <code>valorAtual</code> </font>podem ter um de dois valores possíveis<font face="Consolas, Liberation Mono, Courier, monospace">. </font>Se o <code><font face="Consolas, Liberation Mono, Courier, monospace">valorInicial</font></code><font face="Consolas, Liberation Mono, Courier, monospace"> </font>tiver<font face="Consolas, Liberation Mono, Courier, monospace"> </font>sido fornecido na chamada à função <font face="Consolas, Liberation Mono, Courier, monospace"><code>reduce()</code></font>, então o <font face="Consolas, Liberation Mono, Courier, monospace"><code>acumulador</code></font> será igual ao <code>valorInicial</code> e o <font face="consolas, Liberation Mono, courier, monospace"><code>valorAtual</code> </font>será igual ao primeiro valor no array. Caso nenhum <code>valorInicial</code> seja fornecido, <font face="Consolas, Liberation Mono, Courier, monospace"><code>acumulador</code></font> será igual ao primeiro valor no array, e <code>valorAtual</code> será igual ao segundo.</p> + +<div class="note"> +<p><strong>Nota</strong>: Se o <code>valorInicial</code> não tiver sido passado como argumento, então <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">reduce()</span></font> executará o callback da função começando a partir do índice 1 (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">index 1</span></font>), pulando o primeiro índice (<code>index 0</code>). Se o <code>valorInicial</code> for passado como argumento, a função irá começar no <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">index 0</span></font>.</p> +</div> + +<p>Se a array estiver vazia e o <code>valorInicial</code> não tiver sido informado, uma exceção do tipo {{jsxref("Global_Objects/TypeError", "TypeError")}} será lançada.</p> + +<p>Se a array possuir somente um elemento (independente da posição) e o <code>valorInicial</code> não tiver sido fornecido, ou se <code>valorInicial</code> for fornecido, mas a array estiver vazia, o valor será retornado sem que a função de <code>callback</code> seja chamada.</p> + +<p>É mais seguro provir um <code>valorInicial</code>, porque existem até <em>quatro</em> possíveis saídas sem o <code>valorInicial</code>, como mostrado no exemplo:</p> + +<pre class="brush: js notranslate">var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x ); +var maxCallback2 = ( max, cur ) => Math.max( max, cur ); + +// reduce() sem valores iniciais +[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42 +[ { x: 22 } ].reduce( maxCallback ); // { x: 22 } +[ ].reduce( maxCallback ); // TypeError + +// map/reduce; melhor solução, funciona para vetores vazios e tambem para vetores grandes +[ { x: 22 }, { x: 42 } ].map( el => el.x ) + .reduce( maxCallback2, -Infinity );</pre> + +<h3 id="Como_funciona_o_reduce">Como funciona o reduce()</h3> + +<p>Suponha que o seguinte uso de <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">reduce()</span></font> tenha ocorrido:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(a<font face="Consolas, Liberation Mono, Courier, monospace"><code>cumulador</code></font>, valorAtual, index, array) { + return a<font face="Consolas, Liberation Mono, Courier, monospace"><code>cumulador</code></font> + valorAtual; +}); +// 10</pre> + +<p>O callback será invocado quatro vezes, com os argumentos e valores em cada chamada sendo:</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><font face="Consolas, Liberation Mono, Courier, monospace"><code>acumulador</code></font></th> + <th scope="col"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valorAtual</span></font></th> + <th scope="col"><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">index</span></font></th> + <th scope="col"><code>array</code></th> + <th scope="col"><strong>valor de retorno</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">primeira chamada</th> + <td><code>0</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">segunda chamada</th> + <td><code>1</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>3</code></td> + </tr> + <tr> + <th scope="row">terceira chamada</th> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>6</code></td> + </tr> + <tr> + <th scope="row">quarta chamada</th> + <td><code>6</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>O valor retornado pelo <code>reduce</code> será o da última chamada à callback <code>(10)</code>.</p> + +<p>Você também pode usar uma {{jsxref("Functions/Arrow_functions", "Arrow Function","",1)}} em vez de uma função completa. O código abaixo produz a mesma saída que o código do bloco acima:</p> + +<pre class="brush: js line-numbers language-js notranslate">[0, 1, 2, 3, 4].reduce( (accum, curr) => accum + curr );</pre> + +<p>Se você informar um <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valorInicial</span></font> como o segundo argumento de reduce, o resultado será:</p> + +<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduce(function(acumulador, valorAtual, indice, array) { + return acumulador + valorAtual; +}, 10); + +// 20</pre> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col"><code>callback</code></th> + <th scope="col"><font face="Consolas, Liberation Mono, Courier, monospace"><code>acumulador</code></font></th> + <th scope="col"><code>valorAtual</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col"><code>valor de retorno</code></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">primeira chamada</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">segunda chamada</th> + <td><code>10</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>11</code></td> + </tr> + <tr> + <th scope="row">terceira chamada</th> + <td><code>11</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>13</code></td> + </tr> + <tr> + <th scope="row">quarta chamada</th> + <td><code>13</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>16</code></td> + </tr> + <tr> + <th scope="row">quinta chamada</th> + <td><code>16</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>O retorno da última chamada <code>20</code>,é retornado como resultado da função <code>reduce()</code>.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_Sum_up_all_values_within_an_array" name="Example:_Sum_up_all_values_within_an_array">Soma todos os valores de uma array</h3> + +<pre class="brush: js notranslate">let total = [0, 1, 2, 3].reduce(function(acumulador, valorAtual) { + return acumulador + valorAtual; + }, 0) +// retorna 6</pre> + +<p>outra alternativa é usar uma arrow function:</p> + +<pre class="notranslate"><code>var total = [ 0, 1, 2, 3 ].reduce( + ( acumulador, valorAtual ) => acumulador + valorAtual, + 0 +);</code></pre> + +<h3 id="Soma_de_valores_de_um_objeto_de_um_array">Soma de valores de um objeto de um array</h3> + +<p>Para resumir os valores contidos em um array, você <strong>deve </strong>fornecer um <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valorInicial</span></font>, para que cada item passe por sua função.</p> + +<pre class="notranslate"><code>var valorInicial = 0; +var soma = [{x: 1}, {x: 2}, {x: 3}].reduce(function (acumulador, valorAtual) { + return acumulador + valorAtual.x; +}, valorInicial) + +console.log(soma) // retorna 6</code></pre> + +<p>Utilizando uma arrow function:</p> + +<pre class="notranslate"><code>var valorInicial = 0; +var soma = [{x: 1}, {x: 2}, {x: 3}].reduce( + (acumulador , valorAtual) => acumulador + valorAtual.x + , valorInicial +); + +console.log(soma) // retorna 6</code> +</pre> + +<h3 id="Example_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Redução de um array de arrays</h3> + +<pre class="notranslate">let reduzido = [[0, 1], [2, 3], [4, 5]].reduce( + function(acumulador, valorAtual) { + return acumulador.concat(valorAtual) + }, + [] +) +// reduzido é [0, 1, 2, 3, 4, 5]</pre> + +<p>Utilizando uma arrow function:</p> + +<pre class="notranslate"><code>let reduzido = [[0, 1], [2, 3], [4, 5]].reduce( + ( acumulador, valorAtual ) => acumulador.concat(valorAtual), + [] +);</code></pre> + +<h3 id="Contando_valores_iguais_em_um_objeto">Contando valores iguais em um objeto</h3> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">let nomes = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; + +let quantidadeNomes = nomes.reduce(function (todosNomes, nome) { + if (nome in todosNomes) { + todosNomes[nome]++; + } + else { + todosNomes[nome] = 1; + } + return todosNomes; +}, {}); +// quantidade de nomes: +// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }</code> +</pre> + +<h3 id="Agrupando_objetos_por_uma_propriedade">Agrupando objetos por uma propriedade</h3> + +<pre class="notranslate"><code>let pessoas = [ + { nome: 'Alice', idade: 21 }, + { nome: 'Max', idade: 20 }, + { nome: 'Jane', idade: 20 } +]; + +function agruparPor(objetoArray, propriedade) { + return objetoArray.reduce(function (acc, obj) { + let key = obj[propriedade]; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); +} + +let grupodePessoas = agruparPor(pessoas, 'idade'); +// grupodePessoas é: +// { +// 20: [ +// { nome: 'Max', idade: 20 }, +// { nome: 'Jane', idade: 20 } +// ], +// 21: [{ nome: 'Alice', idade: 21 }] +// }</code></pre> + +<h3 id="Juntando_arrays_contidos_num_array_de_objetos_usando_o_operador_spread_e_o_valorInicial">Juntando arrays contidos num array de objetos usando o operador spread e o <code>valorInicial</code></h3> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">// friends - um array de objetos +// onde o campo "books" é a lista de livros favoritos +var friends = [{ + name: 'Anna', + books: ['Bible', 'Harry Potter'], + age: 21 +}, { + name: 'Bob', + books: ['War and peace', 'Romeo and Juliet'], + age: 26 +}, { + name: 'Alice', + books: ['The Lord of the Rings', 'The Shining'], + age: 18 +}]; + +// allbooks - lista que contém todos os livros de friends + +// lista adicional contida em valorInicial +var allbooks = friends.reduce(function(prev, curr) { + return [...prev, ...curr.books]; +}, ['Alphabet']); + +// allbooks = [ +// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', +// 'Romeo and Juliet', 'The Lord of the Rings', +// 'The Shining' +// ]</code></pre> + +<h3 id="Removendo_itens_duplicados_num_array">Removendo itens duplicados num array</h3> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Se você estiver usando um ambiente compatível com {{jsxref("Set")}} and {{jsxref("Array.from()")}}, você pode usar <code>let orderedArray = Array.from(new Set(myArray))</code> para obter um array em que os itens duplicados tenham sido removidos.</p> +</div> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; +let result = arr.sort().reduce((init, current) => { + if (init.length === 0 || init[init.length - 1] !== current) { + init.push(current); + } + return init; +}, []); +console.log(result); //[1,2,3,4,5]</code> +</pre> + +<h3 id="Substituindo_.filter.map_por_.reduce">Substituindo .filter().map() por .reduce()</h3> + +<p>Usar {{jsxref("Array.filter()")}} seguido por {{jsxref("Array.map()")}} faz com que o array seja percorrido duas vezes. Você pode obter o mesmo resultado percorrendo o array apenas uma vez com {{jsxref("Array.reduce()")}}, o que é, portanto, mais eficiente. (Se você gosta de for loops, você pode usar filter e map percorrendo o array apenas uma vez com {{jsxref("Array.forEach()")}}).</p> + +<pre class="notranslate">const numbers = [-5, 6, 2, 0,]; + +const doubledPositiveNumbers = numbers.reduce((accumulator, currentValue) => { + if (currentValue > 0) { + const doubled = currentValue * 2; + accumulator.push(doubled); + } + return accumulator; +}, []); + +console.log(doubledPositiveNumbers); // [12, 4]</pre> + +<h3 id="Rodando_promises_em_sequência">Rodando promises em sequência</h3> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">/** + * Roda promises de um promise array de uma maneira encadeada + * + * @param {array} arr - promise arr + * @return {Object} promise object + */ +function runPromiseInSequense(arr) { + return arr.reduce((promiseChain, currentPromise) => { + return promiseChain.then((chainedResult) => { + return currentPromise(chainedResult) + .then((res) => res) + }) + }, Promise.resolve()); +} + +// promise function 1 +function p1() { + return new Promise((resolve, reject) => { + resolve(5); + }); +} + +// promise function 2 +function p2(a) { + return new Promise((resolve, reject) => { + resolve(a * 2); + }); +} + +// promise function 3 +function p3(a) { + return new Promise((resolve, reject) => { + resolve(a * 3); + }); +} + +const promiseArr = [p1, p2, p3]; +runPromiseInSequense(promiseArr) + .then((res) => { + console.log(res); // 30 + });</code></pre> + +<h3 id="Escrever_map_usando_reduce">Escrever map usando reduce</h3> + +<pre class="notranslate">if (!Array.prototype.mapUsingReduce) { + Array.prototype.mapUsingReduce = function(callback, thisArg) { + return this.reduce(function(mappedArray, currentValue, index, array) { + mappedArray[index] = callback.call(thisArg, currentValue, index, array) + return mappedArray + }, []) + } +} + +[1, 2, , 3].mapUsingReduce( + (currentValue, index, array) => currentValue + index + array.length +) // [5, 7, , 10]</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>Array.prototype.reduce</code> foi adicionado ao padrão ECMA-262 na quinta edição; e portanto, pode não estar presente em todas as implementações do padrão. Você pode contornar isso inserindo o código a seguir no início de seus scripts, permitindo o uso do <code>reduce()</code> em implementações que não possuem suporte nativo a ele.</p> + +<pre class="brush: js notranslate">// Etapas de produção para o ECMA-262, Edition 5, 15.4.4.21 +// Referencia: http://es5.github.io/#x15.4.4.21 +if (!Array.prototype.reduce) { + Array.prototype.reduce = function(callback /*, valorInicial*/) { + 'use strict'; + if (this == null) { + throw new TypeError('Array.prototype.reduce chamado é nulo (null) ou indefinido (undefined)'); + } + if (typeof callback !== 'function') { + throw new TypeError(callback + ' não é uma função') + } + var t = Object(this), len = t.length >>> 0, k = 0, value; + if (arguments.length == 2) { + value = arguments[1]; + } else { + while (k < len && !(k in t)) { + k++; + } + if (k >= len) { + throw new TypeError('Reduce possui um array vazio sem um valor inicial'); + } + value = t[k++]; + } + for (; k < len; k++) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definição inicial. Implemetada no JavaScript 1.8.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores compatíveis</h2> + +<p>A tabela de compatibilidade encontrada nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um "pull request".</p> + +<div>{{Compat("javascript.builtins.Array.reduce")}}</div> + +<h2 id="See_also" name="See_also">Leia também</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/reduceright/index.html b/files/pt-br/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..67ad0a2bdd --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,258 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>O método <code><strong>reduceRight()</strong></code> aplica à uma função um acumulador e cada valor do array (da direita para esquerda) é reduzido para um valor único.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reduceRight(<var>callback</var>[, <var>initialValue</var>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função para executar em cada valor do array, recebendo quatro argumentos: + <dl> + <dt><code>previousValue</code></dt> + <dd>O valor anteriormente retornado na ultima invocação do callback, ou o <code>initialValue</code>, se este for o recebido. (Ver abaixo.)</dd> + <dt><code>currentValue</code></dt> + <dd>O valor atualmente sendo processado no array.</dd> + <dt><code>index</code></dt> + <dd>O índice do valor atualmente sendo processado no array.</dd> + <dt><code>array</code></dt> + <dd>O array que foi chamado para ser reduzido.</dd> + </dl> + </dd> + <dt><code>initialValue</code></dt> + <dd>Opcional. Objeto para ser usado como argumento inicial da primeria chamada do callback.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p><code>reduceRight</code> executa a função callback uma vez para cada elemento presente no array, excluindo buracos no array, recebendo quatro argumentos: o valor inicial (ou o valor da chamada anterior do callback), o valor do elemento atual, o índice do elemento atual, e o array onde a operação está acontecendo.</p> + +<p>A chamada ao callback reduceRight <font face="Consolas, Liberation Mono, Courier, monospace">irá parecer com uma chamada assim</font>:</p> + +<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) { + // ... +}); +</pre> + +<p>A primeira vez que a função é chamada, o <code>previousValue</code> e o <code>currentValue</code> podem ser um de dois valores. Se um <code>initialValue</code> foi recebido na chamada do <code>reduceRight</code>, então o <code>previousValue</code> sera iqual ao <code>initialValue</code> e o <code>currentValue</code> será igual ao ultimo valor no array. Se o <code>initialValue</code> não foi recebido, então o <code>previousValue será igual ao ultimo valor no array e o </code><code>currentValue</code> será igual ao penultimo valor no array.</p> + +<p>Se o array é vazio e nenhum <code>initialValue </code>foi recebido, {{jsxref("Global_Objects/TypeError", "TypeError")}} será lançado. Se o array somente tem um elemento (independentemente da posição dele) e o <code>initialValue </code>não foi recebido, ou se o <code>initialValue</code> foi recebido mas o array é vazio, o valor em si será retornado sem chamar o <code>callback</code>.</p> + +<p>Alguns exemplos de execuções da função e como será parecida a chamada:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}); +</pre> + +<p>O callback será invocado quatro vezes, com os argumentos e valores de retornos em cada chamada será como o seguinte:</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Primeira chamada</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">Segunda chamada</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">Terceira chamada</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">Quarta chamada</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> +</table> + +<p>O valor retornado pelo <code>reduceRight</code> será o valor retornado pela ultima chamada ao callback(<code>10</code>).</p> + +<p>E se você também passou um <code>initialValue</code>, o resultado irá ser como a seguir:</p> + +<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) { + return previousValue + currentValue; +}, 10); +</pre> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col"><code>previousValue</code></th> + <th scope="col"><code>currentValue</code></th> + <th scope="col"><code>index</code></th> + <th scope="col"><code>array</code></th> + <th scope="col">return value</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Primeira chamada</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">Segunda chamada</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">Terceira chamada</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">Quarta chamada</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">Quinta chamada</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> +</table> + +<p>O valor retornado pelo <code>reduceRight</code> desta vez será, obviamente, <code>20</code>.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_Sum_up_all_values_within_an_array" name="Example:_Sum_up_all_values_within_an_array">Exemplo: Somando todos os valores presente em um array</h3> + +<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) { + return a + b; +}); +// total == 6 +</pre> + +<h3 id="Example_Flatten_an_array_of_arrays" name="Example:_Flatten_an_array_of_arrays">Exemplo: Juntando um array de arrays</h3> + +<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// flattened is [4, 5, 2, 3, 0, 1] +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>reduceRight</code> foi adicionado no padrão ECMA-262 em sua Quinta edição; sendo assim pode não estar presente em todas as implementações deste padrão. Você pode contornar isso adicionando o seguinte codigo ao inicio do seu script, adicionando a possibilidade de uso do <code>reduceRight</code> em implementações que não o suportam nativamente.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.22 +// Reference: http://es5.github.io/#x15.4.4.22 +if ('function' !== typeof Array.prototype.reduceRight) { + Array.prototype.reduceRight = function(callback /*, initialValue*/) { + 'use strict'; + if (null === this || 'undefined' === typeof this) { + throw new TypeError('Array.prototype.reduce called on null or undefined' ); + } + if ('function' !== typeof callback) { + throw new TypeError(callback + ' is not a function'); + } + var t = Object(this), len = t.length >>> 0, k = len - 1, value; + if (arguments.length >= 2) { + value = arguments[1]; + } else { + while (k >= 0 && !(k in t)) { + k--; + } + if (k < 0) { + throw new TypeError('Reduce of empty array with no initial value'); + } + value = t[k--]; + } + for (; k >= 0; k--) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial. Implementado em JavaScript 1.8.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com os navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.reduceRight")}}</div> + +<h2 id="See_also" name="See_also">Ver também</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/reverse/index.html b/files/pt-br/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..ed3b3fe160 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,121 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O método <code><strong>reverse()</strong></code> inverte os itens de um array. O primeiro elemento do array se torna o último e o último torna-se o primeiro.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.reverse()</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<p>Nenhum.</p> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>O método <code>reverse</code> transpõe os elementos do objeto array no mesmo lugar, mutando o array, e retornando uma referência para o mesmo.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example:_Reversing_the_elements_in_an_array" name="Example:_Reversing_the_elements_in_an_array">Exemplo: Invertendo os elementos em um array</h3> + +<p>O seguinte exemplo cria um array <code>myArray</code>, contendo três elementos, em seguida inverte-o.</p> + +<pre class="brush: js">var myArray = ['one', 'two', 'three']; +myArray.reverse(); + +console.log(myArray) // ['three', 'two', 'one'] +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 1ª Edição</td> + <td>Padrão</td> + <td>Definição inicial. Implementado no JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Feature</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</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.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/shift/index.html b/files/pt-br/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..34aedcaa51 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,104 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +tags: + - Array + - JavaScript + - Prototype + - Reference + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>O método <strong style="font-family: courier new,andale mono,monospace; line-height: 1.5;">shift()</strong><span style="line-height: 1.5;">remove o <strong>primeiro</strong> elemento de um array e retorna esse elemento. Este método muda o tamanho do array.</span><strong style="font-family: courier new,andale mono,monospace; line-height: 1.5;"> </strong></p> + +<p>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</p> + +<div class="hidden"> +<p>O código deste exemplo interativo está salvo em um repositório do GitHub. Se você quiser contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.shift()</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>O elemento removido do array; {{jsxref("undefined")}} se o array estiver vazio.</p> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>O método shift remove o elemento de índice zero, diminui em 1 os indices dos demais valores e retorna o valor removido. Se a propriedade {{jsxref("Array.length", "length")}} for 0, então {{jsxref("undefined")}} é retornado.</p> + +<p><code>shift</code> é intencionalmente genérico; esse método pode ser {{jsxref("Function.call", "chamado", "", 1)}} ou {{jsxref("Function.apply", "aplicado", "", 1)}} para objetos parecidos com arrays. Objetos que não contém a propriedade <code>length </code>representando o tamanho de uma série consecutiva, começando em zero, podem não se comportar de maneira correta.</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Example_Removing_an_element_from_an_array" name="Example:_Removing_an_element_from_an_array">Removendo um elemento de array</h3> + +<p>O código a seguir mostra o array <code>minhaLista</code> antes e depois de remover seu primeiro elemento. Ele também mostra o elemento removido.</p> + +<pre class="brush: js notranslate">var minhaLista = ['anjo', 'casa', 'mandarim', 'medico']; + +console.log('minhaLista antes: ' + minhaLista); +// minhaList antes: ['anjo', 'casa', 'mandarim', 'medico'] +var shifted = minhaLista.shift(); + +console.log('minhaLista depois: ' + minhaLista); +// minhaList depois: ['casa', 'mandarim', 'medico'] +console.log('Elemento removido: ' + shifted); +// Elemento removido: anjo +</pre> + +<h3 id="Example_Removing_an_element_from_an_array" name="Example:_Removing_an_element_from_an_array">Usando o método shift() dentro de um loop de while</h3> + +<p>O médodo shift() é frequentemente usado como condição dentro de um loop de while. No exemplo a seguir, cada iteração removerá o elemento seguinte do array, até que ele esteja vazio:</p> + +<pre class="brush: js notranslate">var nomes = ["André", "Eduardo", "Paulo", "Cris", "João"]; +while( (i = nomes.shift()) !== undefined ) { + console.log(i); +} +// André Eduardo Paulo Cris João</pre> + +<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 3rd Edition</td> + <td>Standard</td> + <td>Implementação inicial. Implementado no JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de Browser</h2> + +<div>{{Compat("javascript.builtins.Array.shift")}}</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/slice/index.html b/files/pt-br/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..daff58f51f --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,224 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Global_Objects/Array/slice +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>slice()</strong></code> retorna uma cópia de parte de um array a partir de um subarray criado entre as posições <code>início</code> e <code>fim</code> (<font face="consolas, Liberation Mono, courier, monospace"><span>fim</span></font> não é necessário) de um array original. O Array original não é modificado.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.slice([<var>início</var>[,<em>fim</em>]])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>início</code> {{optional_inline}}</dt> + <dd>Índice baseado em zero no qual se inicia a extração.</dd> + <dd>Como um índice negativo, <code>início</code> indica um deslocamento em relação ao fim da sequência. <code>slice(-2)</code> extrai os dois últimos elementos do array.</dd> + <dd>Se <font face="consolas, Liberation Mono, courier, monospace"><span>início</span></font> for omitido, <code>slice</code> inicia a partir do índice <font face="Consolas, Liberation Mono, Courier, monospace">0</font>.</dd> + <dd>Se <font face="consolas, Liberation Mono, courier, monospace"><span>início</span></font> for maior que o comprimento do array, é retornado um array vazio.</dd> + <dt><code>fim</code> {{optional_inline}}</dt> + <dd>Índice baseado em zero o qual é o final da extração. <code>slice</code> extrai até, não incluindo, <code>fim</code>.</dd> + <dd><code>slice(1,4)</code> extrai do segundo até o quarto elemento (elementos de índice 1, 2 e 3).</dd> + <dd>Como índice negativo, <code>fim</code> indica um deslocamento em relação ao fim do array. <code>slice(2,-1)</code> extrai o terceiro elemento através do segundo-para-o-último elemento no array.</dd> + <dd>Se <code>fim</code> for omitido ou for maior que o tamanho do array, <code>slice</code> considerará o último elemento do array como sendo o <code>fim </code>(<code>arr.length</code>)<code>.</code></dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Um novo array contendo os elementos extraídos.</p> + +<h2 id="Descrição">Descrição</h2> + +<p><code>slice</code> não altera o array original. Retorna uma cópia de elementos do array original. Elementos do array original são copiados para o array retornado da seguinte maneira:</p> + +<ul> + <li>Para referências de objeto (e não o objeto real), <code>slice</code> copia referencias de objeto em um novo array. Ambos, o original e o novo array referem-se ao mesmo objeto. Se um objeto referenciado é alterado, as alterações são visiveis em ambos, no novo array e no array original.</li> + <li>Para strings e números (não objetos {{jsxref("String")}} e {{jsxref("Number")}}), <code>slice</code> copia strings e números em um novo array. Alterações na string ou número em um array não afetam o outro array.</li> +</ul> + +<p>Se um novo elemento é adicionado a qualquer array, o outro não é afetado.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Retorna_uma_parte_de_um_array_existente">Retorna uma parte de um array existente</h3> + +<pre class="brush: js notranslate">// Exemplo para extrair 'Laranja' e 'Limao' do array frutas +var frutas = ['Banana', 'Laranja', 'Limao', 'Maçã', 'Manga']; +var citricos = frutas.slice(1, 3); + +// citricos contem ['Laranja','Limao'] +</pre> + +<h3 id="Usando_slice">Usando <code>slice</code></h3> + +<p>No exemplo seguinte, <code>slice</code> cria um novo array, <code>novoCarro</code>, do original <code>meuCarro</code>. Ambos incluem uma referência ao objeto, <code>meuHonda</code>. Quando a cor de <code>meuHonda</code> é alterada para roxo, ambos os arrays sofrem alteração.</p> + +<pre class="brush: js notranslate">// Usando slice para criar novoCarro a partir de meuCarro. +var meuHonda = { cor: 'vermelho', rodas: 4, motor: { cilindros: 4, tamanho: 2.2 } }; +var meuCarro = [meuHonda, 2, 'perfeitas condições', 'comprado em 1997']; +var novoCarro = meuCarro.slice(0, 2); + +// Exibe os valores de meuCarro, novoCarro, e a cor de meuHonda +// referenciado de ambos arrays. +console.log('meuCarro = ' + meuCarro.toSource()); +console.log('novoCarro = ' + novoCarro.toSource()); +console.log('meuCarro[0].cor = ' + meuCarro[0].cor); +console.log('novoCarro[0].cor = ' + novoCarro[0].cor); + +// Altera a cor de meuHonda. +meuHonda.cor= 'roxo'; +console.log('A nova cor do meu Honda é ' + meuHonda.cor); + +// Exibe a cor de meuHonda referenciado de ambos arrays. +console.log('meuCarro[0].cor = ' + meuCarro[0].cor); +console.log('novoCarro[0].cor = ' + novoCarro[0].cor); +</pre> + +<p>Esse script escreve:</p> + +<pre class="brush: js notranslate">meuCarro = [{cor:'vermelho', rodas:4, motor:{cilindros:4, tamanho:2.2}}, 2,'perfeitas condições', 'comprado em 1997'] +novoCarro = [{cor:'vermelho', rodas:4, motor:{cilindros:4, tamanho:2.2}},2] +meuCarro[0].cor = vermelho +novoCarro[0].cor = vermelho +A nova cor do meu Honda é roxo +meuCarro[0].cor = roxo +novoCarro[0].cor = roxo +</pre> + +<h2 id="Objetos_Array-like">Objetos Array-like</h2> + +<p>O método <code>slice</code> pode também ser chamado para converter objetos ou coleções Array-like em um novo Array. Você só precisa encadear o método no Array. Os {{jsxref("Functions/arguments", "arguments")}} dentro de uma função são um exemplo de 'objeto array-like'.</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Ligações podem ser feitas com a função .<code>call</code> de {{jsxref("Function.prototype")}} and it can also be reduced using <code>[].slice.call(arguments)</code> ao invés de <code>Array.prototype.slice.call</code>. De qualquer forma, ela pode ser simplificada com {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js notranslate">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Simplificando_o_comportamento_entre_navegadores"><span class="short_text" id="result_box" lang="pt"><span>Simplificando o comportamento entre navegadores</span></span></h2> + +<p><span id="result_box" lang="pt"><span>Embora os objetos de host (como objetos DOM) não sejam obrigados pela especificação a seguir o comportamento do Mozilla quando convertidos por Array.prototype.slice e IE <9 não o fazem</span></span>, versões do IE começando pela versão 9 permitem isso. “Shimming” pode permitir um comportamento confiável entre navegadores. Enquanto outros navegadores modernos continuem suportando essa habilidade, como atualmente IE, Mozilla, Chrome, Safari, e Opera fazem, desenvolvedores lendo (DOM-supporting) o código slice confiando neste shim não serão desencaminhados pela semântica; eles podem confiar seguramente na semântica para fornecer o agora aparentemente comportamento padrão de fato. (Isso também corrige o problema com IE < 9 onde o segundo argumento do <code>slice</code> era explicitamente {{jsxref("null")}}/{{jsxref("undefined")}})</p> + +<pre class="brush: js notranslate">(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Produzirá erro no IE < 9 + _slice.call(document.documentElement); + } catch (e) { + // Funciona para arrays, objetos array-like, + // NamedNodeMap (atributos, entidades, notações), + // NodeList (por exemplo, getElementsByTagName), HTMLCollection (por exemplo, childNodes), + // e não vai falhar em outros objetos do DOM (como falham no IE < 9) + Array.prototype.slice = function(begin, end) { + end = (typeof end !== 'undefined') ? end : this.length; + + // Para arrays, chamamos o método nativo + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // Para array-like, o processo é manual. + var i, cloned = [], + size, len = this.length; + + // Lidando com valor negativo para "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Lidando com valor negativo para "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Tamanho real do corte feito pelo slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definição inicial. Implementada no JavaScript 1.2.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.slice")}}</div> + +<div id="compat-mobile"></div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/some/index.html b/files/pt-br/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..f4724488dd --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,134 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Global_Objects/Array/some +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>some()</strong></code> testa se ao menos um dos elementos no array passa no teste implementado pela função atribuída e retorna um valor <code><strong>true</strong></code> ou <code><strong>false</strong></code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Função para testar cada elemento, recebendo três argumentos: + <dl> + <dt><code>currentValue</code></dt> + <dd>O valor atual do elemento sendo processado no array.</dd> + <dt><code>index</code></dt> + <dd>O índice do elemento atual sendo processado no array.</dd> + <dt><code>array</code></dt> + <dd>O array onde o método <code>some()</code> foi chamado.</dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opcional. Valor para usar como <em><code>this</code> </em>durante a execução do <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Esta função retorna <code><strong>true</strong></code> se a função callback retornar <code><strong>true</strong></code> para qualquer elemento do array; caso contrário, <code><strong>false</strong></code>.</p> + +<h2 id="Descrição">Descrição</h2> + +<p><code>some()</code> executa a função callback uma vez para cada elemento presente no array até achar um onde o <code>callback</code> retorne um valor <em>true</em>. Se em qualquer dos elementos o valor for encontrado, <code>some()</code> imediatamente retorna <code>true</code>. Caso contrario, <code>some()</code> retorna <code>false</code>. <code>callback</code> é invocado somente para índices do array que contenham valor definido; não é invocado para índices que foram deletados ou os quais nunca tiveram valor definido.</p> + +<p><code>callback</code> é invocado com três argumentos: o valor do elemento, o índice do elemento, e o array onde a função foi chamada.</p> + +<p>Se o parâmetro <code>thisArg</code> foi passado ao <code>some()</code>, ele sera passado ao <code>callback</code> quando o mesmo for invocado,<font face="Open Sans, Arial, sans-serif"> para ser usado como o valor de </font><code>this</code> internamente na função callback. Caso contrario, o valor {{jsxref("undefined")}} será passado para uso como <code>this</code>. O valor <code>this</code> observado pela <code>callback</code> é determinado de acordo com as regras usuais para determinar o que é visto por uma função.</p> + +<p><code>some()</code> não altera o array dentro do qual ele é chamado. </p> + +<p>O intervalo de elementos processado por <code>some()</code> é definido antes da primeira invocação da <code>callback</code>. Elementos contidos no array antes da chamada <code>some()</code> ser iniciada não serão testados pela <em>callback</em>. Se algum elemento pertencente ao array for alterado pela <code><var>callback</var></code>, o valor passado para a <code><var>callback</var></code> será o valor do momento em que a função <code>some()</code> encontra o índice daquele elemento. Elementos deletados não são testados.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Testando_valores_de_elementos_de_um_array">Testando valores de elementos de um array</h3> + +<p>O exemplo a seguir testa se algum elemento de um array é maior que 10.</p> + +<pre class="brush: js notranslate">function isBiggerThan10(element, index, array) { + return element > 10; +} +[2, 5, 8, 1, 4].some(isBiggerThan10); // false +[12, 5, 8, 1, 4].some(isBiggerThan10); // true +</pre> + +<h3 id="Testando_valores_de_elementos_de_um_array_usando_arrow_functions">Testando valores de elementos de um array usando arrow functions</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> fornece uma sintaxe mais curta para o mesmo teste.</p> + +<pre class="brush: js notranslate">[2, 5, 8, 1, 4].some(elem => elem > 10); // false +[12, 5, 8, 1, 4].some(elem => elem > 10); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>some()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>some()</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>fun.call</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.17 +// Reference: http://es5.github.io/#x15.4.4.17 +if (!Array.prototype.some) { + Array.prototype.some = function(fun/*, thisArg*/) { + 'use strict'; + + if (this == null) { + throw new TypeError('Array.prototype.some called on null or undefined'); + } + + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t && fun.call(thisArg, t[i], i, t)) { + return true; + } + } + + return false; + }; +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definição inicial. Implementada em JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.some")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/sort/index.html b/files/pt-br/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..6b1f8fcc15 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,232 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>sort()</strong></code> ordena os elementos do próprio array e retorna o array. A ordenação não é necessariamente <a href="https://pt.wikipedia.org/wiki/Ordena%C3%A7%C3%A3o_est%C3%A1vel">estável</a>. A ordenação padrão é de acordo com a pontuação de código unicode.</p> + +<p>A complexidade do tempo de execução ou a quantidade de memória utilizada pela ordenação não pode ser garantido e depende da implementação realizada.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.sort([funcaoDeComparacao])</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>funcaoDeComparacao</code> {{optional_inline}}</dt> + <dd>Especifica uma função que define a ordenação. Se omitido, o array é ordenado de acordo com a pontuação de código <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> de cada um dos caracteres, de acordo com a conversão de cada elemento para string.</dd> + <dt> <code>primeiroElemento</code></dt> + <dd> O primeiro elemento para a comparação.</dd> + <dt> <code>segundoElemento</code></dt> + <dd> O segundo elemento para comparação.</dd> + <dt> + <h3 id="Valor_de_Retorno">Valor de Retorno</h3> + </dt> + <dd>O array ordenado. Note que o array é ordenado de acordo com a pontuação de código <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> de cada um dos caracteres, e nenhuma cópia é feita.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Se <strong><code>funcaoDeComparacao</code></strong> não for informado, os elementos serão ordenados de acordo com a sua conversão para texto e o texto comparado na pontuação unicode do texto convertido. Por exemplo, "banana" vem antes de "cherry". Em uma ordenação numérica, 9 vem antes de 80, mas porque os números são convertidos para texto e, "80" vem antes de "9" na ordenação Unicode.</p> + +<pre class="brush: js notranslate">var fruit = ['cherries', 'apples', 'bananas']; +fruit.sort(); // ['apples', 'bananas', 'cherries'] + +var scores = [1, 10, 2, 21]; +scores.sort(); // [1, 10, 2, 21] +// Observe que 10 vem antes do 2, +// porque '10' vem antes de '2' em ponto de código Unicode. + +var things = ['word', 'Word', '1 Word', '2 Words']; +things.sort(); // ['1 Word', '2 Words', 'Word', 'word'] +// Em Unicode, números vêem antes de letras maiúsculas, +// as quais vêem antes das minúsculas. +</pre> + +<p>Se o parametro <code>funcaoDeComparacao</code> é fornecido, o array será ordenado de acordo com o valor de retorno da <code>funcaoDeComparacao</code>. Considerando que <code>a</code> e <code>b</code> são dois elementos sendo comparados, então:</p> + +<ul> + <li>Se <code>funcaoDeComparacao(a, b)</code> for menor que 0, ordena <code>a</code> para um índice anterior a <code>b</code>, i.e. a vem primeiro.</li> + <li>Se <code>funcaoDeComparacao(a, b)</code> retornar 0, deixa <code>a</code> e <code>b</code> inalterados em relação um ao outro, mas ordenado em relação a todos os outros elementos. Nota: O padrão ECMAscript não garante este comportamento, e, portanto, nem todos os navegadores (e.g. Versões do Mozilla anteriores a 2003) respeitarão isto.</li> + <li>Se <code>funcaoDeComparacao(a, b)</code> é maior que 0, ordena b para um índice anterior que a.</li> + <li><code>funcaoDeComparacao(a, b)</code> sempre deve retornar o mesmo valor dado um par específico de elementos a e b como seus dois parametros. Se resultados inconsistentes são retornados, então a ordenação é indefinida.</li> +</ul> + +<p>Então, a função de comparação tem a seguinte forma:</p> + +<pre class="brush: js notranslate">function comparar(a, b) { + if (a é menor que b em algum critério de ordenação) { + return -1; + } + if (a é maior que b em algum critério de ordenação) { + return 1; + } + // a deve ser igual a b + return 0; +} +</pre> + +<p>Para comparar números ao invés de texto, a função de comparação pode simplesmente subtrair b de a. A função abaixo irá ordenar o array em ordem crescente:</p> + +<pre class="brush: js notranslate">function compararNumeros(a, b) { + return a - b; +} +</pre> + +<p>O método de ordenação pode convenientemente ser usada com {{jsxref("Operators/function", "funções anônimas", "", 1)}} (e <a href="/en-US/docs/Web/JavaScript/Guide/Closures">closures</a>):</p> + +<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); +</pre> + +<p>Objetos podem ser ordenados de acordo com o valor de uma de suas propriedades.</p> + +<pre class="brush: js notranslate" id="expanded-example">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic' }, + { name: 'Zeros', value: 37 } +]; +items.sort(function (a, b) { + if (a.name > b.name) { + return 1; + } + if (a.name < b.name) { + return -1; + } + // a must be equal to b + return 0; +}); +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Criando_exibindo_e_ordenando_um_array">Criando, exibindo, e ordenando um array</h3> + +<p>O exemplo abaixo cria quatro arrays e mostra seu conteúdo original, então o conteúdo dos arrays ordenado. Os arrays numéricos são ordenados sem a função de comparação, e então, com a função.</p> + +<pre class="brush: js notranslate">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compararNumeros(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Ordenada:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Ordenada sem função de comparação:', numberArray.sort()); +console.log('Ordenada com compararNumeros:', numberArray.sort(compararNumeros)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Ordenada sem função de comparação:', numericStringArray.sort()); +console.log('Ordenada com compararNumeros:', numericStringArray.sort(compararNumeros)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Ordenada sem função de comparação:', mixedNumericArray.sort()); +console.log('Ordenada com compararNumeros:', mixedNumericArray.sort(compararNumeros)); +</pre> + +<p>Este exemplo gera a saída abaixo. Como as saídas mostram, quando a função de comparação é usada, os números são ordenados corretamente, sejam eles números ou strings numéricas.</p> + +<pre class="notranslate">stringArray: Blue,Humpback,Beluga +Ordenada: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Ordenada sem função de comparação: 1,200,40,5 +Ordenada com compararNumeros: 1,5,40,200 + +numericStringArray: 80,9,700 +Ordenada sem função de comparação: 700,80,9 +Ordenada com compararNumeros: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Ordenada sem função de comparação: 1,200,40,5,700,80,9 +Ordenada com compararNumeros: 1,5,9,40,80,200,700 +</pre> + +<h3 id="Ordenando_caracteres_não-ASCII">Ordenando caracteres não-ASCII</h3> + +<p>Para ordenar strings com caracteres não-ASCII, i.e. strings com caracteres acentuados (e, é, è, a, ä, etc.), strings de línguas diferentes do Inglês: use {{jsxref("String.localeCompare")}}. Esta função pode comparar estes caracteres, então eles aparecerão na ordem correta.</p> + +<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items é ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Ordenando_com_mapa">Ordenando com mapa</h3> + +<p>A <code>funcaoDeComparacao</code> pode ser invocada múltiplas vezes por elemento do array. Dependendo da natureza da <code>funcaoDeComparacao</code>, isto pode causar um excesso processamento. Quanto mais trabalho a <code>funcaoDeComparacao</code> fizer, e quanto mais elementos houverem para ordenar, seria mais inteligente considerar o uso de um mapa para a ordenação. A idéia é percorrer o array uma vez para extrair os valores já processados para a ordenação e armazenar em um array temporário, ordenar o array temporário e então percorrer o array temporário para conseguir a ordenação correta.</p> + +<pre class="brush: js notranslate">// o array a ser ordenado +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// array temporário que armazena os objetos com o índice e o valor para ordenação +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// ordenando o array mapeado contendo os dados resumidos +mapped.sort(function(a, b) { + return +(a.value > b.value) || +(a.value === b.value) - 1; +}); + +// container para o resultado ordenado +var result = mapped.map(function(el){ + return list[el.index]; +}); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição Inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div id="compat-desktop">{{Compat("javascript.builtins.Array.sort")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> +</ul> + +<div id="link64_adl_tabid" style="display: none;">253</div> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/splice/index.html b/files/pt-br/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..d9296f4101 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,173 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Array + - JavaScript + - Lista + - splice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>O método <strong>splice() </strong>altera o conteúdo de uma lista, adicionando novos elementos enquanto remove elementos antigos.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><em>array</em>.splice(<em>indice</em>[,<em> deleteCount</em>[<em>,</em><em> elemento1</em>[, ...[, <em>elementoN</em>]]])</code> + +<code><em>array</em>.splice(<em>indice</em>) // SpiderMonkey/Firefox extension</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>indice</code></dt> + <dd>Índice o qual deve iniciar a alterar a lista. Se maior que o tamanho total da mesma, nenhum elemento será alterado. Se negativo, irá iniciar a partir daquele número de elementos a partir do fim.</dd> +</dl> + +<dl> + <dt><code>deleteCount</code></dt> + <dd>Um inteiro indicando o número de antigos elementos que devem ser removidos.</dd> + <dd>Se o parâmetro <code><em>deleteCount</em></code> não é especificado, ou se é maior que o número de elementos restantes na lista iniciando pelo índice, então todos os elementos até o fim da lista serão deletados.</dd> + <dd>Se <code><em>deleteCount</em></code> é 0, nenhum elemento é removido. Neste caso você deve especificar pelo menos um novo elemento.</dd> +</dl> + +<dl> + <dt><code>elemento1, ..., elemento<em>N</em></code></dt> + <dd>Os elementos a adicionar na lista. Se você não especificar nenhum elemento, splice simplesmente removerá elementos da mesma.</dd> +</dl> + +<h3 id="Retorno">Retorno</h3> + +<p>Uma lista contendo os elementos removidos. Se apenas um elemento é removido, por exemplo, uma lista contendo apenas um elemento é retornada. Se nenhum elemento é removido, uma lista vazia é retornada.</p> + +<p><strong style="font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Descrição</strong></p> + +<p>Se você especificar um número diferente de elementos a inserir comparado ao número de elementos que você está removendo, a lista terá um tamanho diferente no final da execução.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Exemplo_Removendo_0_elementos_do_indice_2_e_inserindo_drum">Exemplo: Removendo 0 elementos do indice 2, e inserindo "drum"</h3> + +<p>O script a seguir ilustra o uso do <em>splice</em>:</p> + +<pre class="brush: js">var myFish = ["angel", "clown", "mandarin", "surgeon"]; + +//remove 0 elementos a partir do índice 2, e insere "drum" +var removed = myFish.splice(2, 0, "drum"); +//myFish é ["angel", "clown", "drum", "mandarin", "surgeon"] +//removed é [], nenhum elemento removido + +//remove 1 elemento do índice 3 +removed = myFish.splice(3, 1); +//myFish é ["angel", "clown", "drum", "surgeon"] +//removed é ["mandarim"] + +//remove 1 elemento a partir do índice 2, e insere "trumpet" +removed = myFish.splice(2, 1, "trumpet"); +//myFish é ["angel", "clown", "trumpet", "surgeon"] +//removed é ["drum"] + +//remove 2 elementos a partir do índice 0, e insere "parrot", "anemone" e "blue" +removed = myFish.splice(0, 2, "parrot", "anemone", "blue"); +//myFish é ["parrot", "anemone", "blue", "trumpet", "surgeon"] +//removed é ["angel", "clown"] + +//remove 2 elementos a partir do indice 3 +removed = myFish.splice(3, Number.MAX_VALUE); +//myFish é ["parrot", "anemone", "blue"] +//removed é ["trumpet", "surgeon"]</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition</td> + <td>Padrão</td> + <td>Definição inicial.<br> + Implementado no JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Atributo</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>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Atributo</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Compatibilidade_com_Navegadores_Antigos">Compatibilidade com Navegadores Antigos</h3> + +<p>O método <em>splice</em> retorna o elemento removido, se somente um elemento é removido (parâmetro <code><em>deleteCount</em></code> é 1); caso contrário, o método retorna uma lista contendo os elementos removidos. Note que o último navegador a utilizar JavaScript 1.2 foi o Netscape Navigator 4, então você pode utilizar o <em>splice</em> esperando sempre retornar uma lista.</p> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} - adiciona/remove elementos do final do array;</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} - adiciona/remove elementos do início do array;</li> + <li>{{jsxref("Array.concat", "concat")}} - returns a new array comprised of this array joined with other array(s) and/or value(s).</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/pt-br/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..7912113ff7 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,140 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>{{JSRef}}</div> + +<div>O método <code><strong>toLocaleString()</strong></code> retorna uma representaçao de elementos de um array. Os elementos são convertidos para Strings utilizando seus respectivos métodos <code>toLocaleString</code> e essas cadeias são separadas por uma sequência específica de localidade (separados por virgula ","). </div> + +<div> </div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>array</var>.toLocaleString();</code> +</pre> + +<p> </p> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>Uma string com uma tag de linguagem BCP 47, ou um array como strings. Para uma forma geral e uma interpretação do arquivo <code>locales</code>, veja a página {{jsxref("Intl")}}.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Um objeto com as propriedades de configurações, para números veja {{jsxref("Number.prototype.toLocaleString()")}}, e para datas veja {{jsxref("Date.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Retorno">Retorno</h3> + +<p>Uma string que representa os elementos de um array.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_toLocaleString">Usando <code>toLocaleString</code></h3> + +<p>Os elementos de um array são convertidos para strings usando seus respectivos métodos <code>toLocaleString:</code></p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<pre class="brush: js">var numero = 1337; +var data = new Date(); +var meuArray = [numero, data, 'foo']; + +var resultado = meuArray.toLocaleString(); + +console.log(resultado); +// saída '1337,July 26, 2015 at 20:02:23 GMT-3,foo' +// se estiver no Brasil com o fuso horario GMT-0300 (BRT) de Brasília. +</pre> + +<p>Para mais exemplos, veja as páginas {{jsxref("Intl")}}, {{jsxref("NumberFormat")}}, e {{jsxref("DateTimeFormat")}}.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_Browser">Compatibilidade do Browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte Básico</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="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/tosource/index.html b/files/pt-br/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..0eeea7211c --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,113 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Array/toSource +tags: + - Não-padrão + - Referencia + - prototipos +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>O método <code><strong>toSource()</strong></code> retorna uma representação string do código fonte do array.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.toSource()</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<p>Nenhum.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>O método <code>toSource</code> retorna os seguintes valores:</p> + +<ul> + <li>Para o objeto {{jsxref("Array")}} pré-construido, <code>toSource</code> retorna a seguinte string indicando que o código fonte não está disponível: + + <pre class="brush: js">function Array() { + [native code] +} +</pre> + </li> + <li>Para instancias de {{jsxref("Array")}}, <code>toSource</code> retorna uma representação string do código fonte.</li> +</ul> + +<p>Este método normalmente é chamando internamente pelo JavaScript e não explicitamente no código. Você pode chamar <code>toSource</code> durante o debug para examinar o conteúdo de um array.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Examinando_o_código_fonte_de_um_array">Examinando o código fonte de um array</h3> + +<p>Para examinar o código fonte de um array:</p> + +<pre class="brush: js">var alpha = new Array('a', 'b', 'c'); + +alpha.toSource(); //retorna ['a', 'b', 'c'] +</pre> + +<h2 id="Especificações">Especificações</h2> + +<p>Não é parte de nenhum padrão. Implementado no JavaScript 1.3.</p> + +<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> + +<p>A tabela de compatibilidade encontrada nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um "pull request".</p> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/tostring/index.html b/files/pt-br/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..d10cd2e032 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,115 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Array/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>O método <code><strong>toString()</strong></code> retorna uma string representando um array específico e seus elementos.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.toString()</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<p>Nenhum.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>O objeto {{jsxref("Array")}} substitui o método toString() de {{jsxref("Object")}}. Para objetos do tipo Array, o método toString() concatena todos os valores em apenas uma string. Segue exemplo abaixo, de como ele se comporta.</p> + +<pre class="brush: js">var monthNames = ['Jan', 'Feb', 'Mar', 'Apr']; +var myVar = monthNames.toString(); // atribui 'Jan,Feb,Mar,Apr' para myVar. +</pre> + +<p>JavaScript chama o método toString automaticamente quando um Array é para ser representado como um valor de texto ou quando um Array é designado em uma concatenação.</p> + +<h3 id="Semântica_ECMAScript_5">Semântica ECMAScript 5</h3> + +<p>Implementado no JavaScript 1.8.5 (Firefox 4), e compatível com a 5ª versão do ECMAScript, a função toString() é genérica e pode ser usada em qualquer Objeto. Se o objeto tem um método join(), ele será chamado e esse valor será devolvido. Do contrário, {{jsxref("Object.prototype.toString()")}} será chamado, e o valor será retornado.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial. Implementado no JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browsers_compatíveis">Browsers compatíveis</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/unobserve/index.html b/files/pt-br/web/javascript/reference/global_objects/array/unobserve/index.html new file mode 100644 index 0000000000..a509f16afb --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/unobserve/index.html @@ -0,0 +1,129 @@ +--- +title: Array.unobserve() +slug: Web/JavaScript/Reference/Global_Objects/Array/unobserve +translation_of: Archive/Web/JavaScript/Array.unobserve +--- +<div>{{JSRef}}</div> + +<div>O método Array<strong>.unobserve()</strong> é usado para remover observers adicionados pelo {{jsxref("Array.observe()")}}.</div> + +<div> </div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code>Array.unobserve(<var>arr</var>, <var>callback</var>)</code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>O array para remover os observers.</dd> + <dt><code>callback</code></dt> + <dd><code>A referência para o observer para parar de ser chamada a toda vez em que algo é modificado no array </code><strong>arr</strong>.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p><code>Array.unobserve()</code> deve ser chamado após o {{jsxref("Array.observe()")}} a fim de remover um observers de um array.</p> + +<p>O callback deve ser uma referencia à uma função e não a uma função anônima, porquê esta referencia será usada para remover o observer anterior. É inútil chamar o <strong>Array.unobserve() </strong>com uma função anônima como callback, não removerá nenhum observer.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Desobservando_um_array">Desobservando um array</h3> + +<pre class="brush: js">var arr = [1, 2, 3]; + +var observer = function(changes) { + console.log(changes); +} + +Array.observe(arr, observer); + +arr.push(4); +// [{type: "splice", object: <arr>, index: 3, removed:[], addedCount: 1}] + +Array.unobserve(arr, observer); + +arr.pop(); +// O callback não foi chamado</pre> + +<h3 id="Usando_uma_função_anônima">Usando uma função anônima</h3> + +<pre class="brush: js">var persons = ['Khalid', 'Ahmed', 'Mohammed']; + +Array.observe(persons, function (changes) { + console.log(changes); +}); + +persons.shift(); +// [{type: "splice", object: <arr>, index: 0, removed: [ "Khalid" ], addedCount: 0 }] + +Array.unobserve(persons, function (changes) { + console.log(changes); +}); + +persons.push('Abdullah'); +// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }] +// O callback sempre será chamado +</pre> + +<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/unshift/index.html b/files/pt-br/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..bdf6c0e4d9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,90 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +tags: + - Array + - JavaScript + - Prototype + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Introdução</h2> + +<p>O método <code><strong>unshift()</strong></code> adiciona um ou mais elementos no início de um array e retorna o número de elementos (propriedade <code style="font-style: normal;">length</code>) atualizado.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.unshift([<var>element1</var>[, ...[, <var>elementN</var>]]])</code></pre> + +<h3 id="Parameters" name="Parameters">Parâmetros</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Os elementos a serem adicionados no começo do array.</dd> +</dl> + +<h3 id="Returns" name="Returns">Retorna</h3> + +<p>A nova propriedade {{jsxref("Array.length", "length")}} do objeto acima onde o método foi chamado.</p> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>O método <code>unshift</code> insere os valores fornecidos no início de um objeto do tipo array.</p> + +<p><code>unshift</code> é intencionalmente genérico; este método pode ser chamado via {{jsxref("Function.call", "call", "", 1)}} ou {{jsxref("Function.apply", "apply", "", 1)}} em objetos que se assemelham aos arrays. <span style="line-height: 1.5;">Objetos que não contêm uma propriedade </span><code style="font-style: normal; line-height: 1.5;">length</code><span style="line-height: 1.5;"> que reflete a última de uma série consecutiva de propriedades numéricas, </span><span style="line-height: 1.5;">iniciada por 0, podem não comportar-se de maneira significativa.</span></p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<pre class="brush: js notranslate">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</pre> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 3ª Edição</td> + <td>Padrão</td> + <td>Definição inicial. Implementado no JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre browsers</h2> + +<div>{{Compat("javascript.builtins.Array.unshift")}}</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/array/values/index.html b/files/pt-br/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..d3e918e1b9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,121 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>O método <strong><code>values()</code></strong> retorna um novo objeto de <strong><code>Array Iterator</code></strong> que contém os valores para cada índice no array.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><code><var>arr</var>.values()</code></pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Iteração_usando_for...of_loop">Iteração usando <code>for...of</code> loop</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +// seu navegador deve suportar for..of loop +// e deixar variáveis let-scoped no for loops +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="Iteração_alternativa">Iteração alternativa</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr.values(); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_do_Firefox">Notas específicas do Firefox</h2> + +<ul> + <li>Devido a um <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=875433">problema de compatibilidade</a>, <code>Array.prototype.values()</code> foi removido do SpiderMonkey por enquanto.</li> +</ul> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> |