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/operators | |
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/operators')
36 files changed, 7647 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html b/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..d3f99a9315 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/arithmetic_operators/index.html @@ -0,0 +1,328 @@ +--- +title: Arithmetic operators +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Operadores +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operadores")}}</div> + +<p><strong>Operadores aritméticos</strong> tem valores numéricos (literais ou variáveis) como seus operadores e retornam um valor numérico único. Os operadores aritméticos padrões são adição (+), subtração (-), multiplicação (*), e divisão (/).</p> + +<h2 id="Adição_()"><a name="Addition">Adição (+)</a></h2> + +<p>O operador de adição produz a soma dos operadores numéricos ou a concatenação de strings.</p> + +<h3 id="Sintaxe">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x + y +</pre> + +<h3 id="Exemplos">Exemplos</h3> + +<pre class="brush: js">// Número + Número -> adição +1 + 2 // 3 + +// Booleano + Número -> adição +true + 1 // 2 + +// Booleano + Booleano -> adição +false + false // 0 + +// Número + String -> concatenação +5 + "foo" // "5foo" + +// String + Booleano -> concatenação +"foo" + false // "foofalse" + +// String + String -> concatenação +"foo" + "bar" // "foobar" +</pre> + +<h2 id="Subtração_(-)"><a name="Subtraction">Subtração (-)</a></h2> + +<p>O operador de subtração subtrai os dois operandos, produzindo sua diferença.</p> + +<h3 id="Sintaxe_2">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x - y +</pre> + +<h3 id="Exemplos_2">Exemplos</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +"foo" - 3 // NaN</pre> + +<h2 id="Divisão_()"><a name="Division">Divisão (/)</a></h2> + +<p>O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.</p> + +<h3 id="Sintaxe_3">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x / y +</pre> + +<h3 id="Exemplos_3">Exemplos</h3> + +<pre class="brush: js">1 / 2 // retorna 0.5 em JavaScript +1 / 2 // retorna 0 em Java +// (nenhum dos números é explicitamente um número de ponto flutuante) + +1.0 / 2.0 // retorna 0.5 em JavaScript e Java + +2.0 / 0 // retorna Infinity em JavaScript +2.0 / 0.0 // retorna Infinity também +2.0 / -0.0 // retorna -Infinity em JavaScript</pre> + +<h2 id="Multiplicação_(*)"><a name="Multiplication">Multiplicação (*)</a></h2> + +<p>O operador de multiplicação produz o produto dos operandos.</p> + +<h3 id="Sintaxe_4">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x * y +</pre> + +<h3 id="Exemplos_4">Exemplos</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"foo" * 2 // NaN +</pre> + +<h2 id="Módulo_()"><a name="Remainder">Módulo (%)</a></h2> + +<p>O operador de módulo retorna o primeiro operando módulo o segundo, isto é, var1 módulo var2, na sentença anterior, onde var1 e var 2 são variáveis. A função módulo é o resto inteiro da divisão de var1 por var2. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator" title="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe uma proposta de ter um operador real de módulo em uma versão futura do ECMAScript.</a></p> + +<h3 id="Sintaxe_5">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> var1 % var2 +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +NaN % 2 // NaN +</pre> + +<h2 id="Exponenciação_(**)"><a id="Exponenciação" name="Exponenciação">Exponenciação (**)</a></h2> + +<p>O operador de exponenciação retorna o resultado do primeiro operando elevado ao segundo operando. É o mesmo que <code>var1</code><sup><code>var2</code></sup>, onde <code>var1</code> e <code>var2</code> são variáveis. O operador de exponenciação é associativo à direita, ou seja, <code>a ** b ** c</code> é igual a <code>a ** (b ** c)</code>.</p> + +<h3 id="Sintaxe_6">Sintaxe</h3> + +<pre><strong>Operador:</strong> var1 ** var2 +</pre> + +<h3 id="Notas">Notas</h3> + +<p>Em várias linguagens como PHP e Python e outras que tem o operador de exponenciação (**), a exponenciação tem prioridade do que operações unárias, como + e -, mas tem algumas exceções. Por exemplo, no Bash o operador ** é definido por ter menos prioridade do que operadores unários. No JavaScript, é impossível escrever uma expressão de exponenciação ambígua, i.e. você não pode colocar um operador unário (<code>+/-/~/!/delete/void/typeof</code>) imediatamente antes do número base.</p> + +<pre>-2 ** 2; +// 4 no Bash, -4 em outras linguagens. +// Isso é inválido no JavaScript, pois a operação é ambígua. + + +-(2 ** 2); +// -4 no JavaScript e a intenção do autor não é ambígua. +</pre> + +<h3 id="Exemplos_5">Exemplos</h3> + +<pre>2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>Para inverter o sinal do resultado de uma expressão de exponenciação:</p> + +<pre>-(2 ** 2) // -4 +</pre> + +<p>Para forçar a base de uma expressão de exponenciação para ser um número negativo:</p> + +<pre>(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>Nota:</strong> JavaScript também tem <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">um operador de lógica binária ^ (XOR)</a>. <code>**</code> e <code>^</code> são diferentes (por exemplo : <code>2 ** 3 === 8</code> enquanto <code>2 ^ 3 === 1</code>.)</p> +</div> + +<h2 id="Incremento_()"><a name="Increment">Incremento (++)</a></h2> + +<p>O operador de incremento incrementa (adiciona um a) seu operando e retorna um valor;</p> + +<ul> + <li>Se usado na forma posfixa, com o operador depois do operando (por exemplo, x++), então ele retorna o valor antes de incrementá-lo.</li> + <li>Se usado na forma prefixa, com o operador antes do operando (por exemplo, ++x), então ele retorna o valor depois de incrementá-lo.</li> +</ul> + +<h3 id="Sintaxe_7">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x++ or ++x +</pre> + +<h3 id="Exemplos_6">Exemplos</h3> + +<pre class="brush: js">// Posfixo +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefixo +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decremento_(--)"><a name="Decrement">Decremento (--)</a></h2> + +<p>O operador de decremento decrementa (subtrai um de) seu operando e retorna um valor.</p> + +<ul> + <li>Se usado na forma posfixa (por exemplo, x--), então ele retorna o valor antes de decrementá-lo.</li> + <li>Se usado na forma prefixa (por exemplo, --x), então ele retorna o valor depois de decrementá-lo.</li> +</ul> + +<h3 id="Sintaxe_8">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> x-- or --x +</pre> + +<h3 id="Exemplos_7">Exemplos</h3> + +<pre class="brush: js">// Posfixo +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefixo +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Negação_Unária_(-)"><a name="Unary_negation">Negação Unária (-)</a></h2> + +<p>O operador de negação unária precede seu operando e o nega.</p> + +<h3 id="Sintaxe_9">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> -x +</pre> + +<h3 id="Exemplos_8">Exemplos</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 +</pre> + +<h2 id="Soma_Unária_()"><a name="Unary_plus">Soma Unária</a> (+)</h2> + +<p>O operador de soma unária precede seu operando e calcula para seu operando mas tenta convertê-lo para um número, caso ainda não o seja. Apesar da negação unária (-) também poder converter não-números, a soma unária é a forma mais rápida e a forma preferida de converter alguma coisa em um número, porque ele não realiza nenhuma outra operação no número. Ele pode converter strings que representam inteiros e ponto flutuante, bem como os valores de não-string <code>true</code>, <code>false</code>, e <code>null</code>. Inteiros em formato decimal e hexadecimal ("0x"-prefixado) são suportados. Números negativos são suportados (não os hexadecimais). Caso não possa analisar um determinado valor, o operador retornará <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> + +<h3 id="Sintaxe_10">Sintaxe</h3> + +<pre class="syntaxbox"><strong>Operador:</strong> +x +</pre> + +<h3 id="Exemplos_9">Exemplos</h3> + +<pre class="brush: js">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 +</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 1ª Edição.</td> + <td>Padrão</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<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><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operatores de atribuição</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/array_comprehensions/index.html b/files/pt-br/web/javascript/reference/operators/array_comprehensions/index.html new file mode 100644 index 0000000000..c035f757d7 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/array_comprehensions/index.html @@ -0,0 +1,207 @@ +--- +title: Array comprehensions +slug: Web/JavaScript/Reference/Operators/Array_comprehensions +tags: + - Array + - ECMAScript7 + - JavaScript + - Operador +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +<p>{{jsSidebar("Operators")}}</p> + +<h2 id="Sumário">Sumário</h2> + +<p> </p> + +<p><span class="seoSummary"><span style="line-height: 19.0909080505371px;">A sintaxe de </span><strong style="line-height: 19.0909080505371px;">array comprehension</strong><span style="line-height: 19.0909080505371px;"> trata-se de uma expressão JavaScript que lhe permite rapidamente montar um novo array com base em outro já existente. As comprehensions já existem em várias outras linguagens e estarão então presentes no padrão ECMAScript 7.</span></span></p> + +<p>Veja abaixo as diferenças para a antiga implementação no SpiderMOnkey, baseado nas propostas para o ECMAScript 4.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">[for (x of iterable) x] +[for (x of iterable) if (condition) x] +[for (x of iterable) for (y of iterable) x + y] +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Dentro de array comprehensions dois tipos de components são permitidos: </p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> e</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></li> +</ul> + +<p>A iteração por for-of deve sempre, ser a primeira componente. Multiplos <code>for-of</code> ou <code>if</code>s podem também ser permitidos.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Array_comprehensions_simples">Array comprehensions simples</h3> + +<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ]; +// [ 1, 4, 9 ] + +var abc = [ "A", "B", "C" ]; +[for (letters of abc) letters.toLowerCase()]; +// [ "a", "b", "c" ]</pre> + +<h3 id="Array_comprehensions_com_if">Array comprehensions com <code>if</code></h3> + +<pre class="brush: js">var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ]; +[for (year of years) if (year > 2000) year]; +// [ 2006, 2010, 2014 ] +[for (year of years) if (year > 2000) if(year < 2010) year]; +// [ 2006], the same as below: +[for (year of years) if (year > 2000 && year < 2010) year]; +// [ 2006] +</pre> + +<h3 id="Array_comprehensions_comparado_a_map_e_filter">Array comprehensions comparado a <code>map</code> e <code>filter</code></h3> + +<p>Um modo fácil de entender a sintaxe de array comprehension é comparar com os métodos {{jsxref("Array.map", "map")}} e {{jsxref("Array.filter", "filter")}}:</p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; + +numbers.map(function (i) { return i * i }); +[for (i of numbers) i*i ]; +// both is [ 1, 4, 9 ] + +numbers.filter(function (i) { return i < 3 }); +[for (i of numbers) if (i < 3) i]; +// both is [ 1, 2 ] +</pre> + +<h3 id="Array_comprehensions_com_dois_arrays">Array comprehensions com dois arrays</h3> + +<p>Utilizando dois iteradores <code>for-of, com dois arrays:</code></p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; +var letters = [ "a", "b", "c" ]; + +var cross = [for (i of numbers) for (j of letters) i+j]; +// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ] + +var grid = [for (i of numbers) [for (j of letters) i+j]]; +// [ +// ["1a", "1b", "1c"], +// ["2a", "2b", "2c"], +// ["3a", "3b", "3c"] +// ] + +[for (i of numbers) if (i > 1) for (j of letters) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"], the same as below: + +[for (i of numbers) for (j of letters) if (i > 1) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"] + +[for (i of numbers) if (i > 1) [for (j of letters) if(j > "a") i+j]] +// [["2b", "2c"], ["3b", "3c"]], not the same as below: + +[for (i of numbers) [for (j of letters) if (i > 1) if(j > "a") i+j]] +// [[], ["2b", "2c"], ["3b", "3c"]] +</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>Proposed for ECMAScript 7</td> + <td>No draft available yet</td> + <td>Estava inicialmente no rascunho para o ES6, porém foi removido na revisão 27 (Agosto, 2014). Veja as revisões antigas do ES6 para especificações de semântica. Uma versão atualizada estará de volta em um novo rascunho do ES7.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("30") }}</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>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("30") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_sobre_implementações_para_o_SpiderMonkey">Notas sobre implementações para o SpiderMonkey</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> como um idenficador não é suportado, assim let está recentemente disponível somente para JS versão 1.7 e tags de scripts XUL.</li> + <li>Destruturação em comprehensions ainda não é suportado ({{bug(980828)}}).</li> +</ul> + +<h3 id="Diferenças_para_as_antiga_JS1.7JS1.8_comprehensions">Diferenças para as antiga JS1.7/JS1.8 comprehensions</h3> + +<ul> + <li>Comprehensions no ES7 criam um escopo para cada nó de <font face="Courier New, Andale Mono, monospace">for<code> ao invés da comprehension toda</code></font> + + <ul> + <li>Antigo: <code>[()=>x for (x of [0, 1, 2])][1]() // 2</code></li> + <li>Novo: <code>[for (x of [0, 1, 2]) ()=>x][1]() // 1, cada iteração cria uma nova binding para o </code>x.</li> + </ul> + </li> + <li>Comprehensions no ES7 iniciam com <code>for</code> ao invés de expressão de assinalamento. + <ul> + <li>Antigo: <code>[i * 2 for (i of numbers)]</code></li> + <li>Novo: <code>[for (i of numbers) <code>i * 2</code>]</code></li> + </ul> + </li> + <li>Comprehensions no ES7 podem ter multiplos <code>if</code> e <code>for</code>.</li> + <li>Comprehensions no ES7 funcionam apenas com <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> e não com iterações <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a>.</code></li> +</ul> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a></li> + <li>{{jsxref("Operators/Generator_comprehensions", "Generator comprehensions", "" ,1)}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/async_function/index.html b/files/pt-br/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..fbd7674f47 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,152 @@ +--- +title: Expressão da função async +slug: Web/JavaScript/Reference/Operators/async_function +tags: + - Experimental + - Expressão Primária + - Função + - Operador +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>A palavra chave async pode ser usado para definir funções async dentro das expressões.</div> + +<div>Você tambem pode definir funções async usando a declaração de função async.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">async function [<em>nome</em>]([<em>parametro1</em>[, <em>parametro2[</em>, ..., <em>parametroN</em>]]]) { + <em>declarações</em> +}</pre> + +<p>Como no <a href="https://developer.mozilla.org/en-US/docs/">ES2015</a>, você tambem pode usar <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>.</p> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>nome</code></dt> + <dd>O nome da função.Pode ser omitida, na qual a função se torna anonima . O nome é somente local para o corpo da função.</dd> + <dt><code>parametroN</code></dt> + <dd>O nome do argumento passado para a função.</dd> + <dt><code>declarações</code></dt> + <dd>As declarações que compoem o corpo da função .</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Uma expressão <code>async function</code> é muito similar, e tem quase a mesma sintaxe de uma {{jsxref('Statements/async_function', 'declaração async function')}}. A principal diferença entre uma expressão <code>async function </code>e uma declaração <code>async function</code> é o <em>nome da função</em><em>,</em> que pode ser omitido em expressões <code>async function</code> para criar <em>funções anônimas</em>. Uma expressão <code>async function</code> pode ser utilizada como um {{Glossary("IIFE")}} (Immediately Invoked Function Expression, em tradução livre: Expressão de Função Invocada Imediatamente) que roda assim que definido. Veja também o capítulo sobre <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funções</a> para mais informações.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_simples">Exemplo simples</h3> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +}; + +(async function(x) { // async function expression usada como uma IIFE + var a = resolveAfter2Seconds(20); + var b = resolveAfter2Seconds(30); + return x + await a + await b; +})(10).then(v => { + console.log(v); // imprime 60 após 2 segundo. +}); + +var add = async function(x) { // async function expression atribuída a uma variável + var a = await resolveAfter2Seconds(20); + var b = await resolveAfter2Seconds(30); + return x + a + b; +}; + +add(10).then(v => { + console.log(v); // imprime 60 após 4 segundos. +}); +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definição inicial no ES2017.</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> Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(42)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(42)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(55)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> + <li>{{jsxref("Operators/await", "await")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html b/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html new file mode 100644 index 0000000000..6b1a100b4b --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/atribuicao_via_desestruturacao/index.html @@ -0,0 +1,445 @@ +--- +title: Atribuição via desestruturação (destructuring assignment) +slug: Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A sintaxe de <strong>atribuição via desestruturação (destructuring assignment)</strong> é uma expressão JavaScript que possibilita extrair dados de arrays ou objetos em variáveis distintas.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:js notranslate">var a, b, rest; +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 + +[a, b, ...rest] = [1, 2, 3, 4, 5]; +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // [3, 4, 5] + +({a, b} = {a:1, b:2}); +console.log(a); // 1 +console.log(b); // 2 + +// ES2016 - não implementado em Firefox 47a01 +({a, b, ...rest} = {a:1, b:2, c:3, d:4}); +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>As expressões de objeto e matriz literais fornecem uma maneira fácil de criar pacotes <em>ad hoc</em> de dados .</p> + +<pre class="brush: js notranslate">var x = [1, 2, 3, 4, 5];</pre> + +<p>A atribuição via desestruturação usa sintaxe similar, mas no lado esquerdo da atribuição são definidos quais elementos devem ser extraídos da variável de origem.</p> + +<pre class="brush: js notranslate">var x = [1, 2, 3, 4, 5]; +var [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>Esse recurso é semelhante aos recursos presentes em linguagens como Perl e Python.</p> + +<h2 id="Desestruturação_de_array">Desestruturação de array</h2> + +<h3 id="Atribuição_básica_de_variável">Atribuição básica de variável</h3> + +<pre class="brush: js notranslate">var foo = ["one", "two", "three"]; + +var [one, two, three] = foo; +console.log(one); // "one" +console.log(two); // "two" +console.log(three); // "three" +</pre> + +<h3 id="Atribuição_separada_da_declaração">Atribuição separada da declaração</h3> + +<p>Uma variável pode ter seu valor atribuído via desestruturação separadamente da declaração dela.</p> + +<pre class="brush:js notranslate">var a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Valores_padrão">Valores padrão</h3> + +<p>Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do array é undefined.</p> + +<pre class="brush: js notranslate">var a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h3 id="Trocando_variáveis">Trocando variáveis</h3> + +<p>Os valores de duas variáveis podem ser trocados em uma expressão de desestruturação.</p> + +<p>Sem atribuição via desestruturação, trocar dois valores requer uma variável temporária (ou, em algumas linguagens de baixo nível, o <a class="external" href="https://pt.wikipedia.org/wiki/Algoritmo_XOR_Swap">Algoritmo XOR Swap</a>).</p> + +<pre class="brush:js notranslate">var a = 1; +var b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 +</pre> + +<h3 id="Analisando_um_array_retornado_de_uma_função">Analisando um array retornado de uma função</h3> + +<p>Sempre foi possível retornar uma matriz de uma função. A desestruturação pode tornar mais conciso o trabalho com um valor de retorno do tipo array.</p> + +<p>Neste exemplo, <code>f()</code> returna os valores <code>[1, 2]</code> como saída, que podem ser analisados em uma única linha com desestruturação.</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2]; +} + +var a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h3 id="Ignorando_alguns_valores_retornados">Ignorando alguns valores retornados</h3> + +<p>Você pode ignorar valores retornados que você não tem interesse:</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 +</pre> + +<p>Você também pode ignorar todos os valores retornados:</p> + +<pre class="brush:js notranslate">[,,] = f(); +</pre> + +<h3 id="Atribuindo_o_resto_de_um_array_para_uma_variável">Atribuindo o resto de um array para uma variável</h3> + +<p>Ao desestruturar um array, você pode atribuir a parte restante deste em uma viáriável usando o padrão rest:</p> + +<pre class="brush: js notranslate">var [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<h3 id="Extraindo_valores_do_resultado_de_uma_expressão_regular">Extraindo valores do resultado de uma expressão regular</h3> + +<p>Quando o método de expressão regular <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> encontra um resultado, ele retorna um array que contém primeiro toda a porção resultante da string e depois cada uma das porções da string resultante envolvidas por parênteses na expressão regular. A atribuição via desestruturação lhe permite extrair as partes desses array facilmente, ignorando a porção resultante completa se não precisar.</p> + +<pre class="brush:js notranslate">var url = "https://developer.mozilla.org/en-US/Web/JavaScript"; + +var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); +console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] + +var [, protocol, fullhost, fullpath] = parsedURL; + +console.log(protocol); // "https" +</pre> + +<h2 id="Desestruturação_de_objeto">Desestruturação de objeto</h2> + +<h3 id="Atribuição_básica">Atribuição básica</h3> + +<pre class="brush: js notranslate">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true +</pre> + +<h3 id="Atribuição_sem_declaração">Atribuição sem declaração</h3> + +<p>Uma variável pode ter seu valor atribuído via desestruturação separadamente da sua declaração.</p> + +<pre class="brush:js notranslate">var a, b; + +({a, b} = {a:1, b:2});</pre> + +<div class="note"> +<p>Os parênteses <code>( ... )</code> ao redor da declaração de atribuição é uma sintaxe necessária quando se utiliza a atribuição via desestruturação de objeto literal sem uma declaração.</p> + +<p><code>{a, b} = {a:1, b:2}</code> não é uma sintaxe stand-alone válida, pois <code>{a, b}</code> no lado esquerdo é considarada um bloco, não um objeto literal.</p> + +<p>No entanto, <code>({a, b} = {a:1, b:2})</code> é valida, assim como <code>var {a, b} = {a:1, b:2}</code></p> +</div> + +<h3 id="Atribuição_para_variáveis_com_novos_nomes">Atribuição para variáveis com novos nomes</h3> + +<p>Uma variável pode ser extraída de um objeto e atribuída a uma variável com um nome diferente da propriedade do objeto.</p> + +<pre class="brush: js notranslate">var o = {p: 42, q: true}; +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true </pre> + +<h3 id="Valores_padrão_2">Valores padrão</h3> + +<p>Uma variável pode ser atribuída de um padrão, no caso em que o valor retirado do objeto é undefined.</p> + +<pre class="brush: js notranslate">var {a=10, b=5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h3 id="Definindo_um_valor_padrão_de_parâmetro_de_função">Definindo um valor padrão de parâmetro de função</h3> + +<h4 id="Versão_ES5">Versão ES5</h4> + +<pre class="brush: js notranslate">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // now finally do some chart drawing +} + +drawES5Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="Versão_ES2015">Versão ES2015</h4> + +<pre class="brush: js notranslate">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) { + console.log(size, cords, radius); + // do some chart drawing +} + +drawES2015Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h3 id="Objeto_aninhado_e_desestruturação_de_array">Objeto aninhado e desestruturação de array</h3> + +<pre class="brush:js notranslate">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="For_de_iteração_e_desestruturação">For de iteração e desestruturação</h3> + +<pre class="brush: js notranslate">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Extraindo_campos_de_objetos_passados_como_parâmetro_de_função">Extraindo campos de objetos passados como parâmetro de função</h3> + +<pre class="brush:js notranslate">function userId({id}) { + return id; +} + +function whois({displayName: displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>Isso extrai o <code>id</code>, <code>displayName</code> e <code>firstName</code> do objeto <code>user</code> e os imprime na tela.</p> + +<h3 id="Nomes_computados_de_propriedade_de_objeto_e_desestruturação">Nomes computados de propriedade de objeto e desestruturação</h3> + +<p>Nomes computados de propriedades, como em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">objetos literais</a>, podem ser usados com desestruturação.</p> + +<pre class="brush: js notranslate">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Espeficiação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td> + <p>Suporte básico</p> + </td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td> + <p>Nomes computados de propriedades</p> + </td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>14</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Operador spread</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>12<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Nomes computados de propriedades</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + <tr> + <td>Operador spread</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Requer "Enable experimental Javascript features" para funciona sob `about:flags`</p> + +<h2 id="Notas_específicas_do_Firefox">Notas específicas do Firefox</h2> + +<ul> + <li>O Firefox forneceu uma extensão não-padronizada de linguagem em <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> para desestruturação. Esta extensão foi removida no Gecko 40 {{geckoRelease (40)}}. Consulte {{bug (1083498)}}.</li> + <li>A partir do Gecko 41 {{geckoRelease (41)}} e para cumprir com a especificação ES2015, padrões de desestruturação com parênteses, como <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 }</code>, agora são considerados inválidos e lançarão um {{jsxref ( "SyntaxError")}}. Veja a postagem no blog de Jeff Walden e {{bug (1146136)}} para mais detalhes.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operadores de Atribuição</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org (em inglês)</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/await/index.html b/files/pt-br/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..c37d10bf4b --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/await/index.html @@ -0,0 +1,152 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +tags: + - Experimental + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/await +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>O operador <code>await</code> é utilizado para esperar por uma {{jsxref("Promise")}}. Ele pode ser usado apenas dentro de uma {{jsxref("Statements/async_function", "async function")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">[<em>rv</em>] = await <em>expressão</em>;</pre> + +<dl> + <dt><code>expressão</code></dt> + <dd>Uma {{jsxref("Promise")}} ou qualquer valor para esperar uma resolução.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Retorna um valor final da promise, ou o próprio valor se ele não for uma <code>Promise</code>.</p> + </dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>A expressão <code>await</code> faz a execução de uma função <code>async</code> pausar, para esperar pelo retorno da <code>Promise</code>, e resume a execução da função <code>async</code> quando o valor da Promise é resolvido. Ele então retorna o valor final da Promise. Se esse valor não for uma <code>Promise</code>, ele é convertido para uma <code>Promise </code>resolvida.</p> + +<p>Se a <code>Promise</code> for rejeitada, a expressão <code>await</code> invoca uma Exception com o valor rejeitado.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Se uma <code>Promise</code> é passada para uma expressão <code>await</code>, ele espera pela sefinalização da <code>Promise</code> e retorna seu valor final.</p> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} +f1(); +</pre> + +<p>Se o valor não for uma <code>Promise</code>, ele converte o valor para uma <code>Promise </code>resolvida, e espera por ele.</p> + +<pre class="brush: js">async function f2() { + var y = await 20; + console.log(y); // 20 +} +f2();</pre> + +<p>Se a <code>Promise</code> for rejeitada, o valor rejeitado é invocado em uma Exception.</p> + +<pre class="brush: js">async function f3() { + try { + var z = await Promise.reject(30); + } catch(e) { + console.log(e); // 30 + } +} +f3();</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definição inicial no ES2017.</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(42)}}</td> + <td>10.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatChrome(55)}}</td> + <td>{{CompatChrome(55)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(42)}}</td> + <td>10.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html b/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html new file mode 100644 index 0000000000..7e9d2de505 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/bitwise_operators/index.html @@ -0,0 +1,558 @@ +--- +title: Bitwise operators +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<div></div> + +<div>Operadores bit-a-bit são são operadores tratados como sequência de 32 bits ( zeros e uns ), preferencialmente como decimal, hexadecimal, ou números octais. Por exemplo, o número decimal 9 tinha como representação binária de 1001. Operadores bit-a-bit realizam as operações em tais representações binárias, mas retornam valores numéricos no padrão Javascript.</div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + +<p class="hidden">O código para este interactivo exemplo está armazenado em um repositório GitHub . Se você quiser contribuir para o projeto exemplo interativo, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e mande-nos um pull request.</p> + +<p>A seguinte tabela resume os Operadores bit-a-bit:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Uso</th> + <th>Descrição</th> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_AND)">Bitwise AND</a></td> + <td><code>a & b</code></td> + <td>Retorna <code>1</code> em cada posição de bit para à qual o bit correspondente de ambos eram <code>1</code>s.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_OR)">Bitwise OR</a></td> + <td><code>a | b</code></td> + <td> + <p>Retorna 1 para cada posição de bit para à qual o correspondente de um ou ambos eram <code>1</code>s.</p> + </td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_XOR)">Bitwise XOR</a></td> + <td><code>a ^ b</code></td> + <td>Retorna 1 para cada posição de bit para à qual o bit correspondente de um mas não ambos eram <code>1</code>s.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_NOT)">Bitwise NOT</a></td> + <td><code>~ a</code></td> + <td>Inverte os bits de seus operandos.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3C%3C_(Left_shift)">Left shift</a></td> + <td><code>a << b</code></td> + <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à esquerda, mudando de zeros à diretia.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E_(Sign-propagating_right_shift)">Sign-propagating right shift</a></td> + <td><code>a >> b</code></td> + <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à direita, descartando bits que foram tornados off.</td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E%3E_(Zero-fill_right_shift)">Zero-fill right shift</a></td> + <td><code>a >>> b</code> </td> + <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à direita, descartando bits que foram tornados off, e jogando <code>0</code>s para à esquerda.</td> + </tr> + </tbody> +</table> + +<h2 id="Inteiros_assinados_em_32-bit">Inteiros assinados em 32-bit</h2> + +<p>Os operandos de todos os operadores bit-a-bit são assinados como inteiros de 32-bit em duas formas complementares. Duas formas complementares significa que uma negativa contrapartida (e.g. 5 vs. -5) são todos os bits daqueles números invertidos (bit-a-bit NOT de um número, a.k.a. complementos de um número) mais um. Por example, os seguintes encodes inteiros são 314:</p> + +<pre class="brush: js">00000000000000000000000100111010 +</pre> + +<p>Os seguintes encodes <code>~314</code>, i.e. são os únicos complementos de <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000101 +</pre> + +<p>Finalmente, os seguintes encodes <code>-314,</code> i.e. são dois complementos de <code>314</code>:</p> + +<pre class="brush: js">11111111111111111111111011000110 +</pre> + +<p>As duas garantias complementares daquele bit mais à esquerda que é zero quando o número é positivo e 1 quando o número é negativo. Aliás, isto é chamado de <em>sign bit </em>ou <em>bit assinalado.</em></p> + +<p>O número 0 é o inteiro composto completamente de 0 bits.</p> + +<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2) +</pre> + +<p>O número <code>-1</code> é o inteiro que é composto completamente de 1 bits.</p> + +<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>O número <code>-2147483648</code> (representação hexadecimal: <code>-0x80000000</code>) é o inteiro completamente composto de 0 bits exceto o primeiro (left-most) único.</p> + +<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>O número <code>2147483647</code> (representação hexadecimal: <code>0x7fffffff</code>) é o inteiro composto completamente por bits 1, exceto pelo primeiro (o mais à esquerda).</p> + +<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>Os números <code>-2147483648</code> e <code>2147483647</code> são, respectivamente, o minimo e o máximo inteiro representáveis atráves de um número de 32 bits assinados.</p> + +<h2 id="Operadores_lógico_bit-abit">Operadores lógico bit-abit</h2> + +<p>Conceitualmente, os operadores lógicos bit-abit funcionam da seguinte forma:</p> + +<ul> + <li>Os operandos são convertidos para inteiros de 32 bits e expressados em uma série de bits (zeros e ums). Números com mais de 32 bits têm seus bits mais significativos descartados. Por exemplo, o inteiro com mais de 32 bits a seguir será convertido para um inteiro de 32 bits: + <pre class="brush: js">Before: 11100110111110100000000000000110000000000001 +After: 10100000000000000110000000000001</pre> + </li> + <li>Cada bit no primeiro operando é pareado com o bit correspondente no segundo operando: primeiro bit para o primeiro bit, segundo bit para o segundo bit e assim por diante.</li> + <li>O operador é aplicado para cada par de bits e o resultado é construído bit a bit.</li> +</ul> + +<h3 id="(Bitwise_AND)"><a name="Bitwise_AND">& (Bitwise AND)</a></h3> + +<p>Performa a operação AND em cada par de bits. <code>a</code> AND <code>b</code> retorna 1, apenas quando <code>a</code> e <code>b</code> são <code>1</code>. A tabela verdade para a operação AND é:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> retornará <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>.</p> + +<h3 id="(Bitwise_OR)"><a name="Bitwise_OR">| (Bitwise OR)</a></h3> + +<p>Performa a operação OR em cada par de bits. <code>a</code> OR <code>b</code> retorna 1 se pelo menos <code>a</code> ou pelo menos <code>b</code> é <code>1</code>. As tabela versão para a operação <code>OR</code> é:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Performar a operação <code>OR</code> de qulalquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação <code>OR</code> de qualquer número <code>X</code> com <code>-1</code> retornará <code>-1</code>.</p> + +<h3 id="(Bitwise_XOR)"><a name="Bitwise_XOR">^ (Bitwise XOR)</a></h3> + +<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the <code>XOR</code> operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Bitwise XORing any number <code>x</code> with <code>0</code> yields x. Bitwise XORing any number <code>x</code> with <code>-1</code> yields <code>~x</code>.</p> + +<h3 id="(Bitwise_NOT)"><a name="Bitwise_NOT">~ (Bitwise NOT)</a></h3> + +<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the <code>NOT</code> operation is:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Bitwise NOTing any number <code>x</code> yields <code>-(x + 1)</code>. For example, <code>~-5</code> yields <code>4</code>.</p> + +<p>Note that due to using 32-bit representation for numbers both <code>~-1</code> and <code>~4294967295</code> (2<sup>32</sup>-1) results in <code>0</code>.</p> + +<h2 id="Operadores_de_deslocamento_bit_a_bit">Operadores de deslocamento bit a bit</h2> + +<p>The bitwise shift operators take two operands: the first is a quantity to be shifted, and the second specifies the number of bit positions by which the first operand is to be shifted. The direction of the shift operation is controlled by the operator used.</p> + +<p>Shift operators convert their operands to 32-bit integers in big-endian order and return a result of the same type as the left operand. The right operand should be less than 32, but if not only the low five bits will be used.</p> + +<h3 id="<<_(Left_shift)"><a name="Left_shift"><< (Left shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right.</p> + +<p>For example, <code>9 << 2</code> yields 36:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Bitwise shifting any number <code>x</code> to the left by <code>y</code> bits yields <code>x * 2 ** y</code>.</p> + +<h3 id=">>_(Sign-propagating_right_shift)"><a name="Right_shift">>> (Sign-propagating right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. Since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. Hence the name "sign-propagating".</p> + +<p>For example, <code>9 >> 2</code> yields 2:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Likewise, <code>-9 >> 2</code> yields <code>-3</code>, because the sign is preserved:</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(Zero-fill_right_shift)"><a name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> + +<p>This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. The sign bit becomes 0, so the result is always non-negative.</p> + +<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> + +<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields <code>-3</code>):</p> + +<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> + +<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, which are like binary variables. Variables could be used instead of these sequences, but binary flags take much less memory (by a factor of 32).</p> + +<p>Suppose there are 4 flags:</p> + +<ul> + <li>flag A: we have an ant problem</li> + <li>flag B: we own a bat</li> + <li>flag C: we own a cat</li> + <li>flag D: we own a duck</li> +</ul> + +<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> + +<pre class="brush: js">var flags = 5; // binary 0101 +</pre> + +<p>This value indicates:</p> + +<ul> + <li>flag A is true (we have an ant problem);</li> + <li>flag B is false (we don't own a bat);</li> + <li>flag C is true (we own a cat);</li> + <li>flag D is false (we don't own a duck);</li> +</ul> + +<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> + +<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>New bitmasks can be created by using the bitwise logical operators on these primitive bitmasks. For example, the bitmask 1011 can be created by ORing FLAG_A, FLAG_B, and FLAG_D:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Individual flag values can be extracted by ANDing them with a bitmask, where each bit with the value of one will "extract" the corresponding flag. The bitmask <em>masks</em> out the non-relevant flags by ANDing with zeroes (hence the term "bitmask"). For example, the bitmask 0100 can be used to see if flag C is set:</p> + +<pre class="brush: js">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> + +<pre class="brush: js">// if we own a bat or we own a cat +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flags & FLAG_B) || (flags & FLAG_C)) { + // do stuff +} +</pre> + +<pre class="brush: js">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Flags can be set by ORing them with a bitmask, where each bit with the value one will set the corresponding flag, if that flag isn't already set. For example, the bitmask 1100 can be used to set flags C and D:</p> + +<pre class="brush: js">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Flags can be cleared by ANDing them with a bitmask, where each bit with the value zero will clear the corresponding flag, if it isn't already cleared. This bitmask can be created by NOTing primitive bitmasks. For example, the bitmask 1010 can be used to clear flags A and C:</p> + +<pre class="brush: js">// no, we don't have an ant problem or own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> + +<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Flags can be toggled by XORing them with a bitmask, where each bit with the value one will toggle the corresponding flag. For example, the bitmask 0110 can be used to toggle flags B and C:</p> + +<pre class="brush: js">// if we didn't have a bat, we have one now, +// and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finally, the flags can all be flipped with the NOT operator:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Conversion_snippets">Conversion snippets</h3> + +<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = '1011'; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> + +<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p> + +<pre class="brush: js">function createMask() { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // prints 11, i.e.: 1011 +</pre> + +<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> + +<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p> + +<pre class="brush: js">function arrayFromMask(nMask) { + // nMask must be between -2147483648 and 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError('arrayFromMask - out of range'); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert('[' + array1.join(', ') + ']'); +// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>You can test both algorithms at the same time…</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>For the didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p> + +<pre class="brush: js">function createBinaryString(nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ''; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// prints 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="Specifications">Specifications</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/bitwise_xor/index.html b/files/pt-br/web/javascript/reference/operators/bitwise_xor/index.html new file mode 100644 index 0000000000..9a8fe88d4c --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/bitwise_xor/index.html @@ -0,0 +1,108 @@ +--- +title: Bitwise XOR (^) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>O operador bitwise XOR (<code>^</code>) retorna o numero 1 em cada posição de bit para a qual os bits correspondentes de ambos, mas não de ambos os operandos, são <code>1</code>s.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code><var>a</var> ^ <var>b</var></code> +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Os operandos são convertidos em números inteiros de 32 bits e expressados por uma série de bits (zeros e uns). Numeros com mais de 32 bits descartam seus bits mais significativos. Por exemplo, o número inteiro a seguir com mais de 32 bits será convertido em um número inteiro de 32 bits:</p> + +<pre class="brush: js notranslate">Antes: 11100110111110100000000000000110000000000001 +Depois: 10100000000000000110000000000001</pre> + +<p>Cada bit no primeiro operando é emparelhado com o bit correspondente no segundo operando: primeiro bit para o primeiro bit, segundo bit para o segundo bit e assim por diante.</p> + +<p>O operador é aplicado para cada par de bits e o resultado é construído em bitwise.</p> + +<p>A tabela verdade para a operação XOR é:</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">a</th> + <th class="header" scope="col">b</th> + <th class="header" scope="col">a XOR b</th> + </tr> + </thead> + <tbody> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="brush: js notranslate">. 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Bitwise XORing any number <code><var>x</var></code> with <code>0</code> yields <code><var>x</var></code>.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_bitwise_XOR">Usando bitwise XOR</h3> + +<pre class="brush: js notranslate">// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 ^ 9; +// 7 (00000000000000000000000000000111)</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-BitwiseXORExpression', 'Bitwise XOR expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_Navegador">Compatibilidade do Navegador</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.operators.bitwise_xor")}}</p> + +<h2 id="Leia_também">Leia também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">Bitwise operators in the JS guide</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">Bitwise XOR assignment operator</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/class/index.html b/files/pt-br/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..defeeff680 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/class/index.html @@ -0,0 +1,173 @@ +--- +title: class expression +slug: Web/JavaScript/Reference/Operators/class +tags: + - Classes + - ECMAScript 2015 + - Expression + - Expressão + - Operador + - Operator + - Reference + - Referencia +translation_of: Web/JavaScript/Reference/Operators/class +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A <strong>expressão class</strong> é uma das formas de definir uma classe no ECMAScript 2015. Parecido com as <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expressões function</a>, expressões class poder ser nomeadas ou não. Se nomeada, o nome da classe é local para apenas o corpo da classe. Classes no JavaScript usam herança com base no prototype</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">var MinhaClasse = class <em>[nomeDaClass]</em> [extends] { + // corpo da classe +};</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Uma expressão de classe tem uma sintaxe similar a uma <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaração de classe</a>. No entanto, com expressões de classe, você poderá omitir o nome da classe ("ligação de identificadores"), que você não pode se usar declarações. Adicionalmente, expressões de classe permitem que você redefina/redeclare classes e <strong>não invocar</strong> nenhum tipo de erros como <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaração de classe</a>. A propriedade construtora é opcional. E o <em>typeof </em>de classes geradas usando essa palavra-chave sempre será "function".</p> + +<p>Assim como declarações de classes, o corpo das expressões de classe são executados em <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<pre class="brush: js">'use strict'; +var Foo = class {}; // propriedade de construtor é opcional +var Foo = class {}; // Re-declaração é permitida + +typeof Foo; //returna "function" +typeof class {}; //returna "function" + +Foo instanceof Object; // true +Foo instanceof Function; // true +class Foo {}; // Throws TypeError, não permite re-declaração +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uma_simples_expressão_de_classe">Uma simples expressão de classe</h3> + +<p>Isso é apenas uma simples classe anônima que você pode referir usando a variável "Foo".</p> + +<pre class="brush: js">var Foo = class { + constructor() {} + bar() { + return 'Olá mundo!'; + } +}; + +var instance = new Foo(); +instance.bar(); // "Olá mundo!" +Foo.name; // "Foo" +</pre> + +<h3 id="Expressões_de_classes_nomeadas">Expressões de classes nomeadas</h3> + +<p>Se você quiser referir a classe atual dentro do corpo da classe, você pode criar uma expressão de classe nomeada. Esse nome é visível apenas no escopo da expressão classe sozinha.</p> + +<pre class="brush: js">var Foo = class NamedFoo { + constructor() {} + whoIsThere() { + return NamedFoo.name; + } +} +var bar = new Foo(); +bar.whoIsThere(); // "NamedFoo" +NamedFoo.name; // ReferenceError: NamedFoo is not defined +Foo.name; // "NamedFoo" +</pre> + +<h2 id="Especificações">Especificaçõ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>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_inicial">Compatibilidade inicial</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">Expressão <code>function</code> </a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">Declaração <code>class</code> </a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/expression_closures/index.html b/files/pt-br/web/javascript/reference/operators/expression_closures/index.html new file mode 100644 index 0000000000..afae2c0459 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/expression_closures/index.html @@ -0,0 +1,72 @@ +--- +title: Expression closures +slug: Web/JavaScript/Reference/Operators/Expression_closures +translation_of: Archive/Web/JavaScript/Expression_closures +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}} +<div class="warning"><strong>Não padronizado. Não use!</strong><br> +A síntaxe expressão closure syntax é uma feature especifica ao Firefox que foi deprecada e foi removida a partir do Firefox 60. Para usos futuros considere usar <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>.</div> +</div> + +<p>Expressões fechamentos são uma forma curta de sintaxe de função para escrever funções simples.</p> + +<h2 id="Síntaxe">Síntaxe</h2> + +<pre class="syntaxbox">function [<em>nome</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>expressão</em> +</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>nome</code></dt> + <dd>O nome da função. Pode ser omitido, passando a ser nesse caso uma função <em>anónima</em>. O nome só é local ao corpo da função.</dd> + <dt><code>paramN</code></dt> + <dd>Nome do parâmetro a ser passado à função. Uma função pode receber até 255 argumentos.</dd> + <dt><code>expressão</code></dt> + <dd>A expressão pela qual o corpo da função é composta</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Esta adição é nada mais que uma maneira reduzida de escreve funções simples, dando à linguagem algo semelhante a <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Notação Lambda</a>.</p> + +<p>JavaScript 1.7 e anterior:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>Esta Síntaxe permite omitir as chavetas e o 'return' - fazendo-os implícitos. Não benifício adicional em escrever código desta forma para além de ser sintáticamente reduzido.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Uma maneira reduzida de fazer bind de EventListeners:</p> + +<pre class="brush: js"> document.addEventListener('click', function() false, true); +</pre> + +<p>Usando esta função com algumas funções de array do JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == 'text'); +</pre> + +<h2 id="Compatibilidade_do_Browser">Compatibilidade do Browser</h2> + + + +<p>{{Compat("javascript.operators.expression_closures")}}</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>{{JSxRef("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{JSxRef("Function")}}</li> + <li>{{JSxRef("Statements/function", "function statement")}}</li> + <li>{{JSxRef("Operators/function", "function expression")}}</li> + <li>{{JSxRef("Statements/function*", "function* statement")}}</li> + <li>{{JSxRef("Operators/function*", "function* expression")}}</li> + <li>{{JSxRef("GeneratorFunction")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/function/index.html b/files/pt-br/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..a5950f8ea1 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/function/index.html @@ -0,0 +1,113 @@ +--- +title: Expressão de função (function expression) +slug: Web/JavaScript/Reference/Operators/function +tags: + - Expressões Primárias + - Função + - Internet + - JavaScript + - Operador + - Rede + - Web +translation_of: Web/JavaScript/Reference/Operators/function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A palavara-chave <strong><code>function</code></strong> pode ser usada para definir uma função dentro de uma expressão.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>name</code></dt> + <dd>O nome da função. Pode ser omitido, neste caso a função será anônima. O nome só é local em relação ao corpo da função. </dd> + <dt><code>paramN</code></dt> + <dd>O nome de um argumento a ser passado para a função.</dd> + <dt><code>statements</code></dt> + <dd>As declarações que compreendem o corpo da função.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Uma expressão de função (<em>function expression</em>) é muito similar e tem quase a mesma sintaxe de uma declaração de função (veja <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> para mais detalhes). A principal diferença entre uma expressão de função e a declaração de uma função é o nome da função (<em>function name</em>)<em>,</em> o qual pode ser omitido em expressões de funções para criar funções anônimas. Veja ainda o capítulo sobre <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funções</a> para maiores informações.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O exemplo a seguir define uma função sem nome e a atribui a x. A função retorna o quadrado de seu argumento:</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<h3 id="Expressão_de_função_nomeada">Expressão de função nomeada</h3> + +<p>Se você quer se referir à função atual dentro do corpo da função, você terá que criar uma expressão de função nomeada. Este nome será local apenas para o corpo (escopo) da função. Isto ainda evita o uso da propriedade não-padronizada <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code>.</p> + +<pre class="brush: js">var math = { + 'factorial': function factorial(n) { + if (n <= 1) + return 1; + return n * factorial(n - 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('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2> + +<div class="hidden"> +<p>A tabela de compatibilidade nesta página é gerada por dados estruturados.<br> + Se você quiser contribuir para com os dados, por favor, veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um <em>pull request</em>.</p> +</div> + +<p>{{CompatibilityTable}}</p> + +<p>{{Compat("javascript.operators.function")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Funções e Escopos de Funções")}}</li> + <li>{{jsxref("Função")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}<span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;'>VersãoCompatívelDesconhecida<span style='background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;'>VersãoCompatívelDesconhecida</span></span></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/function_star_/index.html b/files/pt-br/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..66d9975558 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,167 @@ +--- +title: Expressão function* +slug: Web/JavaScript/Reference/Operators/function* +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A palavra-chave <strong><code>function*</code></strong> pode ser usada para definir uma função generator dentro de uma expressão.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">function* [<em>nome</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>declarações</em> +}</pre> + +<dl> + <dt><code>nome</code></dt> + <dd>O nome da função. Pode ser omitido, no caso da função ser anônima. O nome é local apenas para o corpo da função.</dd> + <dt><code>paramN</code></dt> + <dd>O nome de um argumento para ser passado para a função. Uma função pode ter até 255 argumentos.</dd> + <dt><code>declarações</code></dt> + <dd>As declarações que compõem o corpo da função.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Uma expressão <code>function*</code> é muito similar e tem quase a mesma sintaxe que a {{jsxref('Statements/function*', 'declaração function*')}}. A principal diferença entre uma expressão <code>function*</code> e a declaração <code>function*</code> é o <em>nome da função</em>, que pode ser omitido em expressões <code>function*</code> para criar funções <em>anônimas</em>. Veja também o capítulo sobre <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funções</a> para mais informações.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O exemplo a seguir define uma função generator e atribui à variável <code>x</code>. A função faz um yield do quadrado do seu argumento:</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Especificações">Especificaçõ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>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</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>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td>Trailing comma in parameters</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/generator_comprehensions/index.html b/files/pt-br/web/javascript/reference/operators/generator_comprehensions/index.html new file mode 100644 index 0000000000..1cbfb286f4 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/generator_comprehensions/index.html @@ -0,0 +1,169 @@ +--- +title: Generator comprehensions +slug: Web/JavaScript/Reference/Operators/Generator_comprehensions +translation_of: Archive/Web/JavaScript/Generator_comprehensions +--- +<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}} +<div class="blockIndicator warning"> +<p><strong>Não padronizado. Não use!</strong><br> + A sintaxe de generator comprehensions não é padronizada e foi removida a partir do Firefox 58. Para usos futuros, considere o uso de {{JSxRef ("Statements / function *", "generator", "", 1)}}.</p> +</div> +</div> + +<p>A sintaxe de <strong>generator comprehension</strong> foi uma expressão em JavaScript que permitia montar rapidamente um nova função geradora baseada em um objeto iterável existente. Porém, ela foi removida do padrão e da implementação Firefox. Não a use!</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">(for (x of iterable) x) +(for (x of iterable) if (condition) x) +(for (x of iterable) for (y of iterable) x + y) +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Dentro de generator comprehensions, são permitidos dois tipos de componentes:</p> + +<ul> + <li>{{JSxRef("Statements/for...of", "for...of")}} and</li> + <li>{{JSxRef("Statements/if...else", "if")}}</li> +</ul> + +<p>A iteração <code>for-of</code> é sempre o primeiro componente. Várias iterações <code>for-of</code> or declarações <code>if</code> são permitidas.</p> + +<p>Uma desvantagem significativa das {{JSxRef("Operators/Array_comprehensions","array comprehensions","","true")}} é que elas causam a construção de um array inteiro na memória. Quando a entrada para a comprehension é em si um pequeno array ,a sobrecarga envolvida é insignificante — mas quando a entrada é um grande array ou um generator custoso (ou mesmo infinito), a criação de um novo array pode ser problemática.</p> + +<p>Geradores permitem o cálculo lento de sequências, com items calculados sob demanda conforme a necessidade. Generator comprehensions são sintaticamente quase idênticos aos array comprehensions — elas usam parênteses invés de chaves — mas invés de construir um array, criam um gerador que pode executar lentamente. Eles podem ser considerados como uma sintaxe abreviada para criar geradores</p> + +<p>Suponha que temos um interador <code>it</code> que itera sobre uma grande sequência de inteiros. Queremos criar um novo iterador que irá iterar sobre seus dobros. Um array comprehension criaria na memória um array completo contendo os valores dobrados:</p> + +<pre class="brush: js">var doubles = [for (i in it) i * 2]; +</pre> + +<p>Um generator comprehension por outro lado criaria um novo iterador que criaria valores dobrados sob demanda conforme a necessidade:</p> + +<pre class="brush: js">var it2 = (for (i in it) i * 2); +console.log(it2.next()); // O primeiro valor, duplicado +console.log(it2.next()); // O segundo valor, duplicado +</pre> + +<p>Quando um generator comprehension é usado como um argumento para uma função, os parênteses usados para a chamada da função significam que os parênteses externos podem ser omitidos:</p> + +<pre class="brush: js">var result = doSomething(for (i in it) i * 2); +</pre> + +<p>A diferença significativa entre os dois exemplos começam pelo uso da generator comprehension, você teria apenas que fazer um loop sobre a estrutura 'obj' uma vez, total, ao invés de uma vez ao compreender o array, e mais uma vez ao iterar sobre ele.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Simples_generator_comprehensions">Simples generator comprehensions</h3> + +<pre class="brush:js">(for (i of [1, 2, 3]) i * i ); +// generator function which yields 1, 4, and 9 + +[...(for (i of [1, 2, 3]) i * i )]; +// [1, 4, 9] + +var abc = ['A', 'B', 'C']; +(for (letters of abc) letters.toLowerCase()); +// generator function which yields "a", "b", and "c" +</pre> + +<h3 id="Generator_comprehensions_com_declaração_if">Generator comprehensions com declaração if</h3> + +<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014]; + +(for (year of years) if (year > 2000) year); +// generator function which yields 2006, 2010, and 2014 + +(for (year of years) if (year > 2000) if (year < 2010) year); +// generator function which yields 2006, the same as below: + +(for (year of years) if (year > 2000 && year < 2010) year); +// generator function which yields 2006 +</pre> + +<h3 id="Generator_comprehensions_comparadas_à_função_geradora">Generator comprehensions comparadas à função geradora</h3> + +<p>Um maneira fácil de entender a sintaxe de generator comprehension, é compará-la com a função geradora.</p> + +<p>Exemplo 1: Gerador simples.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +// Generator function +(function*() { + for (let i of numbers) { + yield i * i; + } +})(); + +// Generator comprehension +(for (i of numbers) i * i ); + +// Result: both return a generator which yields [1, 4, 9] +</pre> + +<p>Exemplo 2: Usando <code>if</code> no gerador.</p> + +<pre class="brush: js">var numbers = [1, 2, 3]; + +// Generator function +(function*() { + for (let i of numbers) { + if (i < 3) { + yield i * 1; + } + } +})(); + +// Generator comprehension +(for (i of numbers) if (i < 3) i); + +// Result: both return a generator which yields [1, 2]</pre> + +<h2 id="Especificações">Especificações</h2> + +<p>As generator comprehensions estavam inicialmente no rascunho do ECMAScript 2015, mas foram removidas na revisão 27 (agosto de 2014). Por favor, veja as revisões mais antigas do ES2015 para a semântica de especificação.</p> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + +<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 solicitação de recebimento.</div> + +<p>{{Compat("javascript.operators.generator_comprehensions")}}</p> + +<h2 id="Diferenças_para_as_antigas_JS1.7JS1.8_comprehensions">Diferenças para as antigas JS1.7/JS1.8 comprehensions</h2> + +<div class="blockIndicator warning">Comprehensions das versões JS1.7/JS1.8 foram removidas da Gecko 46 ({{bug(1220564)}}).</div> + +<p><strong>Sintaxe antiga das </strong><strong>comprehensions (não use mais!):</strong></p> + +<pre class="brush: js example-bad">(X for (Y in Z)) +(X for each (Y in Z)) +(X for (Y of Z)) +</pre> + +<p>Diferenças:</p> + +<ul> + <li>Comprehensions na ES7 criam um escopo para cada nó "for" invés da comprehension como um todo. + <ul> + <li>Antiga: <code>[...(()=>x for (x of [0, 1, 2]))][1]() // 2</code></li> + <li>Nova: <code>[...(for (x of [0, 1, 2]) ()=>x)][1]() // 1, cada iteração cria uma nova ligação para x</code><code>. </code></li> + </ul> + </li> + <li>Comprehensions na ES7 começam com "for" invés da expressão de atribuição. + <ul> + <li>Antiga: <code>(i * 2 for (i of numbers))</code></li> + <li>Nova: <code>(for (i of numbers) i * 2)</code></li> + </ul> + </li> + <li>Comprehensions na ES7 podem ter vários componentes <code>if</code> e <code>for</code>.</li> + <li>Comprehensions na ES7 apenas trabalham com <code>{{JSxRef("Statements/for...of", "for...of")}}</code> e não com iterações <code>{{JSxRef("Statements/for...in", "for...in")}}</code>.</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{JSxRef("Statements/for...of", "for...of")}}</li> + <li>{{JSxRef("Operators/Array_comprehensions", "Array comprehensions")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/grouping/index.html b/files/pt-br/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..56e11538d2 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,114 @@ +--- +title: Operador de Agrupamento +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - Expressões Primárias + - JavaScript + - Operadores +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div> + {{jsSidebar("Operators")}}</div> +<h2 id="Sumário">Sumário</h2> +<p><span class="seoSummary">O operador de agrupamento <code>()</code> controla a precedência e a precedência de avaliação em expressões.</span></p> +<h2 id="Sintaxe">Sintaxe</h2> +<pre class="syntaxbox"> ( )</pre> +<h2 id="Descrição">Descrição</h2> +<p>O operador de agrupamento consiste em um par de parênteses em volta de uma expressão, ou sub-expressão, para ignorar a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedência normal de operadores</a> de modo que expressões com menor precedência possam ser avaliadas antes de uma expressão com maior prioridade.</p> +<h2 id="Exemplos">Exemplos</h2> +<p>Ignorando multiplicação e divisão primeiro, então adição e substração para avarliar adição primeiramente.</p> +<pre class="brush:js">var a = 1; +var b = 2; +var c = 3; + +// default precedence +a + b * c // 7 +// evaluated by default like this +a + (b * c) // 7 + +// now overriding precedence +// addition before multiplication +(a + b) * c // 9 + +// which is equivalent to +a * c + b * c // 9 +</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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Primeira definição. Implementado no JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidade">Compatibilidade</h2> +<p>{{ CompatibilityTable() }}</p> +<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="See_also" name="See_also">Veja também</h2> +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/in/index.html b/files/pt-br/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..ebda32f1ab --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/in/index.html @@ -0,0 +1,137 @@ +--- +title: in operator +slug: Web/JavaScript/Reference/Operators/in +translation_of: Web/JavaScript/Reference/Operators/in +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>O <strong>operador</strong> <strong><code>in</code> </strong>retorna <code>true</code> se a propriedade especificada estiver no objeto especificado ou na sua cadeia de protótipo (prototype chain) desde objeto.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>prop</em> in <em>object</em></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Um string ou símbolo representando o nome de uma propriedade ou o índice de um array (não-símbolos serão trazidos para strings).</dd> +</dl> + +<dl> + <dt><code>object</code></dt> + <dd>Objeto para verificar se este (ou sua cadeia de protótipo) contém a propriedade com o nome especificado.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Os exemplos a seguir mostram alguns usos do operador <code>in</code>.</p> + +<pre class="brush:js">// Arrays +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +0 in trees // retorna true +3 in trees // retorna true +6 in trees // retorna false +'bay' in trees // retorna false (você precisa especificar o + // número do índice, não o valor naquele índice) +'length' in trees // retorna true (length é uma propridade do Array) +Symbol.iterator in trees // retorna true (arrays são iteráveis, funciona apenas na ES2015+) + +// Objetos predefinidos +'PI' in Math // retorna true + +// Objetos personalizados +var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +'make' in mycar // retorna true +'model' in mycar // retorna true +</pre> + +<p>Você precisa especificar um objeto no lado direito do operador <code>in</code>. Por exemplo, você pode especifica um string criado com o construtor <code>String,</code> mas você não pode especificar um string literal.</p> + +<pre class="brush:js">var color1 = new String('green'); +'length' in color1 // retorna true + +var color2 = 'coral'; +// gera um erro (color2 não é um objeto String) +'length' in color2 +</pre> + +<h3 id="Usando_in_com_propriedade_removida_ou_undefined">Usando <code>in</code> com propriedade removida ou undefined</h3> + +<p>Se você remover uma propriedade com o operador <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> , o operador <code>in</code> retorna <code>false</code> para essa propriedade.</p> + +<pre class="brush:js">var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +delete mycar.make; +'make' in mycar; // retorna false + +var trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple'); +delete trees[3]; +3 in trees; // retorna false +</pre> + +<p>Se você definir uma propriedade como {{jsxref("Global_Objects/undefined", "undefined")}}, mas não a remover, o operador <code>in</code> retorna <code>true</code> para essa propriedade.</p> + +<pre class="brush:js">var mycar = {make: 'Honda', model: 'Accord', year: 1998}; +mycar.make = undefined; +'make' in mycar; // retorna true +</pre> + +<pre class="brush:js">var trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple'); +trees[3] = undefined; +3 in trees; // retorna true +</pre> + +<h3 id="Propriedades_herdadas">Propriedades herdadas</h3> + +<p>O operador <code>in</code> retorna <code>true</code> para propriedades que estão na cadeida de protótipo (prototype chain).</p> + +<pre class="brush:js">'toString' in {}; // retorna true +</pre> + +<h2 id="Especificações">Especificaçõ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>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definição inicial. Implementado no JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> + + + +<p>{{Compat("javascript.operators.in")}}</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/index.html b/files/pt-br/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..aad3be45b6 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/index.html @@ -0,0 +1,281 @@ +--- +title: Operadores +slug: Web/JavaScript/Reference/Operators +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operadores")}}</div> + +<p>Este capítulo documenta todos os operadores, expressões e keywords da linguagem JavaScript .</p> + +<h2 id="Expressões_e_operadores_por_categoria">Expressões e operadores por categoria</h2> + +<p>Para uma lista alfabética ver a barra lateral à esquerda.</p> + +<h3 id="Expressões_primárias">Expressões primárias</h3> + +<p>Palavras-chave e expressões básicas em JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>A palavra-chave <code>this</code> refere-se ao contexto de execução da função.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>A palavra-chave <code>function</code> define uma função.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt> + <dd>A palavra-chave <code>class</code> define uma classe.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt> + <dd>A palavra-chave <code>function*</code> define um gerador de função.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pausa e retorma uma função de gerador</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegar a outra função gerador ou objeto iterável.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Incremento_e_decremento">Incremento e decremento</h3> + +<p>Operadores sufixo/prefixo para incremento e sufixo/prefixo para decremento.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Operador sufixo para incremento.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Operador sufixo para decremento.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Operador prefixo para incremento.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Operador prefixo para decremento.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Operadores_aritméticos">Operadores aritméticos</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Operador de soma.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Operador de subtração.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Operador de divisão.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Operador de multiplicação.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<h3 id="Operadores_relacionais">Operadores relacionais</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Operador "menor que".</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Operador "maior que".</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Operador "menor ou igual que".</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Operador "maior ou igual que".</dd> +</dl> + +<h3 id="Operadores_de_igualdade">Operadores de igualdade</h3> + +<p>O resultador de um operador de igualdade é do tipo <code>Booleano</code> baseado que a comparação seja verdadeira.</p> + +<p>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</p> + +<dl> + <dd>Operadores de igualdade.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Operadores_Lógicos_Binários">Operadores Lógicos Binários</h3> + +<p>Operadores lógicos são normalmente usados com boolean (logical) valores, e quando eles são, eles retornam um valor Boolean.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd> OR.</dd> +</dl> + +<h3 id="Operador_de_Condicional_ternário">Operador de Condicional (ternário)</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>O operador condicional retorna um dos dois valores baseado no valor lógico da condição.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> +</dl> + +<h2 id="Specifications">Specifications</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 1st Edition.</td> + <td>Standard</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Novo: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + </tbody> +</table> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html b/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html new file mode 100644 index 0000000000..ac59b4e7f8 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/inicializador_objeto/index.html @@ -0,0 +1,392 @@ +--- +title: Inicializador de Objeto +slug: Web/JavaScript/Reference/Operators/Inicializador_Objeto +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Literal + - Métodos + - Objeto + - Propriedades + - mutação +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +<div>{{JsSidebar("Operadores")}}</div> + +<p>Objetos podem ser inicializados utilizando <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>,<code> <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code>, ou a notação <em>literal</em>. Um inicializador de objetos é uma lista de zero ou mais pares de <em>propriedade: valor</em>, separados por vírgula e fechado por um par de chaves (<code>{}</code>).</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush: js">var o = {}; +var o = { a: "foo", b: 42, c: {} }; + +var a = "foo", b = 42, c = {}; +var o = { a: a, b: b, c: c }; + +var o = { + <var>propriedade: function </var>([<var>parâmetros</var>]) {}, + get <var>propriedade</var>() {}, + set <var>propriedade</var>(<var>valor</var>) {}, +}; +</pre> + +<h3 id="Novas_notações_em_ECMAScript_2015">Novas notações em ECMAScript 2015</h3> + +<p>Por favor, verifique o suporte das anotações na tabela de compatibilidade. Em ambientes que não dão suporte às anotações, ocorrerá erros de sintaxe.</p> + +<pre class="brush: js">// // Abreviação em nomes de propriedades (ES2015) +var a = "foo", b = 42, c = {}; +var o = { a, b, c }; + +// // Abreviação em nomes de métodos (ES2015) +var o = { + <var>property</var>([<var>parameters</var>]) {}, + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {}, +}; + +// Nomes de propriedades computados (ES2015) +var prop = "foo"; +var o = { + [prop]: "hey", + ["b" + "ar"]: "there", +};</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Um inicializador de objetos é uma expressão que descreve a inicialização de um {{jsxref("Object")}}. Objects consiste de <em>propriedades</em>, as quais descrevem um objeto. Os valores das propriedades de um objeto podem ser tipos de dados {{Glossary("primitivos")}} ou outros objetos .</p> + +<h3 id="Criando_objetos">Criando objetos</h3> + +<p>Um objeto vazio, sem propriedades, pode ser criado como: </p> + +<pre class="brush: js">var object = {};</pre> + +<p>Contudo, a vantagem em utilizar a notação <em>literal </em>ou o <em>inicializador</em> é a possibilidade de rapidamente criar objetos com propriedades dentro de chaves (<code>{}</code>). Você simplesmente cria uma lista de pares <em>chave: valor</em>, separados por vírgula. O código abaixo cria um objeto com três propriedades, sendo as chaves "foo", "age" e "baz", com seus respectivos valores, tipo string de valor "bar", tipo number de valor 42 e, por último, um outro objeto com seus respectivos pares de <em>chave: valor</em>. </p> + +<pre class="brush: js">var object = { + foo: "bar", + age: 42, + baz: { myProp: 12 }, +}</pre> + +<h3 id="Acessando_propriedades">Acessando propriedades</h3> + +<p>Uma vez que você criou um objeto, é interessante que possa ler ou alterá-lo. As propriedades de um objeto podem ser acessadas utilizando a notação de ponto ou colchetes. Veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors">assessores de propriedade</a> para mais informações.</p> + +<pre class="brush: js">object.foo; // "bar" +object["age"]; // 42 + +object.foo = "baz"; +</pre> + +<h3 id="Definições_de_propriedade">Definições de propriedade</h3> + +<p>Nós temos aprendido como descrever propriedades utilizando a sintaxe <em>inicializador</em>. No entanto, às vezes, há variáveis que queremos inserir em nosso objeto. Então teremos um código parecido como abaixo: </p> + +<pre class="brush: js">var a = "foo", + b = 42, + c = {}; + +var o = { + a: a, + b: b, + c: c +};</pre> + +<p>Com ECMAScript 2015, há uma notação mais curta que possibilita atingir o mesmo resultado: </p> + +<pre class="brush: js">var a = "foo", + b = 42, + c = {}; + +// Abreviação em nomes de propriedades (ES2015) +var o = { a, b, c }; + +// Em outras palavras, +console.log((o.a === { a }.a)); // true +</pre> + +<h4 id="Duplicação_em_nomes_de_propriedades">Duplicação em nomes de propriedades</h4> + +<p>Quando se está utilizando o mesmo nome para suas propriedades, a última sobrescreverá as anteriores.</p> + +<pre class="brush: js">var a = {x: 1, x: 2}; +console.log(a); // { x: 2} +</pre> + +<p>Em códigos ECMAScript 5 no modo estrito, duplicação em nomes de propriedades serão consideradas {{jsxref("SyntaxError")}}. Porém, com a introdução de "nomes de propriedades computadas", tornou-se possível a duplicação das propriedades em tempo de execução. Assim, ECMAScript 2015 removeu a restrição.</p> + +<pre class="brush: js">function haveES2015DuplicatePropertySemantics(){ + "use strict"; + try { + ({ prop: 1, prop: 2 }); + + // No error thrown, duplicate property names allowed in strict mode + return true; + } catch (e) { + // Error thrown, duplicates prohibited in strict mode + return false; + } +}</pre> + +<h3 id="Definição_de_métodos">Definição de métodos</h3> + +<p>Uma propriedade de um objeto pode se referir à <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function">function</a>, ou aos métodos <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/get">getter</a> ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p> + +<pre class="brush: js">var o = { + <var>propriedade: function </var>([<var>parâmetros</var>]) {}, + get <var>propriedade</var>() {}, + set <var>propriedade</var>(<var>valor</var>) {}, +};</pre> + +<p>No ECMAScript 2015, uma notação abreviada está disponível, dispensando o uso da palavra reservada "function".</p> + +<pre class="brush: js">// Abreviações em nomes de métodos (ES2015) +var o = { + <var>propriedade</var>([<var>parâmetros</var>]) {}, + get <var>propriedade</var>() {}, + set <var>propriedade</var>(<var>valor</var>) {}, + * <var>gerador</var>() {} +};</pre> + +<p>Com ECMAScript 2015, há uma forma concisa em criar propriedades cujo valor é uma função gerador. </p> + +<pre class="brush: js">var o = { + * <var>gerador</var>() { + ........... + } +};</pre> + +<p>Mas em ECMAScript 5, você escreveria (lembrar que em ES5 não há geradores):</p> + +<pre class="brush: js">var o = { + generator<var>: function *</var>() { + ........... + } +};</pre> + +<p>Para mais informações e exemplos, veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Definicoes_metodos">definições de método</a>.</p> + +<h3 id="Nomes_de_propriedades_computados">Nomes de propriedades computados</h3> + +<p>Começando com ECMAScript 2015, a sintaxe <em>inicializador</em> de objeto também suporta "nomes de propriedades computados". Isso permite que você possa inserir uma expressão dentro de colchetes <code>[]</code>, que será computada como o nome de uma propriedade. Isto é semelhante à notação de chaves utilizado em <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors">acessor de propriedade</a>, utilizado para ler a alterar as propriedades existentes em um objeto. Segue um exemplo utilizando a mesma sintaxe em objetos literais: </p> + +<pre class="brush: js">// Nomes de propriedades computados (ES2015) +var i = 0; +var a = { + ["foo" + ++i]: i, + ["foo" + ++i]: i, + ["foo" + ++i]: i +}; + +console.log(a.foo1); // 1 +console.log(a.foo2); // 2 +console.log(a.foo3); // 3 + +var param = 'size'; +var config = { + [param]: 12, + ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4 +}; + +console.log(config); // { size: 12, mobileSize: 4 }</pre> + +<h3 id="Mutação_Prototype">Mutação Prototype </h3> + +<p>Uma definição de propriedade na forma de <code>__proto__: valor</code> or <code>"__proto__": valor</code> não cria uma propriedade com o nome <code>__proto__</code>. Inclusive, se o valor fornecido for um objeto ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>, muda o <code>[[Prototype]]</code> do objeto criado para o valor informado. (Se o valor fornecido não é um objeto ou null, o valor não será alterado.)</p> + +<pre class="brush: js">var obj1 = {}; +assert(Object.getPrototypeOf(obj1) === Object.prototype); + +var obj2 = { __proto__: null }; +assert(Object.getPrototypeOf(obj2) === null); + +var protoObj = {}; +var obj3 = { "__proto__": protoObj }; +assert(Object.getPrototypeOf(obj3) === protoObj); + +var obj4 = { __proto__: "not an object or null" }; +assert(Object.getPrototypeOf(obj4) === Object.prototype); +assert(!obj4.hasOwnProperty("__proto__")); +</pre> + +<p>Apenas uma única mudança em prototype é permitida em um objeto: múltiplas mudanças gera erro de sintaxe. </p> + +<p>Definições de propriedade que não utilizam da notação de ":", não são consideradas mudanças de prototype: são definições de propriedades que se comportam de forma semelhante às definições utilizando qualquer outro nome. </p> + +<pre class="brush: js">var __proto__ = "variable"; + +var obj1 = { __proto__ }; +assert(Object.getPrototypeOf(obj1) === Object.prototype); +assert(obj1.hasOwnProperty("__proto__")); +assert(obj1.__proto__ === "variable"); + +var obj2 = { __proto__() { return "hello"; } }; +assert(obj2.__proto__() === "hello"); + +var obj3 = { ["__prot" + "o__"]: 17 }; +assert(obj3.__proto__ === 17); +</pre> + +<h2 id="Notação_de_objeto_literal_vs_JSON">Notação de objeto literal vs JSON</h2> + +<p>A notação de objeto literal não é a mesma de <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/pt-BR/docs/JSON">JSON</a>). Mesmo que possuam semelhanças, há as seguintes diferenças:</p> + +<ul> + <li>JSON permite definições de propriedades utilizando apenas aspas duplas, como <code>"propriedade": valor</code>. E a definição não pode ser abreviada.</li> + <li>Os valores JSON podem ser apenas strings, numbers, arrays, <code>true</code>, <code>false</code>, <code>null</code>, ou outro objeto JSON.</li> + <li>Uma função como valor (veja "Métodos" acima) não pode ser atribuido em JSON.</li> + <li>Objetos como {{jsxref("Date")}} serão do tipo string após {{jsxref("JSON.parse()")}}.</li> + <li>{{jsxref("JSON.parse()")}} rejeitará "nomes de propriedades computados" e um erro será lançado.</li> +</ul> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/get">getter</a> e <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">setter</a> adicionados.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Abreviações de nomes em propriedades/métodos e nomes de propriedados computados foram adicionados.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> + <td>{{Spec2('ESDraft')}}</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>Suporte básico</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>Nomes de propriedades computados</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Abreviação em nomes de propriedades</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("33")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Abreviação em nomes de métodos</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop("34")}}</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>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>1</td> + <td>1</td> + <td>1</td> + <td>{{CompatChrome(1.0)}}</td> + </tr> + <tr> + <td>Nomes de propriedades computados</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Abreviação em nomes de propriedades</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("33")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Abreviação em nomes de métodos</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Assesores de propriedade</a></li> + <li><code><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Definicoes_metodos">Definições de métodos</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/instanceof/index.html b/files/pt-br/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..0627860a38 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,194 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>O operador <strong><code>instanceof</code></strong> testa se um objeto tem, em seu prototype, a função construtora.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>objeto</em> instanceof <em>construtor</em></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<dl> + <dt><code>objeto</code></dt> + <dd>O objeto a ser testado</dd> +</dl> + +<dl> + <dt><code>construtor</code></dt> + <dd>Função construtora a ser verificada</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O operador <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">instanceof</span> testa a presença da função construtora no prototype do objeto.</p> + +<pre class="brush: js">// defenindo construtores +function C(){} +function D(){} + +var o = new C(); + +// true, porque: Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, porque D.prototype não está no prototype desse objeto +o instanceof D; + +o instanceof Object; // true, porque: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, porque C.prototype não está mais no prototype desse objeto +o instanceof C; + +D.prototype = new C(); // use inheritance +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true +</pre> + +<p>Note que o resultado do <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">instanceof</span> pode alterar quando a gente altera o prototype da função construtora. No entanto, a gente não pode alterar (por padrão) o prototype do objeto. Só é possível fazer essa alteração usando a pseudopropriedade <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">__proto__.</span></p> + +<h3 id="instanceof_and_multiple_context_(e.g._frames_or_windows)"><code>instanceof</code> and multiple context (e.g. frames or windows)</h3> + +<p>Different scope have different execution environments. This means that they have different built-ins (different global object, different constructors, etc.). This may result in unexpected results. For instance, <code>[] instanceof window.frames[0].Array</code> will return <code>false</code>, because <code>Array.prototype !== </code><code>window.frames[0].Array</code> and arrays inherit from the former. This may not make sense at first but when you start dealing with multiple frames or windows in your script and pass objects from one context to another via functions, this will be a valid and strong issue. For instance, you can securely check if a given object is in fact an Array using <code>Array.isArray(myObj)</code></p> + +<div class="note"><strong>Note for Mozilla developers:</strong><br> +In code using XPCOM <code>instanceof</code> has special effect: <code>obj instanceof </code><em><code>xpcomInterface</code></em> (e.g. <code>Components.interfaces.nsIFile</code>) calls <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> and returns <code>true</code> if QueryInterface succeeded. A side effect of such call is that you can use <em><code>xpcomInterface</code></em>'s properties on <code>obj</code> after a successful <code>instanceof</code> test. Unlike standard JavaScript globals, the test <code>obj instanceof xpcomInterface </code>works as expected even if <code>obj</code> is from a different scope.</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Demonstrating_that_String_and_Date_are_of_type_Object_and_exceptional_cases">Demonstrating that <code>String</code> and <code>Date</code> are of type <code>Object</code> and exceptional cases</h3> + +<p>The following code uses <code>instanceof</code> to demonstrate that <code>String</code> and <code>Date</code> objects are also of type <code>Object</code> (they are derived from <code>Object</code>).</p> + +<p>However, objects created with the object literal notation are an exception here: Although the prototype is undefined, <code>instanceof Object</code> returns <code>true</code>.</p> + +<pre class="brush: js">var simpleStr = "This is a simple string"; +var myString = new String(); +var newStr = new String("String created with constructor"); +var myDate = new Date(); +var myObj = {}; + +simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined +myString instanceof String; // returns true +newStr instanceof String; // returns true +myString instanceof Object; // returns true + +myObj instanceof Object; // returns true, despite an undefined prototype +({}) instanceof Object; // returns true, same case as above + +myString instanceof Date; // returns false + +myDate instanceof Date; // returns true +myDate instanceof Object; // returns true +myDate instanceof String; // returns false +</pre> + +<h3 id="Demonstrating_that_mycar_is_of_type_Car_and_type_Object">Demonstrating that <code>mycar</code> is of type <code>Car</code> and type <code>Object</code></h3> + +<p>The following code creates an object type <code>Car</code> and an instance of that object type, <code>mycar</code>. The <code>instanceof</code> operator demonstrates that the <code>mycar</code> object is of type <code>Car</code> and of type <code>Object</code>.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +var mycar = new Car("Honda", "Accord", 1998); +var a = mycar instanceof Car; // retorna true +var b = mycar instanceof Object; // retorna 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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definição inicial. Implementada no JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<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><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/new.target/index.html b/files/pt-br/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..e932b452ed --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,98 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +tags: + - Classes + - ECMAScript6 + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>A propriedade <code>new.target</code> permite que você detecte quando uma função ou construtor foi chamado utilizando o operador new. Em construtores e funções instaciadas com o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> , <code>new.target</code> retorna a referência ao construtor ou função. Em chamadas normais de funções , <code>new.target</code> é {{jsxref("undefined")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>A sintaxe <code>new.target</code> consiste na palavra- chave <code>"new</code>", o ponto, e o nome da propriedade <code>"target"</code>. Normalmente "<code>new."</code> serve como um contexto para a propriedade de acesso, mas aqui <code>"new."</code> não é exatamente um objeto. Em chamadas de construtores, entretanto, <code>new.target</code> se refere ao construtor invocado pelo <code>new</code> e então "<code>new.</code>" se torna um contexto virtual.</p> + +<p><code>new.target</code> é uma propriedade meta que é disponibilizada para todas as funções. Em funções do tipo flecha <code>=></code>, <code>new.target</code> se refere ao <code>new.target</code> em torno da função.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="new.target_em_chamadas_de_Função">new.target em chamadas de Função</h3> + +<p>Em chamadas normais de função (diferente de chamadas a funções do tipo construtor), <code>new.target</code> é {{jsxref("undefined")}}. Isso permite que você detecte se a função foi chamada como um novo construtor.</p> + +<pre class="brush: js">function Foo() { + if (!new.target) throw 'Foo() must be called with new'; + console.log('Foo instanciado com new'); +} + +Foo(); // throws "Foo() must be called with new" +new Foo(); // logs "Foo instanciado com new" +</pre> + +<h3 id="new.target_em_Construtores">new.target em Construtores</h3> + +<p>Em classes construtoras, <code>new.target</code> se refere ao construtor que foi diretamente invocado pelo <code>new</code>. Isto também é o caso se o construtor é uma classe pai e foi delegado pelo construtor de um filho.</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // logs "A" +var b = new B(); // logs "B" + +class C { constructor() { console.log(new.target); } } +class D extends C { constructor() { super(); } } + +var c = new C(); // logs class C{constructor(){console.log(new.target);}} +var d = new D(); // logs class D extends C{constructor(){super();}}</pre> + +<p class="summary">A partir do exemplo acima das classes C e D, mostra que new.target aponta para a definição da classe na qual foi inicializada. Exemplo, quando D foi inicializado utilizando new, a definição da classe D foi impressa e similiarmente ao caso de C, a classe C foi impressa.</p> + +<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('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browser">Compatibilidade com browser</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada de dados estruturados. se você deseja contribuir para os dados, por favor acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma requisição de atualização.</div> + +<p>{{Compat("javascript.operators.new_target")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">funções</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/new/index.html b/files/pt-br/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..37d4a0d273 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/new/index.html @@ -0,0 +1,224 @@ +--- +title: new operator +slug: Web/JavaScript/Reference/Operators/new +tags: + - Expressões Left-hand-side + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>O <strong>operador <code>new</code></strong><code> </code>cria uma instancia de um tipo de objeto definido pelo usuário ou de um dos tipos nativos (<em>built-in</em>) que possuem uma função construtora.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}} A fonte deste exemplo interativo é armazenada em um repositório do GitHub. Se você gostaria de 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 uma requisição de comando pull.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">new <em>construtor</em>[([<em>argumentos</em>])]</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>construtor</code></dt> + <dd>Uma função que especifica o tipo da instancia do objetivo.</dd> +</dl> + +<dl> + <dt><code>argumentos</code></dt> + <dd>Uma lista de valores com os quais o construtor será chamado.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Criar um objeto definido pelo usuário requer dois passos:</p> + +<ol> + <li>Definir o tipo de objeto através da escrita de uma função.</li> + <li>Criar uma instancia do objeto utilizando <code>new</code>.</li> +</ol> + +<p>Para definir um tipo de objeto, crie uma função para o tipo de objetivo que especifica seu nome e propriedades. Um objeto pode ter uma propriedade que é um outro objeto. Veja os exemplos abaixo:</p> + +<p>Quando o código <code>new <em>Foo</em>(...)</code> é executado, acontece o seguinte::</p> + +<ol> + <li>Um novo objeto é criado, herdando de <code><em>Foo</em>.prototype</code>.</li> + <li>A função construtora <em>F<code>oo</code></em> é chamado com os argumentos especificados, e com <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> vinculado ao novo objeto criado. <code>new F<em>oo</em></code> é equivalente a <code>new </code><em>F<code>oo</code></em><code>()</code>, ou seja, se nenhuma lista de argumentos for especificada, <em>F<code>oo</code></em> é chamado sem argumentos.</li> + <li>O objeto retornado pela função construtora é o resultado de toda expressão <code>new</code>. Se a função construtora não retornar um objeto explicitamente, o objeto criado no passo 1 é então usado. (Normalmente construtores não retornam um valor, mas eles podem escolher fazê-lo se eles quiserem sobrescrever o processo normal de criação de objeto.)</li> +</ol> + +<p>Você sempre pode adicionar uma propriedade à um objeto definido previamente. Por exemplo, <code>carro1.cor = "preta"</code> adiciona a propriedade <code>cor</code> em <code>carro1</code>, e atribui a ela o valor de "<code>preta</code>". Entretanto, isso não afeta os outros objetos. Para adicionar a nova propriedade a todos objetos do mesmo tipo, você deve adicionar a propriedade à definição do tipo de objeto <code>Carro</code>.</p> + +<p>Você pode adicionar uma propriedade compartilhada à um tipo de objeto definido anteriormente através do uso da propriedade <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code>. Isso define uma propriedade que é compartilhada por todos os objetos criados com essa função, ao invés de apenas uma instancia do tipo de objeto. O código a seguir adiciona uma propriedade cor com valor <code>null</code> à todos objetos do tipo <code>carro</code>, e então sobrescreve aquele valor com a string "<code>preta</code>" somente no objeto de instancia <code>carro1</code>. Para mais informações veja <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>.</p> + +<pre class="brush: js">function Carro() {} +carro1 = new Carro(); + +console.log(carro1.cor); // undefined + +Carro.prototype.cor = null; +console.log(carro1.cor); // null + +carro1.cor = "preta"; +console.log(carro1.cor); // preta +</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Tipo_de_objeto_e_instância_de_objeto">Tipo de objeto e instância de objeto</h3> + +<p>Suponha que você quer criar um tipo de objeto para carros. Você quer que esse tipo de objeto se chame <code>carro</code>, e quer que ele tenha propriedade para fabricante, modelo e ano. Para fazer isso, você escreveria a função a seguir:</p> + +<pre class="brush: js">function Carro(fabricante, modelo, ano) { + this.fabricante = fabricante; + this.modelo = modelo; + this.ano = ano; +} +</pre> + +<p>Agora você pode criar um objeto chamado <code>meucarro</code> como a seguir:</p> + +<pre class="brush: js">var meucarro = new Carro("Eagle", "Talon TSi", 1993); +</pre> + +<p>Essa declaração cria <code>meucarro</code> e atribui a ele os valores especificados as suas propriedades. Então o valor de <code>meucarro.fabricante</code> é a string "Eagle", <code>meucarro.ano</code> é o inteiro 1993, e assim sucessivamente.</p> + +<p>Você pode criar qualquer numero de objetos <code>carro</code> através de chamadas a <code>new</code>. Por exemplo:</p> + +<pre class="brush: js">var carrodoken = new Carro("Nissan", "300ZX", 1992); +</pre> + +<h3 id="Propriedade_do_objeto_que_é_outro_objeto">Propriedade do objeto que é outro objeto</h3> + +<p>Suponha que você defina um objeto chamado <code>pessoa</code> como a seguir:</p> + +<pre class="brush: js">function Pessoa(nome, idade, sexo) { + this.nome = nome; + this.idade = idade; + this.sexo = sexo; +} +</pre> + +<p>E então instancia dois novos objetos <code>pessoa</code> como a seguir:</p> + +<pre class="brush: js">var rand = new Pessoa("Rand McNally", 33, "M"); +var ken = new Pessoa("Ken Jones", 39, "M"); +</pre> + +<p>Então você pode reescrever a definição de <code>carro</code> para incluir uma propriedade dono que aceita um objeto pessoa, como a seguir:</p> + +<pre class="brush: js">function Carro(fabricante, modelo, ano, dono) { + this.fabricante = fabricante; + this.modelo = modelo; + this.ano = ano; + this.dono = dono; +} +</pre> + +<p>Para instanciar os novos objetos, você então usa o seguinte:</p> + +<pre class="brush: js">var carro1 = new Carro("Eagle", "Talon TSi", 1993, rand); +var carro2 = new Carro("Nissan", "300ZX", 1992, ken); +</pre> + +<p>Ao invés de passar uma string ou valor inteiro quando criar os novos objetos, as definições acima passam objetos <code>rand</code> e <code>ken</code> como os parâmetros para os donos. Para descobrir o nome do dono do <code>carro2</code>, você pode acessar a seguinte propriedade:</p> + +<pre class="brush: js">carro2.dono.nome +</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('ESDraft', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definição inicial. Implementado no JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser </h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{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>Funcionalidade</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="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html b/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html new file mode 100644 index 0000000000..9b36afca80 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/operador_condicional/index.html @@ -0,0 +1,171 @@ +--- +title: Operador Condicional Ternário +slug: Web/JavaScript/Reference/Operators/Operador_Condicional +tags: + - JavaScript + - Operadores Condicionais +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>O <strong>operador condicional (ternário)</strong> é o único operador JavaScript que possui três operandos. Este operador é frequentemente usado como um atalho para a instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><em>condition</em> ? <em>expr1</em> : <em>expr2</em> </pre> + +<h2 id="Parâmetros">Parâmetros</h2> + +<dl> + <dt><code>condition</code></dt> + <dd>Uma expressão que é avaliada como <code>true</code> ou <code>false</code>.</dd> +</dl> + +<dl> + <dt><code>expr1</code>, <code>expr2</code></dt> + <dd>Expressões com valores de qualquer tipo.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>Se <code>condition</code> é <code>true</code>, o operador retornará o valor de <code>expr1</code>; se não, ele retorna o valor de <code>exp2</code>. Por exemplo, para exibir uma mensagem diferente baseada no valor da variável <code>isMember</code>, você poderá utilizar o código (statement) seguinte:</p> + +<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00") +</pre> + +<p>Conforme o resultado da operação, você também poderá atribuir a variáveis:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> + +<p>Também são possíveis múltiplas avaliaçãoes ternárias (nota: o operador condicional é associativo a direita):</p> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> firstCheck <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> + secondCheck <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> + access <span class="operator token">=</span> firstCheck <span class="operator token">?</span> <span class="string token">"Access denied"</span> <span class="punctuation token">:</span> secondCheck <span class="operator token">?</span> <span class="string token">"Access denied"</span> <span class="punctuation token">:</span> <span class="string token">"Access granted"</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span> access <span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // logs "Access granted"</span></code></pre> + +<p>Você também pode usar avaliações ternárias no espaço livre de modo a fazer diferentes operações:</p> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> stop <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> age <span class="operator token">=</span> <span class="number token">16</span><span class="punctuation token">;</span> + +age <span class="operator token">></span> <span class="number token">18</span> <span class="operator token">?</span> location<span class="punctuation token">.</span><span class="function token">assign<span class="punctuation token">(</span></span><span class="string token">"continue.html"</span><span class="punctuation token">)</span> <span class="punctuation token">:</span> stop <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span></code> +</pre> + +<p><span id="result_box" lang="pt"><span class="hps">Você também pode fazer</span> <span class="hps">mais do que uma única operação</span><span class="hps"> em cada</span> <span class="hps">caso,</span> <span class="hps">separando-os por</span> <span class="hps">vírgula</span><span>:</span></span></p> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> stop <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> age <span class="operator token">=</span> <span class="number token">23</span><span class="punctuation token">;</span> + +age <span class="operator token">></span> <span class="number token">18</span> <span class="operator token">?</span> <span class="punctuation token">(</span> + <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"OK, you can go."</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + location<span class="punctuation token">.</span><span class="function token">assign<span class="punctuation token">(</span></span><span class="string token">"continue.html"</span><span class="punctuation token">)</span> +<span class="punctuation token">)</span> <span class="punctuation token">:</span> <span class="punctuation token">(</span> + stop <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">,</span> + <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Sorry, you are much too young!"</span><span class="punctuation token">)</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span></code> +</pre> + +<p><span id="result_box" lang="pt"><span class="hps">Você também pode fazer</span> <span class="hps">mais de uma operação</span> <span class="hps">durante a</span> <span class="hps">atribuição de</span> <span class="hps">um valor</span></span>. Neste caso, <strong><em><span id="result_box" lang="pt"><span class="hps">o último valor</span> <span class="hps">separado por vírgula</span> dentro <strong><em><span id="result_box" lang="pt"><span class="hps">dos</span> <span class="hps">parênteses </span></span></em></strong><span class="hps">será o</span> <span class="hps">valor a ser atribuído</span></span></em></strong>.</p> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> age <span class="operator token">=</span> <span class="number token">16</span><span class="punctuation token">;</span> + +<span class="keyword token">var</span> url <span class="operator token">=</span> age <span class="operator token">></span> <span class="number token">18</span> <span class="operator token">?</span> <span class="punctuation token">(</span> + <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"OK, you can go."</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + <span class="comment token"> // alert returns "undefined", but it will be ignored because +</span> <span class="comment token"> // isn't the last comma-separated value of the parenthesis +</span> <span class="string token">"continue.html"</span><span class="comment token"> // the value to be assigned if age > 18 +</span><span class="punctuation token">)</span> <span class="punctuation token">:</span> <span class="punctuation token">(</span> + <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"You are much too young!"</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Sorry :-("</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + <span class="comment token"> // etc. etc. +</span> <span class="string token">"stop.html"</span><span class="comment token"> // the value to be assigned if !(age > 18) +</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +location<span class="punctuation token">.</span><span class="function token">assign<span class="punctuation token">(</span></span>url<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // "stop.html"</span></code></pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentários</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definição inicial. Implementado em JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores_(browser)">Compatibilidade dos navegadores (browser)</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">Operador condicional if</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html b/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html new file mode 100644 index 0000000000..609bfa29fd --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/operador_de_coalescencia_nula/index.html @@ -0,0 +1,159 @@ +--- +title: Operador de coalescência nula +slug: Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula +tags: + - JavaScript + - Operador + - Operadores lógicos + - Referencia + - coalescencia nula + - duas interrogações + - nulidade +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +<p>{{JSSidebar("Operators")}}</p> + +<p>O <strong>operador de coalescência nula (<code>??</code>)</strong> é um operador lógico que retorna o seu operando do lado direito quando o seu operador do lado esquerdo é {{jsxref("null")}} ou {{jsxref("undefined")}}. Caso contrário, ele retorna o seu operando do lado esquerdo.</p> + +<p>Ao contrário do <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#OR_Lógico_()">operador lógico OR (<code>||</code>)</a>, o operando esquerdo é retornado se houver um valor <em><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#Short-Circuit_Evaluation">falsy</a></em> (falso) que não seja <code>null</code> ou <code>undefined</code>. Em outras palavras, se você usar <code>||</code> para obter algum valor padrão para outra variável <code>foo</code>, você pode enfrentar comportamentos inesperados se você considerar algum valor falseável como utilizável (eg. <code>''</code> ou <code>0</code>). Veja abaixo alguns exemplos:</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div> + +<p class="hidden">O código fonte para este exemplo interativo está armazenado em um repositório do GitHub. Se você gostaria de contribuir para o projeto de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.<br> + Veja o <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> sobre a adição deste exemplo.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"><var>exprEsq</var> ?? <var>exprDir</var> +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>O operador de coalescência nula retorna os resultados da expressão de seu lado direito se a expressão de seu lado esquerdo for {{jsxref("null")}} ou {{jsxref("undefined")}}.</p> + +<h3 id="Endereçando_um_valor_padrão_à_variável">Endereçando um valor padrão à variável</h3> + +<p>Inicialmente, quando se deseja endereçar um valor padrão à variável, um padrão comum é utilizar o operador lógico OR (<code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#OR_Lógico_()">||</a></code>):</p> + +<pre class="brush: js">let foo; + +// foo nunca é endereçado a nenhum valor, portanto, ainda está indefinido +let someDummyText = foo || 'Hello!';</pre> + +<p>Entretanto, devido ao <code>||</code> ser um operador lógico booleano, o operando do lado esquerdo é coagido para um valor booleano para sua avaliação, e, qualquer valor <em>falseável</em> (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) não é retornado. Este comportamento pode causar consequencias inesperadas se você considerar <code>0</code>, <code>''</code>, or <code>NaN</code> como valores válidos.</p> + +<pre class="brush: js">let count = 0; +let text = ""; + +let qty = count || 42; +let message = text || "Olá!"; +console.log(qty); // 42 e não 0 +console.log(message); // "hi!" e não "" +</pre> + +<p>O operador de coalescência nula evita esta cilada pois retorna o segundo operando apenas quando o primeiro é avaliado entre os valores <code>null</code> ou <code>undefined</code> (mas nehum outro valor falseável):</p> + +<pre class="brush: js">let myText = ''; // Uma string vazia (que também é um valor falseável) + +let notFalsyText = myText || 'Olá mundo'; +console.log(notFalsyText); // Olá mundo + +let preservingFalsy = myText ?? 'Olá vizinhança'; +console.log(preservingFalsy); // '' (Pois myText não é undefined e nem null) +</pre> + +<h3 id="Curto-circuito">Curto-circuito</h3> + +<p>Assim como os operadores lógicos OR e AND, a expressão do lado direito não é avaliada se o lado esquerdo não for avaliado entre <code>null</code> e nem <code>undefined</code>.</p> + +<pre class="brush: js">function A() { console.log('A foi chamado'); return undefined;} +function B() { console.log('B foi chamado'); return false;} +function C() { console.log('C foi chamado'); return "foo";} + +console.log( A() ?? C() ); +// Imprime "A foi chamado" então "C foi chamado" e por fim "foo" +// Como A() retornou undefined então ambas expressões foram avaliadas + +console.log( B() ?? C() ); +// Imprime "B foi chamado" então "false" +// Como B() retornou false (e não null ou undefined), a expressão +// do lado direito não foi avaliada. +</pre> + +<h3 id="Sem_encadeamento_com_os_operadores_AND_e_OR">Sem encadeamento com os operadores AND e OR</h3> + +<p>Não é possível encadear ambos operadores AND (<code>&&</code>) e OR (<code>||</code>) diretamente com o <code>??</code>. Um <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> será disparado nesse tipo de caso.</p> + +<pre class="brush: js example-bad">null || undefined ?? "foo"; // Dispara um SyntaxError +true || undefined ?? "foo"; // Dispara um SyntaxError</pre> + +<p>Entretanto, explicitar diretamente a precedência por meio de parênteses resulta no comportamento correto:</p> + +<pre class="brush: js example-good">(null || undefined) ?? "foo"; // retorna "foo" +</pre> + +<h3 id="Relacionamento_com_o_operador_de_encadeamento_opcional_.">Relacionamento com o operador de encadeamento opcional (<code>?.</code>)</h3> + +<p>O operador de coalescêcia nula trata <code>undefined</code> e <code>null</code> como valores específicos e então executa o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">operador de encadeamento opcional (<code>?.</code>)</a> o qual é útil para acessar uma propriedade de um objeto, o qual pode ser <code>null</code> ou <code>undefined</code>.</p> + +<pre class="brush: js">let foo = { someFooProp: "oi" }; + +console.log(foo.someFooProp?.toUpperCase()); // "OI" +console.log(foo.someBarProp?.toUpperCase()); // undefined +</pre> + +<h2 id="Exemplo">Exemplo</h2> + +<p>Neste exemplo, nós iremos prover valores padrão, mas manter valores que não sejam (advinha???) <code>null</code> ou <code>undefined</code>.</p> + +<pre class="brush: js">const nullValue = null; +const emptyText = ""; // falseável (falsy) +const someNumber = 42; + +const valA = nullValue ?? "padrão para A"; +const valB = emptyText ?? "padrão para B"; +const valC = someNumber ?? 0; + +console.log(valA); // "padrão para A" +console.log(valB); // "" (pois a string vazia não é null ou undefined) +console.log(valC); // 42 +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-nullish-coalescing/#top">Proposal for the "nullish coalescing" operator</a></td> + <td>Stage 4</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("javascript.operators.nullish_coalescing")}}</p> + +<h3 id="Progresso_de_implementação">Progresso de implementação</h3> + +<p>A seguinte tabela fornece o status diário de implementação para este recurso, porque este recurso ainda não atingiu a estabilidade entre navegadores. Os dados são gerados pela execução de testes de recursos relevantes no <a href="https://github.com/tc39/test262">Test262</a>, a plataforma de testes padrão do JavaScript, em "edições noturnas", ou último release de cada motor JavaScript dos navegadores.</p> + +<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">The optional chaining operator</a></li> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos#OR_Lógico_()">The logical OR (<code>||</code>) operator</a></li> + <li><a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/Parametros_Predefinidos">Default parameters in functions</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html b/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html new file mode 100644 index 0000000000..be374104d0 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/operador_virgula/index.html @@ -0,0 +1,102 @@ +--- +title: Operador Vírgula +slug: Web/JavaScript/Reference/Operators/Operador_Virgula +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div> + {{jsSidebar("Operators")}}</div> +<h2 id="Summary" name="Summary">Sumário</h2> +<p>o <strong>operador vírgula</strong> avalia o valor de seus operandos (da esquerda para a direita) e retorna o valor do último operando.</p> +<h2 id="Sintaxe">Sintaxe</h2> +<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> +<h2 id="Parameters">Parameters</h2> +<dl> + <dt> + <code>expr1</code>, <code>expr2, expr3...</code></dt> + <dd> + Quaisquer expressões.</dd> +</dl> +<h2 id="Descrição">Descrição</h2> +<p>Você pode usar o operador vírgula quando desejar incluir múltiplas expressões em um lugar que requer uma única expressão. O uso mais comum desse operador é suprir múltiplos parâmetros em um loop <code>for</code>.</p> +<h2 id="Exemplo">Exemplo</h2> +<p>Se <code>a</code> é um array de 2 dimensões com 10 elementos de um lado, o seguinte código usa o operador vírgula para incrementar duas variáveis mutuamente. Note que a vírgula na declaração <code>var </code><em><strong>não</strong></em> é o operador vírgula, porque ele não existe dentro de uma expressão. Além disso, ela é uma caractere especial nas declarações <code>var</code> para combinar múltiplas delas em uma única. Embora praticamente a vírgula comporte-se quase que igualmente ao operador vírgula. O código imprime os valores dos elementos diagonais da matriz:</p> +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) + document.writeln("a[" + i + "][" + j + "] = " + a[i][j]); +</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>1ª Edição ECMAScript.</td> + <td>Padrão</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> +<p>{{ CompatibilityTable() }}</p> +<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>{{ 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>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><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/operadores_de_comparação/index.html b/files/pt-br/web/javascript/reference/operators/operadores_de_comparação/index.html new file mode 100644 index 0000000000..c1a7f864ba --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/operadores_de_comparação/index.html @@ -0,0 +1,250 @@ +--- +title: Operadores de comparação +slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação +tags: + - Comparando String + - Comparação + - Igualdade + - Operadores + - Relacionais +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>O JavaScript possui comparações estritas e conversão de tipos. Uma comparação estrita (e.g., <code>===</code>) somente é verdade se os operandos forem do mesmo tipo e de conteúdo correspondente. A comparação abstrata mais comumente utilizada (e.g. <code>==</code>) converte os operandos no mesmo tipo antes da comparação. Para comparações abstratas relacionais (e.g., <code><=</code>), os operandos são primeiro convertidos em primitivos, depois para o mesmo tipo, depois comparados.</p> + +<p>Strings são comparadas baseadas na ordenação lexicografica padrão, usando valores Unicode.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> + +<p class="hidden">Os fontes para este exemplo interativo estão em um repositório no GitHub. Se você gostaria de contribuir com projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie para nós um pull request.</p> + +<p>Características de comparação:</p> + +<ul> + <li>Duas strings são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, Duas string são estritamente iguals quando elas possuem a mesma sequência de caracteres, o mesmo tamanho, e os mesmos caracteres em posições correspondentes.</li> + <li>Dois números são estritamente iguais quando eles são numericamente iguais (tem o mesmo valor numérico). <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> não é igual a nada, incluindo NaN. Zeros positivos e negativos são iguals entre si.</li> + <li>Dois operadores Boleanos são estritamente iguais se ambos são <code>true</code> ou ambos são <code>false</code>.</li> + <li>Dois objetos distintos nunca são iguais para comparações estritas ou abstratas.</li> + <li>Uma expressão comparando Objetos somente é verdadeira se os operandos referenciarem o mesmo Objeto.</li> + <li>Os tipo Null e Undefined são estritamente iguais entre eles mesmos e abstratamente iguais entre si.</li> +</ul> + +<h2 id="Operadores_de_Igualdade">Operadores de Igualdade </h2> + +<h3 id="Igualdade"><a name="Equality">Igualdade (==)</a></h3> + +<p>O operador de igualdade converte o operando se ele <strong>não for do mesmo tipo</strong>, então aplica a comparação estrita. Se <strong>ambos os operandos são objetos</strong>, então o JavaScript compara referencias internas que são iguais quando os operandos se referem ao mesmo objeto em memória.</p> + +<h4 id="Sintaxe">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h4 id="Exemplos">Exemplos</h4> + +<pre class="brush: js notranslate">1 == 1 // verdade +'1' == 1 // verdade +1 == '1' // verdade +0 == false // verdade +0 == null // falso +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 == object2 // falso +0 == undefined // falso +null == undefined // verdade +</pre> + +<h3 id="Desigualdade_!"><a name="Inequality">Desigualdade (!=)</a></h3> + +<p>O operador de desigualdade retorna true (verdade) se os operandos não são iguais. Se os dois operandos <strong>não são do mesmo tipo</strong>, o JavaScript tenta converter os operandos para o tipo apropriado para a comparação. Se <strong>ambos os operandos são objetos</strong>, então o JavaScript compara referências internas que não são iguais quando os operandos se referem a objetos diferentes na memória.</p> + +<h4 id="Sintaxe_2">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x != y</pre> + +<h4 id="Exemplos_2">Exemplos</h4> + +<pre class="brush: js notranslate">1 != 2 // verdade +1 != '1' // falso +1 != "1" // falso +1 != true // falso +0 != false // falso +</pre> + +<h3 id="Identidade_igualdade_estrita"><a name="Identity">Identidade / igualdade estrita (===)</a></h3> + +<p>O operador de identidade retorna true (verdade) se os operandos são estritamente iguais (veja acima) <strong>sem conversão de tipo</strong>. </p> + +<h4 id="Sintaxe_3">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x === y</pre> + +<h4 id="Exemplos_3">Exemplos</h4> + +<pre class="brush: js notranslate">3 === 3 // verdade +3 === '3' // falso +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 === object2 //f also</pre> + +<h3 id="Non-identity_desigualdade_estrita_!"><a name="Nonidentity">Non-identity / desigualdade estrita (!==)</a></h3> + +<p>O operador desigualdade estrita (Non-identity) retorna verdadeiro se os operandos <strong>não são iguais e / ou não são do mesmo tipo</strong>.</p> + +<h4 id="Sintaxe_4">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x !== y</pre> + +<h4 id="Exemplos_4">Exemplos</h4> + +<pre class="brush: js notranslate">3 !== '3' // verdade +4 !== 3 // verdade +</pre> + +<h2 id="Operadores_relacionais">Operadores relacionais</h2> + +<p>Cada um desses operadores chamará a função valueOf () em cada operando antes que uma comparação seja feita.</p> + +<h3 id="Operador_Maior_>"><a name="Greater_than_operator">Operador Maior (>)</a></h3> + +<p>O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.</p> + +<h4 id="Sintaxe_5">Sintaxe</h4> + +<pre class="syntaxbox notranslate">x > y</pre> + +<h4 id="Exemplos_5">Exemplos</h4> + +<pre class="brush: js notranslate">4 > 3 // verdade +</pre> + +<h3 id="Operador_maior_ou_igual_>"><a name="Greater_than_or_equal_operator">Operador maior ou igual (>=)</a></h3> + +<p>O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.</p> + +<h4 id="Sintaxe_6">Sintaxe</h4> + +<pre class="syntaxbox notranslate"> x >= y</pre> + +<h4 id="Exemplos_6">Exemplos</h4> + +<pre class="brush: js notranslate">4 >= 3 // verdade +3 >= 3 // verdade +</pre> + +<h3 id="Operador_Menor_<"><a name="Less_than_operator">Operador Menor (<)</a></h3> + +<p>O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.</p> + +<h4 id="Sintaxe_7">Sintaxe</h4> + +<pre class="syntaxbox notranslate"> x < y</pre> + +<h4 id="Exemplos_7">Exemplos</h4> + +<pre class="brush: js notranslate">3 < 4 // verdade +</pre> + +<h3 id="Operador_menor_ou_igual_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor ou igual (<=)</a></h3> + +<p>O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.</p> + +<h4 id="Sintaxe_8">Sintaxe</h4> + +<pre class="syntaxbox notranslate"> x <= y</pre> + +<h4 id="Exemplos_8">Exemplos</h4> + +<pre class="brush: js notranslate">3 <= 4 // verdade +</pre> + +<h2 id="Usando_Operadores_de_Igualdade">Usando Operadores de Igualdade</h2> + +<p>Os operadores de igualdade padrão (== e! =) Usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparação de Igualdade Abstrata</a> </p> + +<p>para comparar dois operandos. Se os operandos forem de tipos diferentes, ele tentará convertê-los para o mesmo tipo antes de fazer a comparação. Por exemplo, na expressão 5 == '5', a sequência à direita é convertida em {{jsxref ("Number" )}} antes da comparação ser feita.</p> + +<p>Os operadores de igualdade estrita (=== e! ==) usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de comparação estrita de igualdade</a> e se destinam a executar comparações de igualdade em operandos do mesmo tipo. Se os operandos são de tipos diferentes, o resultado é sempre falso, então 5! == '5'.<br> + <br> + Use operadores de igualdade estrita se os operandos precisarem ser de um tipo específico e também de valor ou se o tipo exato dos operandos for importante. Caso contrário, use os operadores de igualdade padrão, que permitem comparar a identidade de dois operandos, mesmo que não sejam do mesmo tipo.<br> + <br> + Quando a conversão de tipos está envolvida na comparação (por exemplo, comparação não estrita), o JavaScript converte os tipos {{jsxref ("String")}}, {{jsxref ("Number")}}, {{jsxref ("Booleano" )}} ou {{jsxref ("Object")}}) operandos da seguinte forma:</p> + +<ul> + <li>Ao comparar um número e uma string, a string é convertida em um valor numérico. JavaScript tenta converter o literal numérico de string em um valor de tipo Number. Primeiro, um valor matemático é derivado do literal numérico da string. Em seguida, esse valor é arredondado para o valor de tipo de número mais próximo.</li> + <li>Se um dos operandos for booleano, o operando booleano é convertido em 1 se for verdadeiro e +0 se for falso.</li> + <li>Se um objeto é comparado com um número ou string, o JavaScript tenta retornar o valor padrão para o objeto. Os operadores tentam converter o objeto em um valor primitivo, um valor String ou Number, usando os métodos valueOf e toString dos objetos. Se essa tentativa de converter o objeto falhar, será gerado um erro de tempo de execução.</li> + <li>Observe que um objeto é convertido em primitivo se, e somente se, seu comparando for um primitivo. Se os dois operandos forem objetos, eles serão comparados como objetos, e o teste de igualdade será verdadeiro apenas se ambos fizerem referência ao mesmo objeto.</li> +</ul> + +<div class="note"><strong>Nota:</strong> Os objetos String são do Tipo Objeto, não String! Os objetos de string raramente são usados, portanto, os seguintes resultados podem ser surpreendentes:</div> + +<pre class="brush:js notranslate">// true, pois ambos os operandos são do tipo String (ou seja, primitivos de string): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes +a == b + +// falso (false) pois a e b, embora do tipo "Objeto", são instâncias diferentes +a === b + +// verdadeiro (true) pois o objeto a e 'foo' (String) são de tipos diferentes e, o Objeto (a) +// é convertido para String ('foo') antes da comparação +a == 'foo'</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. Implementado em JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Adicionandos os operadores <code>===</code> e <code>!==</code> . Implementado em JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatilidade_entre_navegadores">Compatilidade entre navegadores</h2> + +<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div> + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="Consulte_também">Consulte também</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparações de igualdade e similaridades</a></li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 32px; top: 2185.4px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html b/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html new file mode 100644 index 0000000000..7c6c4f6aef --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/operadores_logicos/index.html @@ -0,0 +1,342 @@ +--- +title: Operadores Lógicos +slug: Web/JavaScript/Reference/Operators/Operadores_Logicos +tags: + - Operador + - Operadores lógicos + - Referencia + - e + - não + - ou +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>Operadores lógicos são tipicamente usados com valores <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Booleanos</a></code> (lógicos). Quando eles o são, retornam um valor booleano. Porém, os operadores <code>&&</code> e <code>||</code> de fato retornam o valor de um dos operandos especificos, então se esses operadores são usados com valores não booleanos, eles podem retornar um valor não booleano.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>Os operadores lógicos são descritos na tabela abaixo:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Utilização</th> + <th>Descrição</th> + </tr> + <tr> + <td>Logical AND (<code>&&</code>)</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>falso</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>&&</code> retorna <code>verdadeiro</code> se ambos os operandos forem <code>verdadeiro</code> ; senão, retorna <code>falso</code>.</td> + </tr> + <tr> + <td>Logical OR (<code>||</code>)</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>verdadeiro</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>||</code> retorna <code>verdadeiro</code> se qualquer dos operandos for <code>verdadeiro</code>; se ambos são <code>falso</code>, retorna <code>falso</code>.</td> + </tr> + <tr> + <td>Logical NOT (<code>!</code>)</td> + <td><code>!<em>expr</em></code></td> + <td> + <p>Retorna <code>falso</code>se o seu operando pode ser convertido para verdadeiro; senão, retorna <code>verdadeiro</code>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Se um valor pode ser convertido para <code>verdadeiro</code>, este valor é chamado de {{Glossary("truthy")}}. Se um valor pode ser convertido para <code>falso</code>, este valor é chamado de {{Glossary("falsy")}}.</p> + +<p>Exemplos de expressões que podem ser convertidas para falso são:</p> + +<ul> + <li><code>null</code>;</li> + <li><code>NaN;</code></li> + <li><code>0</code>;</li> + <li>string vazia (<code>""</code>); </li> + <li><code>undefined</code>.</li> +</ul> + +<p>Mesmo que os operadores <code>&&</code> and <code>||</code> possam ser utilizados com operandos que não são valores Booleanos, eles ainda podem ser considerados como operadores booleanos visto que seus valores de saída sempre podem ser convertidos em valores booleanos.</p> + +<h3 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Avaliação de Curto-Circuito (Short-Circuit) </h3> + +<p>Como as expressões lógicas são avaliadas da esquerda pra direita, elas são testadas para possível avaliação de "curto-circuito" ("short-circuit") utilizando as seguintes regras:</p> + +<ul> + <li><code>falso && (<em>qualquer coisa)</em></code><em> </em>é avaliado como falso através de curto-circuito.</li> + <li><code>true || (<em>qualquer coisa)</em></code><em> </em>é avaliado como verdadeiro através de curto-circuito.</li> +</ul> + +<p>As regras de lógica garantem que essas avaliações estejam sempre corretas. Repare que a porção <em>qualquer coisa</em> das expressões acima não é avaliada, logo qualquer problema oriundo de tê-lo feito não é consumado. Note também que a parte<em> qualquer coisa</em> das expressões acima pode ser qualquer expressão lógica unitária (conforme é indicado pelos <span style="line-height: 1.5;">parênteses</span>).</p> + +<p>Por exemplo, as duas funções a seguir são equivalentes.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">shortCircuitEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// logical OR (||)</span> + <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">// logical AND (&&)</span> + <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">&&</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">equivalentEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <span class="comment token">// logical OR (||)</span> + <span class="keyword token">var</span> orFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>orFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + + <span class="comment token">// logical AND (&&)</span> + <span class="keyword token">var</span> andFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>andFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>Contudo, as expressões a seguir não são equivalentes, devido <span style="line-height: 1.5;">a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedência do operador</a>, e reforçam a importância de que o operador do lado direito (right hand) seja uma única expressão (agrupada com o uso de parênteses, caso seja necessário)</span><span style="line-height: 1.5;">.</span></p> + +<pre class="brush: js"> false && true || true // retorna true + false && (true || true) // retorna falso</pre> + +<h3 id="Logical_AND_.28.29" name="Logical_AND_.28&&.29"><a name="Logical_AND">AND Lógico (<code>&&</code>)</a></h3> + +<p>O código a seguir demonstra exemplos do operador <code>&&</code> (AND lógico). </p> + +<pre class="brush: js">a1 = true && true // t && t retorna true +a2 = true && false // t && f retorna false +a3 = false && true // f && t retorna false +a4 = false && (3 == 4) // f && f retorna false +a5 = 'Cat' && 'Dog' // t && t retorna "Dog" +a6 = false && 'Cat' // f && t retorna false +a7 = 'Cat' && false // t && f retorna false +a8 = '' && false // f && f retorna "" +a9 = false && '' // f && t retorna false +</pre> + +<h3 id="OR_Lógico_()"><a name="Logical_OR">OR Lógico (<code>||</code>)</a></h3> + +<p>O código a seguir demonstra exemplos do operador <code>||</code> (OR lógico).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">o1 <span class="operator token">=</span> <span class="keyword token">true</span> <span class="operator token">||</span> <span class="keyword token">true</span> <span class="comment token">// t || t retorna true</span> +o2 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="keyword token">true</span> <span class="comment token">// f || t retorna true</span> +o3 <span class="operator token">=</span> <span class="keyword token">true</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// t || f retorna true</span> +o4 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="punctuation token">(</span><span class="number token">3</span> <span class="operator token">==</span> <span class="number token">4</span><span class="punctuation token">)</span> <span class="comment token">// f || f retorna false</span> +o5 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="string token">'Dog'</span> <span class="comment token">// t || t retorna "Cat"</span> +o6 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">'Cat'</span> <span class="comment token">// f || t retorna "Cat"</span> +o7 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// t || f retorna "Cat"</span> +o8 <span class="operator token">=</span> <span class="string token">''</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// f || f retorna false</span> +o9 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">''</span> <span class="comment token">// f || f retorna ""</span></code></pre> + +<h3 id="Logical_NOT_.28.21.29" name="Logical_NOT_.28.21.29"><a name="Logical_NOT">NOT Logico (<code>!</code>)</a></h3> + +<p>O código a seguir demonstra exemplos do operador <code>!</code> (NOT lógico) .</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">n1 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">true</span> <span class="comment token">// !t returns false</span> +n2 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">false</span> <span class="comment token">// !f returns true</span> +n3 <span class="operator token">=</span> <span class="operator token">!</span><span class="string token">'Cat'</span> <span class="comment token">// !t returns false</span></code></pre> + +<h3 id="Regras_de_conversão">Regras de conversão</h3> + +<h4 id="Convertendo_AND_para_OR">Convertendo AND para OR</h4> + +<p>A operação a seguir, envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Convertendo_OR_to_AND">Convertendo OR to AND</h4> + +<p>A operação a seguir, envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Convertendo_entre_dois_NOT">Convertendo entre dois NOT</h4> + +<p>A seguinte operação envolvendo Booleanos:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="operator token">!</span><span class="operator token">!</span>bCondition</code></pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">bCondition</code></pre> + +<h3 id="Removendo_parenteses_aninhados">Removendo parenteses aninhados</h3> + +<p>Como as expressões lógicas são avaliadas da esquerda pra direita, é sempre possível remover os parênteses de uma expressão complexa seguindo algumas regras:</p> + +<h4 id="Removendo_AND_aninhado">Removendo AND aninhado</h4> + +<p>A seguinte operação composta envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>é igual a :</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Removendo_OR_aninhado">Removendo OR aninhado</h4> + +<p>A operação composta a seguir, envolvendo Booleanos:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>é sempre igual a:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estatus</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}<br> + {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}<br> + {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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><a href="#Logical_AND">Logical AND (<code>&&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></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 para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><a href="#Logical_AND">Logical AND (<code>&&</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></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="JavaScript_1.0_and_1.1" name="JavaScript_1.0_and_1.1">Retrocompatibilidade: Comportamento no JavaScript 1.0 e1.1</h3> + +<p>Os operadores && and <code>|| se comportam da seguinte maneira:</code></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Utilização</th> + <th>Comportamento</th> + </tr> + <tr> + <td><code>&&</code></td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td>Se o primeiro operando (<code>expr1</code>) pode ser convertido para falso, o operador <code>&& </code> retorna false ao invés do valor do <code>expr1</code>.</td> + </tr> + <tr> + <td><code>||</code></td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td>If the first operand (<code>expr1</code>) can be converted to true, the <code>||</code> operator retorna true rather than the value of <code>expr1</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Veja Também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/operator_precedence/index.html b/files/pt-br/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..474dd3e536 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,343 @@ +--- +title: Precedência de Operadores +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - JavaScript + - precedência de operadores +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<h2 id="Resumo">Resumo</h2> + +<p><span class="seoSummary">A precedência de operadores determina a ordem em que os operadores são processados. Operadores com maior precedência são processados primeiro.</span></p> + +<p>Um exe<span style="line-height: 1.5;">mplo simples:</span></p> + +<pre>3 + 4 * 5 // returns 23 +</pre> + +<p>O operador de multiplicação ("<code>*</code>") tem maior precedência que o operador de adição ("<code>+</code>") e por isso será executado primeiro.</p> + +<h2 id="Associativity" name="Associativity">Associatividade</h2> + +<p>Associatividade determina a ordem em que operadores da mesma precedência são processados. Por exemplo, considere a expressão:</p> + +<pre>a OP b OP c +</pre> + +<p>Associatividade à esquerda (esquerda para direita) significa que a expressão será processada como <code>(a OP b) OP c</code>, enquanto associatividade à direita (direita para esquerda) significa que será interpretada como <code>a OP (b OP c)</code>. Operadores de atribuição são associativos à direita, então você pode escrever:</p> + +<pre>a = b = 5; 5 = b = a +</pre> + +<p>com o resultado esperado que <code>a</code> e <code>b</code> tenham o valor 5. Isto é porque o operador de atribuição retorna o valor que ele atribuiu. Primeiro, <code>b</code> é definido com o valor 5. Então <code>a</code> é definido com o valor de <code>b</code>.</p> + +<h2 id="Table" name="Table">Tabela</h2> + +<p>A tabela seguinte está ordenada da mais alta (20) para a mais baixa (0) precedência.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Precedência</th> + <th>Tipo do Operador</th> + <th>Associatividade</th> + <th>Operadores individuais</th> + </tr> + <tr> + <td>20</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Grouping">Agrupamento</a></td> + <td>n/a</td> + <td><code>( … )</code></td> + </tr> + <tr> + <td rowspan="3">19</td> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Acesso a Membro</a></td> + <td>esquerda para direita</td> + <td><code>… . …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Acesso a Membro Computado</a></td> + <td>esquerda para direita</td> + <td><code>… [ … ]</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (com lista de argumentos)</td> + <td>n/a</td> + <td><code>new … ( … )</code></td> + </tr> + <tr> + <td rowspan="2">18</td> + <td><a href="/en-US/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Chamada a Função</a></td> + <td>esquerda para direita</td> + <td><code>… ( <var>… </var>)</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (sem lista de argumentos)</td> + <td>direita para esquerda</td> + <td><code>new …</code></td> + </tr> + <tr> + <td rowspan="2">17</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Incremento Pós-fixado</a></td> + <td>n/a</td> + <td><code>… ++</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Decremento Pós-fixado</a></td> + <td>n/a</td> + <td><code>… --</code></td> + </tr> + <tr> + <td rowspan="9">16</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">NÃO lógico</a></td> + <td>direita para esquerda</td> + <td><code>! …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">NÃO bit-a-bit</a></td> + <td>direita para esquerda</td> + <td><code>~ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Positivo Unário</a></td> + <td>direita para esquerda</td> + <td><code>+ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Negativo Unário</a></td> + <td>direita para esquerda</td> + <td><code>- …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Incremento Pré-fixado</a></td> + <td>direita para esquerda</td> + <td><code>++ …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Decremento Pré-fixado</a></td> + <td>direita para esquerda</td> + <td><code>-- …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> + <td>direita para esquerda</td> + <td><code>typeof …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> + <td>direita para esquerda</td> + <td><code>void …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> + <td>direita para esquerda</td> + <td><code>delete …</code></td> + </tr> + <tr> + <td>15</td> + <td> + <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponenciação</a></p> + </td> + <td>direita para esquerda</td> + <td>… ** …</td> + </tr> + <tr> + <td rowspan="3">14</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Multiplicação</a></td> + <td>esquerda para direita</td> + <td><code>… * …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Divisão</a></td> + <td>esquerda para direita</td> + <td><code>… / …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Resto</a></td> + <td>esquerda para direita</td> + <td><code>… % …</code></td> + </tr> + <tr> + <td rowspan="2">13</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Adição</a></td> + <td>esquerda para direita</td> + <td><code>… + …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Subtração</a></td> + <td>esquerda para direita</td> + <td><code>… - …</code></td> + </tr> + <tr> + <td rowspan="3">12</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Deslocamento de bits para esquerda</a></td> + <td>esquerda para direita</td> + <td><code>… << …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Deslocamento de bits para direita</a></td> + <td>esquerda para direita</td> + <td><code>… >> …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Deslocamento de bits para direita, sem sinal</a></td> + <td>esquerda para direita</td> + <td><code>… >>> …</code></td> + </tr> + <tr> + <td rowspan="6">11</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Menor Que</a></td> + <td>esquerda para direita</td> + <td><code>… < …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Menor ou Igual a</a></td> + <td>esquerda para direita</td> + <td><code>… <= …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Maior Que</a></td> + <td>esquerda para direita</td> + <td><code>… > …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Maior ou Igual a</a></td> + <td>esquerda para direita</td> + <td><code>… >= …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> + <td>esquerda para direita</td> + <td><code>… in …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> + <td>esquerda para direita</td> + <td><code>… instanceof …</code></td> + </tr> + <tr> + <td rowspan="4">10</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Igualdade</a></td> + <td>esquerda para direita</td> + <td><code>… == …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Desigualdade</a></td> + <td>esquerda para direita</td> + <td><code>… != …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Igualdade Estrita</a></td> + <td>esquerda para direita</td> + <td><code>… === …</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Desigualdade Estrita</a></td> + <td>esquerda para direita</td> + <td><code>… !== …</code></td> + </tr> + <tr> + <td>9</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">E bit-a-bit</a></td> + <td>esquerda para direita</td> + <td><code>… & …</code></td> + </tr> + <tr> + <td>8</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">OU exclusivo bit-a-bit</a></td> + <td>esquerda para direita</td> + <td><code>… ^ …</code></td> + </tr> + <tr> + <td>7</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">OU bit-a-bit</a></td> + <td>esquerda para direita</td> + <td><code>… | …</code></td> + </tr> + <tr> + <td>6</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">E lógico</a></td> + <td>esquerda para direita</td> + <td><code>… && …</code></td> + </tr> + <tr> + <td>5</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">OU lógico</a></td> + <td>esquerda para direita</td> + <td><code>… || …</code></td> + </tr> + <tr> + <td>4</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Condicional</a></td> + <td>direita para esquerda</td> + <td><code>… ? … : …</code></td> + </tr> + <tr> + <td rowspan="12">3</td> + <td rowspan="12"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Atribuição</a></td> + <td rowspan="12">direita para esquerda</td> + <td><code>… = …</code></td> + </tr> + <tr> + <td><code>… += …</code></td> + </tr> + <tr> + <td><code>… -= …</code></td> + </tr> + <tr> + <td><code>… *= …</code></td> + </tr> + <tr> + <td><code>… /= …</code></td> + </tr> + <tr> + <td><code>… %= …</code></td> + </tr> + <tr> + <td><code>… <<= …</code></td> + </tr> + <tr> + <td><code>… >>= …</code></td> + </tr> + <tr> + <td><code>… >>>= …</code></td> + </tr> + <tr> + <td><code>… &= …</code></td> + </tr> + <tr> + <td><code>… ^= …</code></td> + </tr> + <tr> + <td><code>… |= …</code></td> + </tr> + <tr> + <td rowspan="2">2</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> + <td rowspan="2">direita para esquerda</td> + <td><code>yield …</code></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></td> + <td><code>yield* …</code></td> + </tr> + <tr> + <td>1</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Propagação</a></td> + <td>n/a</td> + <td><code>...</code> …</td> + </tr> + <tr> + <td>0</td> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Vírgula / Sequência</a></td> + <td>esquerda para direita</td> + <td><code>… , …</code></td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/pt-br/web/javascript/reference/operators/optional_chaining/index.html b/files/pt-br/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..f3ed1042fa --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,192 @@ +--- +title: Encadeamento opcional +slug: Web/JavaScript/Reference/Operators/Optional_chaining +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>O operador de <strong>encadeamento opcional</strong> <strong><code>?.</code></strong> permite a leitura do valor de uma propriedade localizada internamente em uma cadeia de objetos conectados, sem que a validação de cada referência da cadeia seja expressivamente realizada.</p> + +<p>O operador <strong><code>?.</code></strong> funciona de maneira similar ao operador <span class="seoSummary"><code>.</code> de encadeament, exceto que, ao invés de causar um erro se a referência é <a href="/en-US/docs/Glossary/nullish">nullish</a> ({{JSxRef("null")}} ou {{JSxRef("undefined")}}), a expressão sofre um "curto-circuito" e retorna com um valor de <code>undefined</code>.</span> Quando utilizado com uma chamada de função, retorna <code>undefined</code> se a função executada não existir.</p> + +<p>Isso resulta em expressões mais curtas e simples ao acessar propriedades encadeadas quando a possibilidade de uma referência ser inexistente. Isso também pode auxiliar ao explorar o conteúdo de um objeto quando não existe garantia da existência de determinadas propriedades obrigatórias.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div> + +<div class="hidden">A fonte desse exemplo interativo está armazenada em um repositório no GitHub. Se você gostaria de contribuir para esses exemplos interativos, por favor, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><var>obj.val</var>?.<var>prop</var> +<var>obj.val</var>?.[<var>expr</var>] +<em>obj.arr</em>?.[<var>index</var>] +<var>obj.func</var>?.(<var>args</var>) +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>O operador de encadeamento opcional provê uma forma de simplificar o acesso a valores através de objetos conectados, quando é possível que uma referência ou função possa ser <code>undefined</code> ou <code>null</code>.</p> + +<p>Por exemplo, considere um objeto <code>obj</code> que possui uma estrutura aninhada. Sem o encadeamento opcional, verificar proriedades profundamente aninhadas requer uma validação de referências intermediárias, algo como:</p> + +<pre class="brush: js notranslate">let nestedProp = obj.first && obj.first.second;</pre> + +<p>O valor de <code>obj.first</code> é confirmadamente não-<code>null</code> (e não-<code>undefined</code>) antes de acessar o valor de <code>obj.first.second</code>. Isso previne o erro que ocorreria se você simplesmente acessasse <code>obj.first.second</code> diretamente sem testar <code>obj.first</code>.</p> + +<p>Com o operador de encadeamento opcional (<code>?.</code>), entretanto, você não precisa explicitamente testar e aplicar curto-circuito baseado no estado de <code>obj.first</code> antes de tentar acessar <code>obj.first.second</code>:</p> + +<pre class="brush: js notranslate">let nestedProp = obj.first?.second;</pre> + +<p>Ao utilizar o operador <code>?.</code> ao invés de apenas <code>.</code>, o JavaScript sabe que deve implicitamente checar e ter certeza que <code>obj.first</code> não é <code>null</code> ou <code>undefined</code> antes de tentar acessar <code>obj.first.second</code>. Se <code>obj.first</code> é <code>null</code> ou <code>undefined</code>, a expressão automaticamente sofrerá curto-circuito, retornando <code>undefined</code>.</p> + +<p>Isso é equivalente ao seguinte, exceto que a variável temporária, de fato, não é criada:</p> + +<pre class="brush: js notranslate">let temp = obj.first; +let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); +</pre> + +<h3 id="Encadeamento_opcional_com_chamadas_de_funções">Encadeamento opcional com chamadas de funções</h3> + +<p>Você pode usar o encadeamento opcional ao tentar chamar um método que pode não existir. Isso pode auxiliar, por exemplo, ao utilizar uma API em que o método está indisponível, seja pela época da implementação ou por causa de uma funcionalidade que ainda não está disponível no dispositivo do usuário.</p> + +<p>Usar encadeamento opcional com chamadas de função faz com que a expressão automaticamente retorne <code>undefined</code> ai invés de lançar uma exceção se o método não é encontrado:</p> + +<pre class="brush: js notranslate">let result = someInterface.customMethod?.();</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Se existe uma propriedade com tal nome e que não é uma função, usando <code>?.</code> ainda lançará a exceção {{JSxRef("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p> +</div> + +<h4 id="Lidando_com_callbacks_opcionais_ou_manipuladores_de_eventos">Lidando com callbacks opcionais ou manipuladores de eventos</h4> + +<p>Se você usa callbacks ou consulta métodos de objetos com <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao#Object_destructuring">atribuição via desestruturação</a>, você pode ter valores não-existentes que você não conseguirá chamar como funções, a menos que você tenha testado sua existência. Usando <code>?.</code>, você pode evitar esse teste extra:</p> + +<pre class="brush: js notranslate">// Escrito como ES2019 +function doSomething(onContent, onError) { + try { + // ... faz algo com os dados + } + catch (err) { + if (onError) { // teste se onError realmente existe + onError(err.message); + } + } +} +</pre> + +<pre class="brush: js notranslate">// Usando encadeamento opcional com chamadas de função +function doSomething(onContent, onError) { + try { + // ... faz algo com os dados + } + catch (err) { + onError?.(err.message); // Nenhuma exceção se onError for undefined + } +} +</pre> + +<h3 id="Encadeamento_opcional_com_expressões">Encadeamento opcional com expressões</h3> + +<p>Você também pode usar o operador de encadeamento opcional ao acessar propriedades com uma expressão usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">assessores de propriedade</a>:</p> + +<pre class="brush: js notranslate">let nestedProp = obj?.['prop' + 'Name']; +</pre> + +<h3 id="Encadeamento_opcional_não_valid_no_lado_esquerdo_de_uma_atribuição">Encadeamento opcional não valid no lado esquerdo de uma atribuição</h3> + +<pre class="brush: js notranslate"><code>let object = {}; +object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre> + +<h3 id="Acesso_a_item_de_Array_com_encadeamento_opcional">Acesso a item de Array com encadeamento opcional</h3> + +<pre class="brush: js notranslate">let arrayItem = arr?.[42];</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Exemplo_básico">Exemplo básico</h3> + +<p>Esse exemplo busca plo valor da propriedade <code>name</code> para o membro <code>bar</code> em um map quando não existe tal membro. Portanto, o resultado é <code>undefined</code>.</p> + +<pre class="brush: js notranslate">let myMap = new Map(); +myMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = myMap.get("bar")?.name;</pre> + +<h3 id="Avaliação_com_curto-circuito">Avaliação com curto-circuito</h3> + +<p>Ao usar o encadeamento opcional com expressões, se o operador do lado esquerdo é <code>null</code> ou <code>undefined</code>, a expressão não será avaliada. Por exemplo:</p> + +<pre class="brush: js notranslate">let potentiallyNullObj = null; +let x = 0; +let prop = potentiallyNullObj?.[x++]; + +console.log(x); // 0 já que x não foi incrementado +</pre> + +<h3 id="Empilhando_o_operator_de_encadeamento_opcional">Empilhando o operator de encadeamento opcional</h3> + +<p>Com estruturadas aninhadas, é possível usar encadeamento opcional múltiplas vezes:</p> + +<pre class="brush: js notranslate">let customer = { + name: "Carl", + details: { + age: 82, + location: "Paradise Falls" // endereço detalhado é desconhecido + } +}; +let customerCity = customer.details?.address?.city; + +// … isso também funcional com encadeamento opcional em chamada de função +let duration = vacations.trip?.getTime?.(); +</pre> + +<h3 id="Combinando_com_o_operador_de_coalescência_nula_nullish_coalescing">Combinando com o operador de coalescência nula (nullish coalescing)</h3> + +<p>O {{JSxRef("Operators/Nullish_Coalescing_Operator", "operador de coalescência nula", '', 1)}} pode ser usado após o encadeamento opcional, para construir um valor padrão quando nada é encontrado:</p> + +<pre class="brush: js notranslate">let customer = { + name: "Carl", + details: { age: 82 } +}; +const customerCity = customer?.city ?? "Cidade desconhecida"; +console.log(customerCity); // Cidade desconhecida</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.es/proposal-optional-chaining/#sec-scope">Proposal for the "optional chaining" operator</a></td> + <td>Stage 4</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2> + +<div> + + +<p>{{Compat("javascript.operators.optional_chaining")}}</p> +</div> + +<h3 id="Progresso_de_implementação">Progresso de implementação</h3> + +<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p> + +<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>O {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/pipeline_operator/index.html b/files/pt-br/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..9de22603c9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,65 @@ +--- +title: Operador Pipeline +slug: Web/JavaScript/Reference/Operators/Pipeline_operator +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<p>O operador experimental pipeline <code>|></code> (atualmente no estágio 1) permite a criação de chamadas de funções encadeadas de maneira legível. Basicamente, o operador de pipeline fornece açúcar sintático em uma chamada de função com um único argumento, permitindo que você escreva</p> + +<p><code>'%21' |> decodeURI</code> ao invés de <code>decodeURI('%21')</code>.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">expressão |> função</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Chamadas_de_funções_encadeadas">Chamadas de funções encadeadas</h3> + +<p> </p> + +<p>O operador de pipeline pode melhorar a legibilidade ao encadear várias funções.</p> + +<pre class="brush: js">const double = (n) => n * 2; +const increment = (n) => n + 1; + +// sem o perador pipeline +double(increment(double(double(5)))); // 42 + +// com o operador pipeline +5 |> double |> double |> increment |> double; // 42 +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td> + <td>Estágio 1</td> + <td>Não faz parte da especificação ECMAScript ainda.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> + +<div> + + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/property_accessors/index.html b/files/pt-br/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..2931effbdb --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,189 @@ +--- +title: Assessores de propriedade +slug: Web/JavaScript/Reference/Operators/Property_Accessors +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Os assessores de propriedade fornecem acesso as propriedades de um objeto usando a notação de ponto ou a notação de colchetes.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">object.property +object["property"] +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p><span id="result_box" lang="pt"><span>Pode-se</span> <span>pensar em</span> <span>um objeto</span> <span>como uma matriz associativa</span></span> (a.k.a. <em>map</em>, <em>dictionary</em>, <em>hash</em>, <em>lookup table</em>). As chaves nesta matriz são os nomes das propriedades dos objetos. <span id="result_box" lang="pt"><span>É típico</span> <span>quando se fala de</span> <span>propriedades de um objeto</span> <span>para fazer uma</span> <span>distinção entre</span> <span>propriedades e métodos</span></span>. No entanto, a distinção entre propriedade/método é um pouco mais do que convenção. <span id="result_box" lang="pt"><span>Um método</span> <span>é simplesmente</span> <span>uma propriedade que</span> <span>pode ser chamada</span><span>, por exemplo</span><span>, se tiver</span> <span>uma referência</span> <span>a uma instância</span> <span>de <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions">Function</a></span> <span>como seu valor.</span></span></p> + +<p>Há duas maneira de acessar propriedades: notação de ponto ou a notação de colchetes.</p> + +<h3 id="Notação_de_ponto">Notação de ponto</h3> + +<pre class="brush: js">get = object.property; +object.property = set; +</pre> + +<p>Neste código, a propriedade deve ser um identificador válido, i.e. uma sequência de carácteres alfanuméricos, incluíndo também o underline ("<code>_</code>") e o cifrão ("<code>$</code>"), não pode começar com um número. Por exemplo, <code>object.$1</code> é valido, enquanto <code>object.1</code> não é.</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Aqui, o método chamado "createElement" <span class="short_text" id="result_box" lang="pt"><span>é recuperado do</span> <span>documento e</span> <span>é chamado.</span></span></p> + +<p>Se você usar um método para um literal numérico e o literal numérico não tem expoente e nenhum ponto decimal, deixar de espaço em branco antes do ponto que precede a chamada de método para evitar que o ponto seja interpretado como um ponto decimal.</p> + +<pre class="brush: js">77 .toExponential(); +// ou +77 +.toExponential(); +// ou +(77).toExponential(); +// ou +77..toExponential(); +// ou +77.0.toExponential(); +// porque 77. === 77.0, sem ambiguidade :p</pre> + +<h3 id="Notação_de_colchete">Notação de colchete</h3> + +<pre class="brush: js">get = object[property_name]; +object[property_name] = set; +</pre> + +<p><code>property_name</code> é uma string. A string não precisa ser um identificador válido; pode ser qualquer valor, e.g. "1foo", "!bar!", ou até " " (um espaço).</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Isto faz exatamente a mesma coisa que o exemplo anterior.</p> + +<p>Um espaço antes da notação de colchete é permitido.</p> + +<pre class="brush: js">document ['createElement']('pre');</pre> + +<h3 id="Nomes_de_propriedades"><span class="short_text" id="result_box" lang="pt"><span>Nomes de propriedades</span></span></h3> + +<p><span class="short_text" id="result_box" lang="pt"><span>Nomes de propriedades</span></span> devem ser strings. Isto significa que objetos não-string não podem ser usados como chave em um objeto. Qualquer objeto não-string, incluindo um número, é <span class="short_text" id="result_box" lang="pt"><span>estereotipado</span></span> como uma string pelo método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString</a>.</p> + +<pre class="brush: js">var object = {}; +object['1'] = 'value'; +console.log(object[1]); +</pre> + +<p>A saída é "value", desde 1 é estereotipado como '1'.</p> + +<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; +object[foo] = 'value'; +console.log(object[bar]); +</pre> + +<p>A saída também é "value", já que ambos foo e bar são convertidos para a mesma string. No motor de Javascript <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, esta string poderia ser "['object Object']".</p> + +<h3 id="Ligação_de_método">Ligação de método</h3> + +<p>Um método não é limitado ao objeto de quem é metodo. Especificamente, <code>this</code> não é fixo em um método, i.e., <code>this</code> não se referece necessariamente ao objeto contendo o método. Ao invés disso, <code>this</code> é "passado" pela função call. Veja <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this#Method_binding">method binding</a>.</p> + +<h3 id="Nota_sobre_eval">Nota sobre <code>eval</code></h3> + +<p>Novatos em JavaScript comentem muitas vezes o erro de usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a> onde a notação de colchete pode ser usada no lugar. Por exemplo, a sintaxe a seguir é muitas vezes vista em muitos scripts.</p> + +<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value'); +</pre> + +<p><code>eval</code> é lento e deve ser evitado sempre que possível. Também, <code>strFormControl</code> would have to hold an identifier, which is not required for names and IDs of form controls. It is better to use bracket notation instead:</p> + +<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value; +</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('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<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("Object")}}</li> + <li>{{jsxref("Object/defineProperty")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/spread_operator/index.html b/files/pt-br/web/javascript/reference/operators/spread_operator/index.html new file mode 100644 index 0000000000..4097266877 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/spread_operator/index.html @@ -0,0 +1,200 @@ +--- +title: Spread operator +slug: Web/JavaScript/Reference/Operators/Spread_operator +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A sintaxe de propagação (<strong>Spread</strong>) permite que um objeto iterável, como um array ou string, seja expandida em locais onde zero ou mais argumentos (para chamadas de função) ou elementos (para literais de array) sejam esperados ou uma expressão de objeto seja expandida em locais onde zero ou mais pares de chave-valor (para literais de objeto) são esperados.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Para chamadas de função:</p> + +<pre class="brush: js">minhaFuncao(...objIteravel); +</pre> + +<p>Para array literais:</p> + +<pre class="brush: js">[...objIteravel, 4, 5, 6]</pre> + +<p>Desestruturação:</p> + +<pre class="brush: js">[a, b, ...objIteravel] = [1, 2, 3, 4, 5];</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Uma_melhor_aplicação">Uma melhor aplicação</h3> + +<p><strong>Exemplo:</strong> é comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar um array como argumentos em uma função.</p> + +<pre class="brush: js">function minhaFuncao(x, y, z) { } +var args = [0, 1, 2]; +minhaFuncao.apply(null, args);</pre> + +<p>Com o spread do ES2015 você pode agora escrever isso acima como:</p> + +<pre class="brush: js">function minhaFuncao(x, y, z) { } +var args = [0, 1, 2]; +minhaFuncao(...args);</pre> + +<p>Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.</p> + +<pre class="brush: js">function minhaFuncao(v, w, x, y, z) { } +var args = [0, 1]; +minhaFuncao(-1, ...args, 2, ...[3]);</pre> + +<h3 id="Um_literal_array_mais_poderoso">Um literal array mais poderoso</h3> + +<p><strong>Exemplo:</strong> Hoje se você tiver um array e quer criar um novo array com esse existente fazendo parte dele, a sintaxe literal do array não é mais suficiente e você deve voltar para o código imperativo, usando uma combinação de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Com a sintaxe spread isso se torna muito mais sucinto:</p> + +<pre class="brush: js">var partes = ['ombros', 'joelhos']; +var letra = ['cabeca', ...partes, 'e', 'dedos']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"</span></span>cabeca<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>ombros<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>joelhos<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"e"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"dedos"</span></span>] +</pre> + +<p>Assim como em spread para listas de argumentos <code>...</code> pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.</p> + +<h3 id="Apply_para_new">Apply para new</h3> + +<p><strong>Exemplo:</strong> No ES5 não é possível usar <code>new</code> com <code>apply.</code> (Em ES5 termos, <code>apply</code> faz uma <code>[[Call]]</code> e nao um <code>[[Construct]].</code>) Em ES2015 a sintaxe spread naturalmente suporta isso:</p> + +<pre class="brush: js">var camposData = lerCamposData(bancoDeDados); +var d = new Date(...camposData);</pre> + +<h3 id="Um_push_melhor">Um push melhor</h3> + +<p><strong>Exemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Acrescenta todos itens do arr2 ao arr1 +Array.prototype.push.apply(arr1, arr2);</pre> + +<p>No ES2015 com spread isso se torna:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1.push(...arr2);</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Inicializador do array</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Listas de argumento</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_browser">Compatibilidade com browser</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Operação spread em array literais</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("16") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operação spread em chamadas de função</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operação spread em desestruturação</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Operação spread em array literais</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("16") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operação spread em chamadas de função</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operação spread em desestruturação</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parâmetros rest</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/spread_syntax/index.html b/files/pt-br/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..4eba9de8f7 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,228 @@ +--- +title: Sintaxe de Espalhamento +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - Iterator + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<div><strong>Sintaxe de Espalhamento (Spread syntax)</strong> permite que um objeto iterável, como uma expressão de array ou uma string seja expandido para ser usado onde zero ou mais argumentos (para chamadas de funções) ou elementos (para arrays <em>literais</em>) são esperados, ou que um objeto seja expandido onde zero ou mais pares <em>propriedade:valor</em> (para objetos <em>literais</em>) são esperados.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + +<p class="hidden">O código-fonte para este exemplo interativo está armazenado em um repositorio do GitHub. Se você gostaria de contribuir para os exemplos interativos para este projeto, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie um pull request.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>Para chamada de funções:</p> + +<pre class="syntaxbox">myFunction(...iterableObj); +</pre> + +<p>Para arrays literais ou strings:</p> + +<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre> + +<p>Para objetos literais (novo em ECMAScript 2018; stage 3 draft):</p> + +<pre class="syntaxbox">let objClone = { ...obj };</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Espalhamento_e_chamadas_de_funções">Espalhamento e chamadas de funções</h3> + +<h4 id="Substituindo_apply">Substituindo apply</h4> + +<p>É comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar os elementos de um array como argumentos para uma função.</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>Com a sintaxe de espalhamento, o código acima pode ser escrito assim:</p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Qualquer argumento numa lista de argumentos pode usar a sintaxe de espalhamento e pode ser usado mais de uma vez.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_para_new">Apply para new</h4> + +<p>Quando um construtor é chamado com <code>new</code>, não é possivel usar diretamente um array e <code>apply</code> (<code>apply</code> executa o <code>[[Call]]</code> e não o <code>[[Construct]]</code>). No entanto, um array pode facilmente ser usado com <code>new</code> graças ao operador de espalhamento:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>Para usar o <code>new</code> com array de parâmetros sem a sintaxa de espalhamento, você teria que fazer isso <strong>indiretamente </strong>por meio da aplicação parcial:</p> + +<pre class="brush: js">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Espalhamento_em_arrays_literais">Espalhamento em arrays literais</h3> + +<h4 id="Um_array_literal_mais_poderoso">Um array literal mais poderoso</h4> + +<p>Criar um novo array usando um array existente como parte dele, não é possível utilizando apenas a sintaxe de array literal. O código imperativo deve ser usado ao invés da combinação de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Com a sintaxe de espalhamento isso se torna muito mais sucinto:</p> + +<pre class="brush: js">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>Assim como espalhar a lista de argumentos, <code>...</code> pode ser usado em qualquer lugar em um array literal e pode ser usado multiplas vezes.</p> + +<h4 id="Copiando_um_array">Copiando um array</h4> + +<pre class="brush: js">var arr = [1, 2, 3]; +var arr2 = [...arr]; // like arr.slice() +arr2.push(4); + +// arr2 becomes [1, 2, 3, 4] +// arr remains unaffected +</pre> + +<p><strong>Nota:</strong> A sintaxe de espalhamento efetivamente vai um nível mais profundo quando se copia um array. Assim sendo, pode ser inadequado para copiar arrays multidimensionais como o exemplo a seguir mostra (é o mesmo com {{jsxref("Object.assign()")}} e a sintaxe de espalhamento).</p> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Now array a is affected as well: [[], [2], [3]] +</pre> + +<h4 id="Uma_maneira_melhor_de_concatenar_arrays">Uma maneira melhor de concatenar arrays</h4> + +<p>{{jsxref("Array.concat")}} é frequentemente usado para concatenar um array no final de um array existente. Sem a sintaxe de espalhamento é feito assim:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Append all items from arr2 onto arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>Com a sintaxe de espalhamento se torna isso:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; +</pre> + +<p>{{jsxref("Array.unshift")}} é frequentemente usado para inserir um array de valores no inicio de um array existente. Sem a sintaxe de espalhamento é feito assim:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Prepend all items from arr2 onto arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> + +<p>Com a <em>sintaxe de espalhamento</em> isso se torna <em>[Note, no entanto, que isso cria um novo <code>arr1</code> array. Ao contrário de {{jsxref("Array.unshift")}}, isso não modifica o array original <code>arr1</code> array]</em>:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] +</pre> + +<h3 id="Espalhamento_em_objetos_literais">Espalhamento em objetos literais</h3> + +<p>A proposta <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (stage 3) adiciona espalhamento de propriedades para <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">objetos literais</a>. Este copia as propriedades enumeráveis de um objeto informado em um novo objeto.</p> + +<p><strong>Cópia-rasa (Shallow-cloning)</strong> (excluindo o protótipo) ou fusão (<strong>merge</strong>) de objetos agora é possivel usando uma sintaxe mais curta que {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Note que {{jsxref("Object.assign()")}} chamada os <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> e a <em>sintaxe de espalhamento</em> não.</p> + +<h3 id="Apenas_para_iteráveis">Apenas para iteráveis</h3> + +<p>A sintaxe de espalhamento (diferente de propriedades espalhadas) só pode ser utilizada com objetos iteráveis.</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj is not iterable +</pre> + +<h3 id="Espalhamento_com_muitos_valores">Espalhamento com muitos valores</h3> + +<p>Quando usar a sintaxe de espalhamento para chamada de funções, esteja ciente da possibilidade de exceder tamanho máximo de argumentos do motor do Javascript. Veja <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> para mais detalhes.</p> + +<h2 id="Sintaxe_Rest_parâmetros">Sintaxe Rest (parâmetros)</h2> + +<p>A <em>sintaxe rest</em> se parece exatamente como a <em>sintaxe de espalhamento</em>, mas esta é usada para desestruturar arrays e objetos. De certa forma, a <em>sintaxe rest</em> é o oposto da <em>sintaxe de espalhamento</em>: A <em>sintaxe de espalhamento (spread)</em> 'expande' um array em vários elementos, enquanto a <em>sintaxe rest</em> coleta multiplos elementos e 'condensa' eles em um único elemento. Veja <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">parâmetros rest.</a></p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>No changes.</td> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript </a></td> + <td>Draft</td> + <td>Stage 3 draft.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2> + +<div class="hidden">A tabela de compatibilidade nessa página é gerada a partir de dados estruturados. Se você gostaria de contribuir com dados, por favor verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pull request.</div> + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parâmetros Rest</a> (also ‘<code>...</code>’)</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/super/index.html b/files/pt-br/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..616f708dc9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/super/index.html @@ -0,0 +1,226 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A palavra-chave <strong>super</strong> é usada para acessar o objeto pai de um objeto, em outros casos, é usada para acessar a classe pai de uma classe.</p> + +<h2 id="Síntaxe">Síntaxe</h2> + +<pre class="syntaxbox">// chama o objeto (ou construtor) pai +super(...[arguments]); +// chama um método da classe/objeto pai +super.metodo([arguments]); +</pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Quando usada no construtor de uma classe, a palavra-chave <code>super</code> deve ser usada apenas uma vez, e precisa ser usada antes que a palavra-chave <code>this</code> possa ser usada. Essa palavra-chave também pode ser usada para chamar uma função ou objeto pai.</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h3 id="Usando_super_em_classes">Usando <code>super</code> em classes</h3> + +<p>Esse trecho de código foi obtido através de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demonstração</a>). Aqui <code>super()</code> é chamado para evitar duplicar a parte do construtor que é comum entre <code>Polygon</code> e <code>Square</code>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } +} + +class Square extends Polygon { + constructor(length) { + this.height; // ReferenceError, precisa chamar o super primeiro! + + // Aqui, ele chama a classe construtora pai com o tamanho + // provido pelo Polygon -> width e height + super(length, length); + + // Nota: Em classes derivadas, <code>super()</code> deve ser chamado antes de + // usar <code>this</code>. Deixar isso de fora vai causar um ReferenceError. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Super_chamando_métodos_estáticos">Super chamando métodos estáticos</h3> + +<p>Você também pode chamar o super em métodos <a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">estáticos</a>.</p> + +<pre class="brush: js">class Human { + constructor() {} + static ping() { + return 'ping'; + } +} + +class Computer extends Human { + constructor() {} + static pingpong() { + return super.ping() + ' pong'; + } +} +Computer.pingpong(); // 'ping pong' +</pre> + +<h3 id="Ao_deletar_propriedades_do_super_será_emitido_um_erro">Ao deletar propriedades do super, será emitido um erro</h3> + +<p>Você não pode utilizar o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a> e <code>super.prop</code> ou <code>super[expr]</code> para deletar uma propriedade da classe pai. Isto emitirá um {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; + } +} + +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> + +<h3 id="Super.prop_não_pode_sobrescrever_propriedades_não_editáveis"><code>Super.prop</code> não pode sobrescrever propriedades não editáveis</h3> + +<p><code>super</code>Whennão pode sobrescrever o valor de uma propriedade quando esta houver sido definida como não editável ('writable: false') com, e.g., {{jsxref("Object.defineProperty")}}.</p> + +<pre class="brush: js">class X { + constructor() { + Object.defineProperty(this, "prop", { + configurable: true, + writable: false, + value: 1 + }); + } + f() { + super.prop = 2; + } +} + +var x = new X(); +x.f(); +console.log(x.prop); // 1 +</pre> + +<h3 id="Usando_super.prop_em_objetos_literais">Usando <code>super.prop</code> em objetos literais</h3> + +<p><code>super</code> também pode ser usado na inicialização da notação literal de objetos. No exemplo abaixo, cada objeto define um método. No segundo objeto, <code>super</code> chama o método do primeiro objeto. Isso funciona graças ao {{jsxref("Object.setPrototypeOf()")}}, com o qual é possível configurar o prototype do <code>obj2</code> para o <code>obj1</code>, tornando o <code>super</code> capaz de encontrar o <code>method1()</code> por meio do <code>obj2</code>.</p> + +<pre class="brush: js">var obj1 = { + method1() { + console.log("method 1"); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // retorna "method 1" +</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('ES6', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_Gecko_específicas">Notas Gecko específicas</h2> + +<ul> + <li><code>super()</code> ainda não funciona como esperado para prototypes nativos.</li> +</ul> + +<h2 id="Veja_mais">Veja mais</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/this/index.html b/files/pt-br/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..dc1798e093 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/this/index.html @@ -0,0 +1,410 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - Expressões Primárias + - JavaScript + - Operador + - Referencia +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A palavra-chave <strong><code>this</code></strong> comporta-se um pouco diferente em Javascript se comparado com outras linguagens. Também possui algumas diferenças entre o <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto" title="en-US/docs/JavaScript/Strict mode">modo estrito</a> e o modo não estrito.</p> + +<p>Em muitos casos, o valor <code>this</code> é determinado pela forma como a função é chamada. Ele não pode ser assinado durante a execução, e isso pode ser diferente a cada vez que a função é chamada. ES5 introduziu o método <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> para estabelecer o valor <code>this</code> da função, independentemente de como ela seja chamada, e ECMAScript 2015 introduziu o <a href="../Functions/Arrow_functions">arrow functions</a>, cujo <code>this</code> é lexicalmente delimitado (o valor <code>this</code> é estabelecido segundo o escopo de execução no qual está inserido).</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">this</pre> + +<h2 id="Contexto_global">Contexto global</h2> + +<p>No contexto de execução global (fora de qualquer função), <code>this</code> refere-se ao objeto global, seja em modo estrito ou não.</p> + +<pre class="brush:js">console.log(this.document === document); // true + +// Em navegadores web, o objeto window é também o objeto global: +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 +</pre> + +<h2 id="Contexto_de_função">Contexto de função</h2> + +<p>Dentro de uma função, o valor de <code>this</code> depende de como a função é chamada.</p> + +<h3 id="Chamada_simples">Chamada simples</h3> + +<p>Como o código a seguir não está no modo estrito, o valor de <code>this</code> não é definido pela chamada. Por padrão, <code>this</code> será o objeto global que no navegador é o <code>window</code>.</p> + +<pre class="brush: js">function f1(){ + return this; +} + +// No navegador +f1() === window; // true +</pre> + +<p>Em modo estrito, o valor de <code>this</code> permanece seja qual for o definido ao entrar no contexto de execução, assim, no caso a seguir, <code>this</code> por padrão será indefinido (<code>undefined</code>):</p> + +<pre class="brush:js">function f2(){ + "use strict"; // assume modo estrito + return this; +} + +f2() === undefined; // true +</pre> + +<p>Portanto, em modo estrito, se <code>this</code> não for definido durante o contexto da execução, ele permanecerá indefinido (<code>undefined</code>).</p> + +<div class="note">No segundo exemplo, <code>this</code> deveria ser <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>, porque <code>f2</code> foi chamada diretamente e não como um método ou popriedade de um objeto (ou seja, <code>window.f2()</code>). Esta característica não foi implementada em alguns navegadores quando começaram a dar suporte ao <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mode</a> (modo estrito). Como resultado, eles incorretamente retornavam o objeto <code>window</code>.</div> + +<p> </p> + +<h3 id="Funções_Arrow_(seta)">Funções Arrow (seta)</h3> + +<p>Nas <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> (funções seta), o <code>this</code> é definido lexicalmente, isto é, seu valor é definido pelo contexto de execução onde está inserido. Em um código global, this assume o objeto global:</p> + +<pre class="brush: js">var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true</pre> + +<p>Não importa como <code>foo</code> é chamado, o <code>this</code> continuará como o objeto global. Isto continua verdadeiro mesmo se chamá-lo como método de um determinado objeto (o que normalmente definiria seu this ao objeto), com <code>call</code> ou <code>apply</code> ou <code>bind</code> é usado:</p> + +<pre class="brush: js">// Chama como um método de um objeto +var obj = {foo: foo}; +console.log(obj.foo() === globalObject); // true + +// Tentativa de definir this usando call +console.log(foo.call(obj) === globalObject); // true + +// Tentantiva de definir this usando bind +foo = foo.bind(obj); +console.log(foo() === globalObject); // true</pre> + +<p>Não importa como for, o this do foo mantém o valor que recebeu quando foi criado (no exemplo acima, o objeto global). O mesmo se aplica para funções arrow criadas dentro de outras funções: seus this são definidos em seus respectivos contextos de execução.</p> + +<pre class="brush: js">// Cria obj com um método bar que retorna uma função que +// retorna seu this. A função retornada é criada como +// uma função arrow, para que seu this esteja permanentemente +// ligado ao this da função que a envolve. O valor de bar pode ser // definido na chamada, que por sua vez define o valor da função +// retornada. +var obj = { bar : function() { + var x = (() => this); + return x; + } + }; + +// Chama bar como método de obj, configurando seu this como obj +// Assina à variável fn uma referência para a função retornada +var fn = obj.bar(); + +// Chamar fn, sem definir this, por padrão, referenciaria +// ao objeto global ou undefined em modo estrito (strict mode) +console.log(fn() === obj); // true</pre> + +<p>No exemplo acima, a função (chamemos função anônima A) atribuída a obj.bar retorna outra função (chamemos função anônima B) que é criada como uma função arrow (seta). Como resultado, o this da função B é permanentemente definido como o this de obj.bar (função A) quando chamado. Quando a função retornada (função B) é chamada, seu this sempre será aquele que foi definido inicialmente. No exemplo de código acima, o this da função B é definido com o this da função A, que é obj, por isso permanece definido para obj, mesmo quando chamado de uma maneira que normalmente definiria seu this como undefined ou como objeto global (ou qualquer outro método, como naquele exemplo anterior de contexto de execução global).</p> + +<h3 id="Como_método_de_um_objeto">Como método de um objeto</h3> + +<p>Quando uma função é chamada como um método de um objeto, seu this toma o valor do objeto pertencente ao método chamado.</p> + +<p>No exemplo a seguir, quando <code>o.f()</code> é invocado, o this dentro da função é vinculado ao objeto o.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // logs 37 +</pre> + +<p>Observe que esse comportamento não é afetado mesmo pela forma como (ou onde) a função foi definida. No exemplo anterior, nós definimos a função in-line (em linha) como o membro f durante a definição de o. No entanto, poderíamos ter apenas facilmente definido a função primeiro e depois anexado a o.f. Fazendo isso resulta no mesmo comportamento:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // registra 37 +</pre> + +<p>Isto demonstra que é importante apenas que a função foi chamada a partir do membro f de o.</p> + +<p>Da mesma forma, a vinculação de this só é afetada pela referência do membro mais imediato. No exemplo a seguir, quando invocamos a função, podemos chamá-la como um método g do objeto o.b. Desta vez, durante a execução, o this dentro da função irá se referir a o.b. O fato do objeto ser um membro de o não tem qualquer consequência; a referência mais imediata é tudo que importa.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // registra 42 +</pre> + +<h4 id="this_na_cadeia_de_protótipos_(prototype_chain)_do_objeto"><code>this</code> na cadeia de protótipos (prototype chain) do objeto</h4> + +<p>A mesma noção vale para métodos definidos em algum lugar da cadeia de protótipos do objeto. Se o método está na cadeia de protótipo de um objeto, this refere-se ao objeto que é proprietário do método chamado, como se o método estivesse no objeto.</p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>Neste exemplo, o objeto atribuído à variável p não tem sua própria propriedade f, ele o herda de seu protótipo. Mas não importa que a procura por f finalmente encontre um membro com esse nome em o; a procura começou como uma referência para a p.f, portanto o this dentro da função recebe o valor do objeto referido como p. Isto é, já que f é chamado como um método de p, seu this refere-se a p. Este é um recurso interessante de herança prototípica do JavaScript.</p> + +<h4 id="this_com_seletores_(getter)_ou_modificadores_(setter)"><code>this</code> com seletores (getter) ou modificadores (setter) </h4> + +<p>Mais uma vez, a mesma noção se aplica quando uma função é chamada a partir de um getter ou setter. A função usada como getter ou setter tem seu this ligado ao objeto do qual a propriedade está sendo modificada ou selecionada.</p> + +<pre class="brush:js">function modulus(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'modulus', { + get: modulus, enumerable:true, configurable:true}); + +console.log(o.phase, o.modulus); // logs -0.78 1.4142 +</pre> + +<h3 id="Como_um_construtor_(constructor)">Como um construtor (constructor)</h3> + +<p>Quando a função é usada com um construtor (com a palavra chave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>), seu this é vinculado ao novo objeto sendo contruído.</p> + +<p>Nota: enquanto o padrão para um construtor é retornar o objeto referenciado por this, ele pode retornar, ao invés, algum outro objeto (se o valor de retorno não é um objeto, então o objeto this é retornado).</p> + +<pre class="brush:js">/* + * Contrutores funcionam da seguinte forma: + * + * function MyConstructor(){ + * // O código do corpo da função vai aqui. + * // Criam-se propriedades sobre |this| como + * // desejado, assinando-os. Ex., + * this.fum = "nom"; + * // etc... + * + * // Se a função tem uma instrução que + * // retorna um objeto, esse objeto será o + * // resultado da expressão |new|. Caso contrário, + * // o resultado da expressão é o objeto + * // atualmente vinculado a |this| + * // (i.e., o caso mais comumente visto). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // logs 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // registra 38 +</pre> + +<p>No último exemplo (C2), porque um objeto foi retornado durante a construção, o novo objeto que this foi vinculado simplesmente é descartado. (Isso essencialmente faz da expressão "this.a = 37;" código morto. Não é exatamente morto, pois ele é executado, mas ele pode ser eliminado sem efeitos colaterais.)</p> + +<h3 id="call_e_apply"><code>call</code> e <code>apply</code></h3> + +<p>Quando uma função usa a palavra-chave this em seu corpo, o seu valor pode ser vinculado a um determinado objeto na chamada utilizando os métodos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> que todas as funções herdam de Function.prototype.</p> + +<pre class="brush:js">function add(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// O primeiro parâmetro é o objeto a usar como +// 'this'; subsequentes parâmetros são passados como +// argumentos na função chamada +add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// O primeiro parâmetro é o objeto a usar como +// 'this', o segundo é um arranjo (array) cujos +// membros são usados como argumentos na função chamada +add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<p>Observe que, com call e apply, se o valor passado como this não for um objeto, será feita uma tentativa de convertê-lo em um objeto usando a operação interna ToObject. Portanto, se o valor passado é um primitivo como 7 ou 'foo', ele será convertido para um objeto usando o construtor relacionado, de modo que o número primitivo 7 é convertido em um objeto, como realizado por new Number(7), e a cadeia de caracteres 'foo' em um objeto, como realizado por new String(' foo '), por exemplo.</p> + +<pre class="brush:js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +</pre> + +<h3 id="O_método_bind">O método <code>bind</code></h3> + +<p>ECMAScript 5 introduziu <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Chamando f.bind(algumObjeto) cria-se uma nova função com o mesmo corpo e escopo que f, mas onde o this ocorrer na função original, na nova função ele será permanentemente ligado ao primeiro argumento de bind, independentemente de como a função esteja sendo usada.</p> + +<pre class="brush:js">function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var h = g.bind({a: 'yoo'}); // bind só funciona uma vez! +console.log.(h()); // azerty + +var o = {a:37, f:f, g:g, h: h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty +</pre> + +<h3 id="Como_um_manipulador_de_eventos_DOM">Como um manipulador de eventos DOM</h3> + +<p>Quando uma função é usada como um manipulador de eventos, seu this está definido para o elemento do evento a partir do qual foi disparado (alguns navegadores não seguem essa convenção para os listeners adicionados dinamicamente com métodos que não sejam addEventListener).</p> + +<pre class="brush:js">// Quando chamado como listener, transforma o elemento blue +// relacionado +function bluify(e){ + // sempre true + console.log(this === e.currentTarget); + // true quando currentTarget e target são o mesmo objeto + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// Obtém uma lista de todo elemento no documento +var elements = document.getElementsByTagName('*'); + +// Adiciona bluify com um click listener (escutador de click) +// para que quando o elemento seja clicado se torne azul +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="Em_um_manipulador_de_evento_in-line_(em_linha)">Em um manipulador de evento in-line (em linha)</h3> + +<p>Quando o código é chamado de um manipulador de evento in-line, seu this está definido para o elemento DOM em que o listener é colocado:</p> + +<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +</pre> + +<p>O alerta acima mostra button. Note, porém, que apenas o código exterior tem um this definido desta maneira:</p> + +<pre class="brush:js"><button onclick="alert((function(){return this}()));"> + Show inner this +</button> +</pre> + +<p>Neste caso, o this da função interior não está definido, portanto ele retorna o objeto global/objeto window (ou seja, o objeto padrão no modo não-estrito onde this não está definido pela chamada).</p> + +<h2 id="Especificações">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>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<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><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li><a href="http://bjorn.tipling.com/all-this">All this</a>, um artigo sobre this em diferentes contextos</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/typeof/index.html b/files/pt-br/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..aa6204c2fb --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,154 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Operador + - unário +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Sumário">Sumário</h2> + +<p>O operador <code>typeof</code> retorna uma string indicando o tipo de um operando.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<p>O operador <code>typeof</code> pode ser utilizado das seguintes maneiras:</p> + +<pre class="syntaxbox"><code>typeof <code><em>operando</em></code></code></pre> + +<h3 id="Parâmetros">Parâmetros</h3> + +<p><code><em>operand</em></code>o é a string, variável, keyword, ou objeto para que o tipo do mesmo seja retornado. O uso de parênteses é opcional.</p> + +<h2 id="Descrição">Descrição</h2> + +<p>Esta tabela resume os possíveis valores que são retornados pelo <code>typeof</code>:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tipo</th> + <th scope="col">Resultado</th> + </tr> + </thead> + <tbody> + <tr> + <td>Undefined</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>Null</td> + <td><code>"object"</code></td> + </tr> + <tr> + <td>Boolean</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>Number</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>String</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>Host object (provided by the JS environment)</td> + <td><em>Implementation-dependent</em></td> + </tr> + <tr> + <td>Function object (implements [[Call]] in ECMA-262 terms)</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>E4X XML object</td> + <td>"xml"</td> + </tr> + <tr> + <td>E4X XMLList object</td> + <td>"xml"</td> + </tr> + <tr> + <td>Qualquer outro objeto</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Casos_comuns">Casos comuns</h3> + +<pre class="brush:js">// Números - Numéricos +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // Apesar de ser "Não-Numérico" +typeof Number(1) === 'number'; // mas nunca utilize desta forma! + +// Strings - Seqüências de caracteres +typeof "" === 'string'; +typeof "bla" === 'string'; +typeof (typeof 1) === 'string'; // typeof sempre retorna uma string +typeof String("abc") === 'string'; // mas nunca utilize desta forma! + +// Booleans - Lógicos booleanos +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(true) === 'boolean'; // mas nunca utilize desta forma! + +// Undefined - Indefinidos +typeof undefined === 'undefined'; +typeof blabla === 'undefined'; // uma variável indefinida + +// Objetos +typeof {a:1} === 'object'; +typeof [1, 2, 4] === 'object'; // use Array.isArray ou Object.prototype.toString.call para diferenciar os objetos das arrays +typeof new Date() === 'object'; + +typeof new Boolean(true) === 'object'; // isto é confuso, portanto não use desta forma! +typeof new Number(1) === 'object'; // isto é confuso, portanto não use desta forma! +typeof new String("abc") === 'object'; // isso também é confuso, assim evite usar esta construção! + +// Funções +typeof function(){} === 'function'; +typeof Math.sin === 'function'; +</pre> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js">// Desde os primóridos do JavaScript +typeof null === 'object'; +</pre> + +<p>Na primeira implementação do JavaScript, valores em JavaScript foram representados com uma tag (etiqueta) de tipo e um valor. A tag de tipo para objetos foi 0. <code>null</code> foi representada com o ponteiro NULL (0x00 na maioria das plataformas). Consequentemente, null teve 0 como sua tag de tipo, portanto o <code>typeof</code> retorna esse valor. (necessário referência)</p> + +<p>Está previsto <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">para ser corrigido na próxima versão do ECMAScript</a> (que estará disponível através de um opt-in). Isso resultará em um <code>typeof null === 'null'</code>.</p> + +<h3 id="Expressões_regulares">Expressões regulares</h3> + +<p>Expressões regulares que podem ser chamadas foram uma adição não-padrão em alguns browsers (<span id="result_box" lang="pt"><span class="hps">necessidade</span> <span class="hps">de referência</span> <span class="hps">para dizer</span> <span class="hps">qual</span></span>).</p> + +<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 ... // Não-conforme no ECMAScript 5.1 +typeof /s/ === 'object'; // Firefox 5+ ... // Conforme no ECMAScript 5.1 +</pre> + +<h3 id="Outras_peculiaridades">Outras peculiaridades</h3> + +<h4 id="alert_versões_antigas_do_Internet_Explorer"><code>alert</code> versões antigas do Internet Explorer</h4> + +<p>No IE 6, 7 e 8, <code>typeof alert === 'object'</code></p> + +<h2 id="Especificação">Especificação</h2> + +<p><a class="external" href="http://ecma-international.org/ecma-262/5.1/#sec-11.4.3">ECMA-262 section 11.4.3</a></p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Reference/Operators/instanceof" title="/en-US/docs/JavaScript/Reference/Operators/instanceof">instanceof</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/void/index.html b/files/pt-br/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..f3d4bf5c45 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/void/index.html @@ -0,0 +1,141 @@ +--- +title: void operator +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Operador + - Operadores + - unário +translation_of: Web/JavaScript/Reference/Operators/void +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>O <strong><code>operador void</code></strong> avalia a expressão dada e, em seguida, retorna {{jsxref("Global_Objects/undefined", "undefined")}}.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox" id="void_expressão">void <em>expressão</em></pre> + +<h2 id="Descrição">Descrição</h2> + +<p>Este operador permite a inserção de expressões que produzem efeitos secundários em lugares onde uma expressão que avalia a ação {{jsxref("Global_Objects/undefined", "undefined")}} é desejada.</p> + +<p>O operador <code>void</code> é muitas vezes utilizado apenas para obter o valor primitivo <code>undefined</code>, geralmente usando "<code>void(0)</code>" (o que equivale a "<code>void 0</code>"). Nestes casos, a variável global {{jsxref("Global_Objects/undefined", "undefined")}} pode ser utilizado em vez (supondo que ele não tenha sido atribuído a um valor não-padrão).</p> + +<h2 id="Chamada_imediata_das_expressões_da_função">Chamada imediata das expressões da função</h2> + +<p>Quando usamos uma <a href="/en-US/docs/Glossary/IIFE">Chamada imediata das expressões da função</a>, valores nulos podem ser usado para forçar a palavra-chave da função a ser tratada como uma expressão em vez de uma declaração.</p> + +<pre class="brush: js">void function iife() { + var bar = function () {}; + var baz = function () {}; + var foo = function () { + bar(); + baz(); + }; + var biz = function () {}; + + foo(); + biz(); +}(); +</pre> + +<h2 id="JavaScript_URIs">JavaScript URIs</h2> + +<p>Quando o navegador segue uma URI <code>javascript</code>, ele avalia o código na URI e então troca o conteúdo da página pelo valor retornado por este, a não ser que o valor retornado seja {{jsxref("Global_Objects/undefined", "undefined")}}. O operador <code>void</code> pode ser usado para retornar {{jsxref("Global_Objects/undefined", "undefined")}}. Por exemplo:</p> + +<pre class="brush: html"><a href="javascript:void(0);"> + Clique aqui para não fazer nada +</a> + +<a href="javascript:void(document.body.style.backgroundColor='green');"> + Clique aqui para o papel de parede ser verde +</a> +</pre> + +<p>Note que no entanto o pseudo protocolo <code>javascript:</code> tem seu uso desencorajado perante outras alternativas como <em>unobtrusive event handlers</em>.</p> + +<h2 id="Specificações">Specificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificação</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td>ECMAScript 1</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_dos_navegadores"><span class="short_text" id="result_box" lang="pt"><span class="hps">Compatibilidade dos navegadores</span></span></h2> + +<p>{{CompatibilityTable}}</p> + +<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><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/yield/index.html b/files/pt-br/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..f3fcb80345 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,181 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript 2015 + - Generators + - Iterator + - JavaScript + - Operador + - Operator +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A palavra-chave <code>yield</code> é usada para pausar e resumir uma generator function ({{jsxref("Statements/function*", "function*")}} or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">generator function legada</a>).</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expressão</em>];</pre> + +<dl> + <dt><code>expressão</code></dt> + <dd>Define o valor que retorna de uma generator function via <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">o protocolo iterator</a>. Se omitido, será retornado <code>undefined</code>.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Retorna o valor opcional passado para o metódo <code>next()</code> do generator e resume sua execução.</p> + </dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>A palavra-chave <code>yield</code> pausa a execução de uma generator function e o valor da expressão em frente a palavra-chave <code>yield</code> é retornado para a chamada do generator. Ele pode ser considerado uma versão da palavra-chave <code>return</code> para o generator.</p> + +<p>A palavra-chave <code>yield</code> atualmente retorna um objeto do tipo <code>IteratorResult</code> com duas propriedades, <code>value</code> e <code>done</code>. A propriedade <code>value</code> é o resultado da avaliação da expressão <code>yield</code>, e <code>done</code> é <code>false</code>, indicando que a generator function não foi totalmente completada.</p> + +<p>Uma vez pausado em uma expressão <code>yield</code>, a execução do código do generator permanece pausado até a próxima chamada do métod <code>next()</code>. Cada vez que o método <code>next()</code> do generator é chamado, o generator resume a execução e roda até atingir um dos seguintes estados:</p> + +<ul> + <li> Um <code>yield</code>, que causa a pausa do generator novamente e retorna seu novo valor. Na próxima vez que <code>next()</code> for chamado, a execução resumirá com a declaração imediamente após <code>yield</code>.</li> + <li>{{jsxref("Statements/throw", "throw")}} é usado para invocar uma exception à partir do generator. Isso irá parar completamente a execução do generator, e a execução resume para onde foi chamado o generator normalmente no caso que uma exception é invocada.</li> + <li>O final de uma generator function é atingido; nesse caso, a execução do generator termina e um <code>IteratorResult</code> é retornado para onde o generator foi chamado no qual o <code>value</code> é {{jsxref("undefined")}} e <code>done</code> é <code>true</code>.</li> + <li>Uma declaração {{jsxref("Statements/return", "return")}} é atingida. Nesse caso, a execução do generator termina e um <code>IteratorResult</code> é retornado para onde o generator foi chamado no qual o <code>value</code> é o valor especificado pela declaração <code>return</code> statement e <code>done</code> é <code>true</code>.</li> +</ul> + +<p>Se um valor opcional é passado para o método <code>next()</code> do generator, esse valor se torna o valor retornado pela operação <code>yield</code> atual do generator.</p> + +<p>Entre o caminho de código do generator, os seus operadores <code>yield</code>, e a habilidade de especificar um novo valor inicial passando isso para o {{jsxref("Generator.prototype.next()")}}, generators oferecem um poder e controle enormes</p> + +<h2 id="Exemplos">Exemplos</h2> + +<p>O código seguinte é a declaração de um exemplo de uma generator function.</p> + +<pre class="brush: js">function* foo() { + var index = 0; + while (index <= 2) + yield index++; +}</pre> + +<p>Uma vez que a generator function é definida, isso pode ser usada para construir um iterator como mostrado a seguir: </p> + +<pre class="brush: js">var iterator = foo(); +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> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>39</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_do_Firefox">Notas específicas do Firefox</h2> + +<ul> + <li>A partir do Gecko 29 {{geckoRelease(29)}}, uma generator function completada não invoca mais um {{jsxref("TypeError")}} "generator has already finished". Ao invés, isso retorna um objeto <code>IteratorResult</code> como <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li> + <li>A partir do Gecko 33 {{geckoRelease(33)}}, a análise (parsing) de uma expressão <code>yield</code> foi atualizada para se conformar com a especificação do ES2015 ({{bug(981599)}}): + <ul> + <li>A expressão após a palavra-chave <code>yield</code> é opcional e omitir isso não invoca mais um {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li> + </ul> + </li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">O protocolo Iterator</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/operators/yield_star_/index.html b/files/pt-br/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..0c68b357d5 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,210 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operador + - Operator + - Reference + - Referencia +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>A <strong>expressão</strong> <strong><code>yield*</code> </strong>é usada para delegar para outro objeto {{jsxref("Statements/function*", "generator")}} ou iterable.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox"> yield* [[expressão]];</pre> + +<dl> + <dt><code>expressão</code></dt> + <dd>A expressão que retorna um objeto iterable.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>A expressão <code>yield*</code> itera sobre a operação e yields cada valor retornado por ele.</p> + +<p>O valor da expressão <code>yield*</code> sozinha é o valor retornado pelo iterator quando ele for fechado (i.e., quando <code>done</code> é <code>true</code>).</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Delegando_para_outro_generator">Delegando para outro generator</h3> + +<p>No código seguinte, valores "yeldados" por <code>g1()</code> são retornados por <code>next()</code> chamam apenas os que foram "yeldados" por <code>g2()</code>.</p> + +<pre class="brush: js">function* g1() { + yield 2; + yield 3; + yield 4; +} + +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: 4, done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="Outros_objetos_Iterables">Outros objetos Iterables</h3> + +<p>Além de objetos generator, <code>yield*</code> também podem <code>yield</code> outros tipos de objetos iterables, e.g. arrays, strings ou objetos de argumentos.</p> + +<pre class="brush: js">function* g3() { + yield* [1, 2]; + yield* '34'; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: "3", done: false} +console.log(iterator.next()); // {value: "4", done: false} +console.log(iterator.next()); // {value: 5, done: false} +console.log(iterator.next()); // {value: 6, done: false} +console.log(iterator.next()); // {value: undefined, done: true} +</pre> + +<h3 id="O_valor_da_expressão_yield*_sozinha">O valor da expressão <code>yield*</code> sozinha</h3> + +<p><code>yield*</code> é uma expressão, não uma declaração, então ele espera um valor.</p> + +<pre class="brush: js">function* g4() { + yield* [1, 2, 3]; + return 'foo'; +} + +var result; + +function* g5() { + result = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // {value: 1, done: false} +console.log(iterator.next()); // {value: 2, done: false} +console.log(iterator.next()); // {value: 3, done: false} +console.log(iterator.next()); // {value: undefined, done: true}, + // g4() returned {value: 'foo', done: true} nesse ponto + +console.log(result); // "foo" +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Situação</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'Yield')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari("10")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_do_Firefox">Notas específicas do Firefox</h2> + +<ul> + <li>A partir do Gecko 33 {{geckoRelease(33)}}, o tratamento da expressão yield foi atualizado para se conformar com a espeficação do ES2015 ({{bug(981599)}}): + <ul> + <li>A restrição de linha finalizadora agora está implementada. Nenhuma linha finalizadora entre "yield" e "*" é permitida. Código como o a seguir irá invocar uma exception {{jsxref("SyntaxError")}}: + <pre class="brush: js">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">O protocolo Iterator</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> |