diff options
Diffstat (limited to 'files/pt-br/web/javascript/reference/global_objects/symbol')
15 files changed, 1381 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/asynciterator/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/asynciterator/index.html new file mode 100644 index 0000000000..0228a1dd81 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/asynciterator/index.html @@ -0,0 +1,75 @@ +--- +title: Symbol.asyncIterator +slug: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator +--- +<div>{{JSRef}}</div> + +<p>O <code><strong>Symbol.asyncIterator</strong></code> é um símbolo conhecido que especifica o padrão AsyncIterator para um objeto. Se essa propriedade é configurada em um objeto, é um iterável assíncrono e pode ser usado in um <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of">for await...of</a></code> loop.</p> + + + +<h2 id="Descrição">Descrição</h2> + +<p>O <code>Symbol.asyncIterator</code> é um símbolo built-in que é usado para um acessar o método <code>@@asyncIterator</code> de um objeto. Para que um objeto seja iterável assíncrono, ele deve ter uma chave <code>Symbol.asyncIterator</code>.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Iteráveis_assíncronos_definidos_pelo_usuário">Iteráveis assíncronos definidos pelo usuário</h3> + +<p>Você consegue definir seu próprio iterável assíncrono configurando a propriedade <code>[Symbol.asyncIterator]</code> em um objeto. </p> + +<pre class="brush: js notranslate">const myAsyncIterable = { + async* [Symbol.asyncIterator]() { + yield "hello"; + yield "async"; + yield "iteration!"; + } +}; + +(async () => { + for await (const x of myAsyncIterable) { + console.log(x); + // resultado esperado: + // "hello" + // "async" + // "iteration!" + } +})(); +</pre> + +<p>Quando criando uma API, lembre que iteráveis assíncronos são programados para representar algum iterável — como um fluxo de dados ou uma lista —, não para substituir completamente chamadas e eventos na maioria das situações.</p> + +<h3 id="Iteráveis_assíncronos">Iteráveis assíncronos</h3> + +<p>Não há atualmente objetos Javascript built-in que tenha a chave <code>[Symbol.asyncIterator]</code> configurada por padrão. Entretanto, a WHATWG Streams estão configurando para que o primeiro objeto built-in seja um iterável assíncrono, com a recente chegada do <code>[Symbol.asyncIterator]</code> nas especificações.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{compat("javascript.builtins.Symbol.asyncIterator")}}</p> + +<h2 id="Vejá_também">Vejá também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of">for await... of</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/description/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/description/index.html new file mode 100644 index 0000000000..207fc79fa9 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/description/index.html @@ -0,0 +1,61 @@ +--- +title: Symbol.prototype.description +slug: Web/JavaScript/Reference/Global_Objects/Symbol/description +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description +--- +<div>{{JSRef}}</div> + +<p>A propriedade leitura somente <code><strong>description</strong></code> é uma string que retorna a descrição opcional de objetos {{JSxRef("Symbol")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<p>{{JSxRef("Symbol")}} objetos podem ser criados com uma uma descrição opcional na qual podem ser usados para debbuging mas não para acessar o próprio símbolo. A <code>Symbol.prototype.description</code> propriedade pode ser usada para ler essa descrição. É diferente do <code>Symbol.prototype.toString()</code> pois não contém a string incluida "<code>Symbol()</code>". Veja os exemplos.</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_descrição">Usando descrição</h3> + +<pre class="brush: js notranslate">Symbol('desc').toString(); // "Symbol(desc)" +Symbol('desc').description; // "desc" +Symbol('').description; // "" +Symbol().description; // undefined + +// símbolos conhecidos +Symbol.iterator.toString(); // "Symbol(Symbol.iterator)" +Symbol.iterator.description; // "Symbol.iterator" + +// símbolos globais +Symbol.for('foo').toString(); // "Symbol(foo)" +Symbol.for('foo').description; // "foo" + +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-symbol.prototype.description", "get Symbol.prototype.description")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.description")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{JSxRef("Symbol.prototype.toString()")}}</li> + <li>Polyfill: <a href="https://npmjs.com/symbol.prototype.description">https://npmjs.com/symbol.prototype.description</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/hasinstance/index.html new file mode 100644 index 0000000000..b40b57a3c4 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/hasinstance/index.html @@ -0,0 +1,114 @@ +--- +title: Symbol.hasInstance +slug: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +tags: + - Propriedade + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +--- +<div>{{JSRef}}</div> + +<p>O symbol bem-conhecido <strong><code>Symbol.hasInstance</code></strong> é usado para determinar se um objeto construtor reconhece um objeto como de sua instância. O comportamento do operador {{jsxref("Operators/instanceof", "instanceof")}} pode ser customizado por este symbol.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Exemplos">Exemplos</h2> + +<p>Você pode implementar o comportamento customizado do seu <code>instanceof</code> deste jeito; por exemplo:</p> + +<pre class="brush: js">class MyArray { + static [Symbol.hasInstance](instance) { + return this.prototype.isPrototypeOf(instance) || + Array.isArray(instance); + } +} + +console.log([] instanceof MyArray); // true +console.log(new MyArray instanceof MyArray); // true +console.log(new Image instanceof MyArray); // false + +class MySubArray extends MyArray {} +console.log(new MySubArray instanceof MySubArray); // true +console.log(new MySubArray instanceof MyArray); // true +console.log(new MyArray instanceof MySubArray); // false</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os 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(51)}}</td> + <td>{{ CompatGeckoDesktop(50) }}</td> + <td>{{CompatNo}}</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>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>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(50) }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Global_Objects/Object/isPrototypeOf", "isPrototypeOf()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..f4414ffe16 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,301 @@ +--- +title: Símbolo +slug: Web/JavaScript/Reference/Global_Objects/Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +<div>{{JSRef("Global_Objects", "Symbol")}}</div> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>A função <code>Symbol()</code> retorna um valor do tipo <strong>símbolo (symbol)</strong>, tem propriedades estáticas que expõem vários membros dos objetos nativos, possuem métodos estáticos que expõem o registro de símbolos globais e se parecem com uma classe de objeto nativo, mas estão incompletos como construtor porque não suportam a sintaxe "<code>new Symbol()</code>" .</p> + +<p>Cada valor símbolo retornado de <code>Symbol()</code> é único. Um símbolo pode ser usado como o identificador para propriedades de objetos; esse é o único propósito do tipo de dado. Algumas explicações sobre propósito e uso podem ser encontradas {{Glossary("Symbol", "no verbete do glossário para Symbol")}}.</p> + +<p>O tipo de dado <strong>símbolo</strong> é um {{Glossary("Primitive", "tipo de dado primitivo")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><code>Symbol(<em>[descrição]</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametros</h3> + +<dl> + <dt><code>descrição</code> {{optional_inline}}</dt> + <dd>String opcional. Uma descrição de símbolo no qual pode ser usado para debugar mas não para acessar o próprio símbolo.</dd> +</dl> + +<h2 id="Description" name="Description">Descrição</h2> + +<p>Para criar um novo simbolo primitivo, simplesmente escreva <code>Symbol()</code> com uma string opçional para sua descrição:</p> + +<pre class="brush: js notranslate">var sym1 = Symbol(); +var sym2 = Symbol("foo"); +var sym3 = Symbol("foo"); +</pre> + +<p>O codigo acima cria três simbolos novos. Note que a função <strong><em>Symbol("foo")</em></strong> não faz a string <strong><em>"foo"</em></strong> ser um símbolo. Ela cria um novo simbolo a cada vez que é chamada:</p> + +<pre class="brush: js notranslate">Symbol("foo") === Symbol("foo"); // false</pre> + +<p>A sintaxe a seguir com o operador {{jsxref("Operators/new", "new")}} vai resultar em um {{jsxref("TypeError")}}:</p> + +<pre class="brush: js notranslate">var sym = new Symbol(); // TypeError +</pre> + +<p>Isso evita que os autores criem um objeto empacotador explícito de <code>Symbol</code> em vez de um novo valor de símbolo. O que pode surpreender, pois geralmente é possível criar objetos empacotadores explícitos em torno de tipos de dados primitivos (por exemplo, <code>new Boolean</code>, <code>new String</code> e <code>new Number</code>).</p> + +<p>Se você realmente quiser criar um objeto empacotador de <code>Symbol</code> , você pode usar a função <code>Object()</code>:</p> + +<pre class="brush: js notranslate">var sym = Symbol("foo"); +typeof sym; // "symbol" +var symObj = Object(sym); +typeof symObj; // "object" +</pre> + +<h3 id="Símbolos_compartilhados_no_registro_global_de_símbolo">Símbolos compartilhados no registro global de símbolo</h3> + +<p>A sintaxe acima usando a função <code>Symbol()</code> não criará um símbolo global que estará disponível em todo o seu código. Para criar símbolos disponíveis em vários arquivos em um escopo como se fosse global, use os métodos {{jsxref("Symbol.for()")}} e {{jsxref("Symbol.keyFor()")}} para definir e configurar símbolos no registro global de símbolo.</p> + +<h3 id="Encontrando_propriedades_de_símbolos_em_objetos">Encontrando propriedades de símbolos em objetos</h3> + +<p>O método {{jsxref("Object.getOwnPropertySymbols()")}} retorna um array de símbolos e permite que você encontre propriedades de símbolos em um determinado objeto. Observe que cada objeto é inicializado sem suas próprias propriedades de símbolo, de modo que este array estará vazio, a menos que você estabeleça propriedades de símbolo no objeto.</p> + +<h2 id="Properties" name="Properties">Propriedades</h2> + +<dl> + <dt><code>Symbol.length</code></dt> + <dd>Propriedade de tamanho cujo valor é 1.</dd> + <dt>{{jsxref("Symbol.prototype")}}</dt> + <dd>Representa o protótipo do <code>Symbol</code> construtor.</dd> +</dl> + +<h3 id="Símbolos_conhecidos">Símbolos conhecidos</h3> + +<p>Em adição para seus próprios símbolos, JavaScript possui alguns símbolos built-in que representa os comportamentos internos da linguagem que não foram revelados para os desenvolvedores no ECMAScript 5 e anterior. Esses símbolos podem ser acessados usando as seguintes propriedades:</p> + +<dl> + <dt>Symbol.hasInstance</dt> + <dd>Especificado como @@hasInstance. Um método que determina se um construtor de um objeto é reconhecido como a instancia de um objeto. Usado por {{jsxref("Operators/instanceof", "instanceof")}}.</dd> + <dt>Symbol.isConcatSpreadable</dt> + <dd>Especificado como @@isConcatSpreadable. Um valor Booleano indicando se um objeto deve ser adicionado como elemento de uma array. Usado por {{jsxref("Array.prototype.concat()")}}.</dd> + <dt>Symbol.isRegExp</dt> + <dd>Especificado como @@isRegExp. Um valor Booleano indicando se um objeto pode ser usado como uma expressão regular.</dd> + <dt>Symbol.iterator</dt> + <dd>Especificado como @@iterator. Um método retornando o iterador padrão para um objeto. Usado por <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd> + <dt>Symbol.toPrimitive</dt> + <dd>Especificado como @@toPrimitive. Um método convertendo um objeto para um valor primitivo .</dd> + <dt>Symbol.toStringTag</dt> + <dd>Especificado como @@toStringTag. Um valor string usado para descrição padrão de um objeto. Usado por {{jsxref("Object.prototype.toString()")}}</dd> + <dt>Symbol.unscopables</dt> + <dd>Especificado como @@unscopables. Uma Array com valores string que são valores propriedade. Esses são excluídos das ligações com o objeto associado.</dd> +</dl> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<dl> + <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> + <dd>Procura por símbolos existentes com as chaves dada e retorna as chaves se for encontradas. Caso contrário um novo símbolo vai ser criado no registro de símbolo global com essa chave.</dd> + <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> + <dd>Retorna um símbolo compartilhado do registro global de símbolo para o símbolo dado.</dd> +</dl> + +<h2 id="Boolean_instances" name="Boolean_instances"><code>Symbol</code> protótipo</h2> + +<p>Todos os símbolos herdados de {{jsxref("Symbol.prototype")}}.</p> + +<h3 id="Propriedades">Propriedades</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p> + +<h3 id="Métodos">Métodos</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p> + +<h2 id="Examples" name="Examples">Exemplos</h2> + +<h3 id="Creating_Boolean_objects_with_an_initial_value_of_false" name="Creating_Boolean_objects_with_an_initial_value_of_false">Usando o <code>typeof</code> operador com símbolos</h3> + +<p>O {{jsxref("Operators/typeof", "typeof")}} operador pode ajudar a identificar os símbolos.</p> + +<pre class="brush: js notranslate">typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' +</pre> + +<h3 id="Conversões_de_tipos_de_símbolo">Conversões de tipos de símbolo</h3> + +<p>Algumas anotações quando trabalhando com conversão de tipo de símbolos.</p> + +<ul> + <li>Quando estiver tentando converter um símbolo para um número, um {{jsxref("TypeError")}} vai ser retornado.<br> + (e.g. <code>+sym</code> or <code>sym | 0</code>).</li> + <li>Quando usando operador de igualdade , <code>Object(sym) == sym</code> retorna <code>true.</code></li> + <li><code>Symbol("foo") + "bar" </code>lança um {{jsxref("TypeError")}} (não pode converter um símbolo para string). Isso previne você de silenciamente criar um novo nome de propriedade string a partir de um símbolo, por exemplo.</li> + <li>A <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(sym)</code> conversion</a> funciona como uma chamada para {{jsxref("Symbol.prototype.toString()")}} com símbolos, mas note que uma <code>new String(sym)</code> vai ser lançada.</li> +</ul> + +<h3 id="Símbolos_e_for...in_iteração">Símbolos e <code>for...in</code> iteração</h3> + +<p>Símbolos não são visíveis em <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> iterações. Além de , {{jsxref("Object.getOwnPropertyNames()")}} não retornará o objeto símbolo propriedade, entretante, você pode fazer uso do {{jsxref("Object.getOwnPropertySymbols()")}} para conseguir esses resultados.</p> + +<pre class="brush: js notranslate">var obj = {}; + +obj[Symbol("a")] = "a"; +obj[Symbol.for("b")] = "b"; +obj["c"] = "c"; +obj.d = "d"; + +for (var i in obj) { + console.log(i); // logs "c" and "d" +}</pre> + +<h3 id="Símbolos_e_JSON.stringify">Símbolos e <code>JSON.stringify()</code></h3> + +<p>Propriedade com chave de símbolo vão ser completamente ignoradas quando usando <code>JSON.stringify()</code>:</p> + +<pre class="brush: js notranslate">JSON.stringify({[Symbol("foo")]: "foo"}); +// '{}'</pre> + +<p>Para mais detalhes, veja {{jsxref("JSON.stringify()")}}.</p> + +<h3 id="Objeto_wrapper_de_símbolo_como_chave_de_propriedade">Objeto wrapper de símbolo como chave de propriedade</h3> + +<p>Quando um objeto wrapper de um símbolo é usado como uma chave de propriedade , esse objeto vai ser coerced para o seu símbolo wrapper:</p> + +<pre class="brush: js notranslate">var sym = Symbol("foo"); +var obj = {[sym]: 1}; +obj[sym]; // 1 +obj[Object(sym)]; // still 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('ES2015', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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(38)}}</td> + <td>{{CompatGeckoDesktop("36.0")}}</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Symbol.iterator (@@iterator)</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoDesktop("36.0")}}</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Symbol.unscopables (@@unscopables)</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td> + <div>{{ CompatNo() }}</div> + </td> + </tr> + <tr> + <td>Other well-known symbols</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatGeckoMobile("36.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Symbol.iterator (@@iterator)</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatGeckoMobile("36.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td> + <div>Symbol.unscopables (@@unscopables)</div> + </td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>25</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Other well-known symbols</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html new file mode 100644 index 0000000000..f969972692 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html @@ -0,0 +1,93 @@ +--- +title: Symbol.isConcatSpreadable +slug: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable +--- +<div>{{JSRef}}</div> + +<p>O <strong><code>Symbol.isConcatSpreadable</code></strong> é um símbolo conhecido que é usado para configurar se um objeto deve ser achatado para um elemento da array quando usado o método {{jsxref("Array.prototype.concat()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<p>O <code>@@isConcatSpreadable</code> símbolo (<code>Symbol.isConcatSpreadable</code>) pode também ser definido como uma propriedade própria ou herdada e seu valor é um booleano. Ele consegue controlar o comportamento das arrays e objetos semelhantes a array:</p> + +<ul> + <li>For array objects, the default behavior is to spread (flatten) elements. <code>Symbol.isConcatSpreadable</code> can avoid flattening in these cases.</li> + <li>For array-like objects, the default behavior is no spreading or flattening. <code>Symbol.isConcatSpreadable</code> can force flattening in these cases.</li> +</ul> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Arrays">Arrays</h3> + +<p>Por padrão, o {{jsxref("Array.prototype.concat()")}} espalha (alinha) arrays no seus resultados:</p> + +<pre class="brush: js notranslate">let alpha = ['a', 'b', 'c'], +let numeric = [1, 2, 3] + +let alphaNumeric = alpha.concat(numeric) + +console.log(alphaNumeric) // Resultado: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<p>Quando configurando o <code>Symbol.isConcatSpreadable</code> para <code>false</code>, o comportamento padrão dele:</p> + +<pre class="brush: js notranslate">let alpha = ['a', 'b', 'c'], +let numeric = [1, 2, 3] + +numeric[Symbol.isConcatSpreadable] = false +let alphaNumeric = alpha.concat(numeric) + +console.log(alphaNumeric) // Resultado: ['a', 'b', 'c', [1, 2, 3] ] +</pre> + +<h3 id="Objetos_de_array_semelhantes">Objetos de array semelhantes </h3> + +<p>Para objetos de array semelhantes, o padrão não é espalhado. <code>Symbol.isConcatSpreadable</code>precisa ser configurado para <code>true</code> para poder conseguir um a array alinhada:</p> + +<pre class="brush: js notranslate">let x = [1, 2, 3] + +let fakeArray = { + [Symbol.isConcatSpreadable]: true, + length: 2, + 0: 'hello', + 1: 'world' +} + +x.concat(fakeArray) // [1, 2, 3, "hello", "world"] +</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> A propriedade <code>length</code> é usada para controlar o número de propriedade dos objetos para ser adicionado. No exemplo acima, <code>length:2</code> indica que duas propriedades tem de ser adicionado.</p> +</div> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/iterator/index.html new file mode 100644 index 0000000000..99e910ce5b --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/iterator/index.html @@ -0,0 +1,107 @@ +--- +title: Symbol.iterator +slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +--- +<div>{{JSRef}}</div> + +<p>O símbolo conhecido <code><strong>Symbol.iterator</strong></code> especifíca o iterador padrão para um objeto. Usado por <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<p>Sempre que um objeto precisa ser iterado (como um começo de um <code>for..of</code> loop), o método <code>@@iterator</code> é chamado sem argumentos, e o <strong>iterador</strong> retornado é usado para obter os valores para serem iterados.</p> + +<p>Alguns tipos built-in tem um comportamento padrão de iteração, enquanto outros tipos (assim como {{jsxref("Object")}}) não tem. O tipo built-in com um método <code>@@iterator</code> são:</p> + +<ul> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> + +<p>Veja também <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a> para mais informação.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Iteráveis_definidos_pelo_usuário">Iteráveis definidos pelo usuário</h3> + +<p>Podemos fazer nosso próprio iterável dessa forma:</p> + +<pre class="brush: js notranslate">var myIterable = {} +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; +[...myIterable] // [1, 2, 3] +</pre> + +<p>Ou iteráveis podem ser definidos diretamente dentro de uma classe ou um objeto usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">computed property</a>:</p> + +<pre class="brush: js notranslate">class Foo { + *[Symbol.iterator] () { + yield 1; + yield 2; + yield 3; + } +} + +const someObj = { + *[Symbol.iterator] () { + yield 'a'; + yield 'b'; + } +} + +[...new Foo] // [ 1, 2, 3 ] +[...someObj] // [ 'a', 'b' ] +</pre> + +<h3 id="Iteráveis_não_bem_formados">Iteráveis não bem formados</h3> + +<p>Se um método <code>@@iterator</code> não retornar um objeto iterador, então é um iterável não bem formado. Usando dessa forma é resultará em uma excessão de tempo ou comportamentos com erros:</p> + +<pre class="brush: js notranslate">var nonWellFormedIterable = {} +nonWellFormedIterable[Symbol.iterator] = () => 1 +[...nonWellFormedIterable] // TypeError: [] is not a function +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/match/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/match/index.html new file mode 100644 index 0000000000..34773830af --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/match/index.html @@ -0,0 +1,65 @@ +--- +title: Symbol.match +slug: Web/JavaScript/Reference/Global_Objects/Symbol/match +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match +--- +<div>{{JSRef}}</div> + +<p>O símbolo <code><strong>Symbol.match</strong></code> é conhecido por especificar a compatibilidade de uam expressão regular contra uma string. Essa função é chamada pelo método {{jsxref("String.prototype.match()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-match.html")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<p>Essa função também é usada para identificar se um objeto tem o comportamento de uma expressão regular. Por exemplo, os métodos {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} e {{jsxref("String.prototype.includes()")}}, verificar se o primeiro agumento é uma expressão regular e irá lançar um {{jsxref("TypeError")}} se eles forém. Agora, se o símbolo <code>match</code> é configurado para <code>false</code> (ou um valor <a href="/en-US/docs/Glossary/Falsy">Falsy</a> ), ele indica que o objeto não tem intensão de ser usado como um ojbeto de expressão regular </p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Desativando_a_verificação_isRegExp">Desativando a verificação <code>isRegExp</code> </h3> + +<p>O seguinte código vai lançar um {{jsxref("TypeError")}}:</p> + +<pre class="brush: js notranslate">'/bar/'.startsWith(/bar/); + +// Lança um TypeError, como /bar/ é uma expressão regular +// não Symbol.match não é modificado.</pre> + +<p>Entretanto, se você configurar <code>Symbol.match</code> para <code>false</code>, a verificação <code>isRegExp </code>(que usa a propriedade <code>match</code> ) que o objeto não é uma expressão regular. O método <code>startsWith</code> e <code>endsWith</code> não vão lançar um <code>TypeError</code> como consequência.</p> + +<pre class="brush: js notranslate">var re = /foo/; +re[Symbol.match] = false; +'/foo/'.startsWith(re); // true +'/baz/'.endsWith(re); // false +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.match")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Symbol.replace")}}</li> + <li>{{jsxref("Symbol.search")}}</li> + <li>{{jsxref("Symbol.split")}}</li> + <li>{{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/matchall/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/matchall/index.html new file mode 100644 index 0000000000..7874646623 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/matchall/index.html @@ -0,0 +1,72 @@ +--- +title: Symbol.matchAll +slug: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll +--- +<div>{{JSRef}}</div> + +<p>O símbolo <code><strong>Symbol.matchAll</strong></code> é conhecido por retornar um iterador, que produz conrrespondências de uma expressão regular com uma string. Essa função é usada pelo método {{jsxref("String.prototype.matchAll()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-matchall.html","shorter")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<div> +<p>Esse símbolo é usado pelo {{jsxref("String.prototype.matchAll()")}} e especificado no {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Os próximos dois exemplos retornam o mesmo resultado:</p> + +<pre class="brush: js notranslate">'abc'.matchAll(/a/); + +/a/[Symbol.matchAll]('abc');</pre> + +<p>Esse método existe para costumizar o comportamento conrrespondente com as subclasses {{jsxref("RegExp")}}.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> +</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usuando_Symbol.matchAll">Usuando Symbol.matchAll</h3> + +<pre class="brush: js notranslate">let re = /[0-9]+/g; +let str = '2016-01-02|2019-03-07'; + +const numbers = { + *[Symbol.matchAll] (str) { + for (const n of str.matchAll(/[0-9]+/g)) + yield n[0]; + } +}; + +console.log(Array.from(str.matchAll(numbers))); +// Array ["2016", "01", "02", "2019", "03", "07"] +</pre> + +<p>Veja {{jsxref("String.prototype.matchAll()")}} e {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}} para mais exemplos.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.matchAll")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("String.prototype.matchAll()")}}</li> + <li>{{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/replace/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/replace/index.html new file mode 100644 index 0000000000..f69a22537d --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/replace/index.html @@ -0,0 +1,60 @@ +--- +title: Symbol.replace +slug: Web/JavaScript/Reference/Global_Objects/Symbol/replace +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace +--- +<div>{{JSRef}}</div> + +<p>O símbolo <code><strong>Symbol.replace</strong></code> é conhecido por especificar o método que substitui as substrings conrrespondentes de uma string. Essa função é chamada pelo método {{jsxref("String.prototype.replace()")}}.</p> + +<p>Para mais informações, veja {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} e {{jsxref("String.prototype.replace()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}</div> + + + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_Symbol.replace">Usando Symbol.replace</h3> + +<pre class="brush: js notranslate">class CustomReplacer { + constructor(value) { + this.value = value; + } + [Symbol.replace](string) { + return string.replace(this.value, '#!@?'); + } +} + +console.log('football'.replace(new CustomReplacer('foo'))); +// resultado esperado: "#!@?tball"</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.replace")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Symbol.match")}}</li> + <li>{{jsxref("Symbol.search")}}</li> + <li>{{jsxref("Symbol.split")}}</li> + <li>{{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/search/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/search/index.html new file mode 100644 index 0000000000..e2f71e3438 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/search/index.html @@ -0,0 +1,60 @@ +--- +title: Symbol.search +slug: Web/JavaScript/Reference/Global_Objects/Symbol/search +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search +--- +<div>{{JSRef}}</div> + +<p>O símbolo <code><strong>Symbol.search</strong></code> é um método conhecido por retornar o índice com uma string que corresponde a expressão regular. Essa função é chamada pelo método {{jsxref("String.prototype.search()")}}.</p> + +<p>Para mais informação, veja {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} e {{jsxref("String.prototype.search()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-search.html")}}</div> + + + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Pesquisa_de_string_personalizada">Pesquisa de string personalizada</h3> + +<pre class="brush: js notranslate">class caseInsensitiveSearch { + constructor(value) { + this.value = value.toLowerCase(); + } + [Symbol.search](string) { + return string.toLowerCase().indexOf(this.value); + } +} + +console.log('foobar'.search(new caseInsensitiveSearch('BaR'))); +// resultado esperado: 3</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.search")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Symbol.match")}}</li> + <li>{{jsxref("Symbol.replace")}}</li> + <li>{{jsxref("Symbol.split")}}</li> + <li>{{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/species/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/species/index.html new file mode 100644 index 0000000000..fcf636c175 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/species/index.html @@ -0,0 +1,63 @@ +--- +title: Symbol.species +slug: Web/JavaScript/Reference/Global_Objects/Symbol/species +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species +--- +<div>{{JSRef}}</div> + +<p>O símbolo <code><strong>Symbol.species</strong></code> especifica uma propriedade valor-função que a função construtora usa para criar objetos derivados.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-species.html")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<p>A propriedade acessora de espécies permite que subclasses substituam o construtor padrão para objetos.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Usando_espécies">Usando espécies</h3> + +<p>Você pode querer que retorne objetos {{jsxref("Array")}} em sua class derivada de array <code>MyArray</code>. Por exemplo, quando usar métodos tais como {{jsxref("Array.map", "map()")}} que retorna o construtor padrão, você quer que esses métodos retornem um objeto <code>Array</code> pai, em vez do objeto <code>MyArray</code>. Esses símbolos espécies permitem que você fala isso:</p> + +<pre class="brush: js notranslate">class MyArray extends Array { + // Substitui espécies para a Array pai construtora + static get [Symbol.species]() { return Array; } +} +let a = new MyArray(1,2,3); +let mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.species")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Map.@@species", "Map[@@species]")}}</li> + <li>{{jsxref("Set.@@species", "Set[@@species]")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/split/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/split/index.html new file mode 100644 index 0000000000..c6b9e13fd3 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/split/index.html @@ -0,0 +1,60 @@ +--- +title: Symbol.split +slug: Web/JavaScript/Reference/Global_Objects/Symbol/split +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split +--- +<div>{{JSRef}}</div> + +<p>O <code><strong>Symbol.split</strong></code> é um símbolo conhecido que especifica o método que divide uma string nos índices correspondentes a uma expressão regular. Essa função é chamada pelo método {{jsxref("String.prototype.split()")}}.</p> + +<p>Para mais informações, veja {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} e {{jsxref("String.prototype.split()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-split.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> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Divisão_reversa_personalizada">Divisão reversa personalizada</h3> + +<pre class="brush: js notranslate">class ReverseSplit { + [Symbol.split](string) { + const array = string.split(' '); + return array.reverse(); + } +} + +console.log('Another one bites the dust'.split(new ReverseSplit())); +// resultado esperado: [ "dust", "the", "bites", "one", "Another" ]</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.split")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Symbol.match")}}</li> + <li>{{jsxref("Symbol.replace")}}</li> + <li>{{jsxref("Symbol.search")}}</li> + <li>{{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/toprimitive/index.html new file mode 100644 index 0000000000..97734f23e2 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/toprimitive/index.html @@ -0,0 +1,75 @@ +--- +title: Symbol.toPrimitive +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +--- +<div>{{JSRef}}</div> + +<p>O <code><strong>Symbol.toPrimitive</strong></code> é um símbolo que específica uma propriedade com valor função que é chamada para converter um ojbeto para um valor primitivo correspondente. </p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<p>Com a ajuda da propriedade <strong><code>Symbol.toPrimitive</code></strong> (usada como uma função valor), um objeto pode ser convertido para um valor primitivo. a função é chamada com um argumento string <strong><code>hint</code></strong>, que espcífica o tipo de preferência do resultado do valor primitivo. O argumento <strong><code>hint</code></strong> pode ser um <code>"<em>number</em>"</code>, <code>"<em>string</em>"</code>, e <code>"<em>default</em>"</code>.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Modificando_valores_primitivos_convertendo_para_um_objeto">Modificando valores primitivos convertendo para um objeto</h3> + +<p>O exemplo a seguir descreve que a propriedade <strong><code>Symbol.toPrimitive</code></strong> pode ser modificar o valor primitivo convertendo para um objeto.</p> + +<pre class="brush: js notranslate">// Um objeto sem propriedade Symbol.toPrimitive. +var obj1 = {}; +console.log(+obj1); // NaN +console.log(`${obj1}`); // "[object Object]" +console.log(obj1 + ''); // "[object Object]" + +// Um objeto com propriedade Symbol.toPrimitive +var obj2 = { + [Symbol.toPrimitive](hint) { + if (hint == 'number') { + return 10; + } + if (hint == 'string') { + return 'hello'; + } + return true; + } +}; +console.log(+obj2); // 10 -- dica é "number" +console.log(`${obj2}`); // "hello" -- dica é "string" +console.log(obj2 + ''); // "true" -- dica é "default" +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.toPrimitive")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}</li> + <li>{{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}</li> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/tostringtag/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/tostringtag/index.html new file mode 100644 index 0000000000..1418ff89c0 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/tostringtag/index.html @@ -0,0 +1,92 @@ +--- +title: Symbol.toStringTag +slug: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag +--- +<div>{{JSRef}}</div> + +<p>O símbolo <strong><code>Symbol.toStringTag</code></strong> é uma propriedade com valor string que é usada para a criação de uma descrição de string de um objeto padrão. É acessado internalmente pelo método {{jsxref("Object.prototype.toString()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-tostringtag.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> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Tags_padrões">Tags padrões</h3> + +<pre class="brush: js notranslate">Object.prototype.toString.call('foo'); // "[object String]" +Object.prototype.toString.call([1, 2]); // "[object Array]" +Object.prototype.toString.call(3); // "[object Number]" +Object.prototype.toString.call(true); // "[object Boolean]" +Object.prototype.toString.call(undefined); // "[object Undefined]" +Object.prototype.toString.call(null); // "[object Null]" +// ... e mais +</pre> + +<h3 id="Símbolos_built-in_toStringTag">Símbolos built-in toStringTag </h3> + +<pre class="brush: js notranslate">Object.prototype.toString.call(new Map()); // "[object Map]" +Object.prototype.toString.call(function* () {}); // "[object GeneratorFunction]" +Object.prototype.toString.call(Promise.resolve()); // "[object Promise]" +// ... e mais +</pre> + +<h3 id="Classes_personalizadas_para_objeto_tag">Classes personalizadas para objeto tag</h3> + +<p>Quando cria sua própria classe, o JavaScript padroniza para "Object" tag:</p> + +<pre class="brush: js notranslate">class ValidatorClass {} + +Object.prototype.toString.call(new ValidatorClass()); // "[object Object]" +</pre> + +<h3 id="Tag_costumizada_com_toStringTag">Tag costumizada com toStringTag</h3> + +<p>Agora, com a ajuda do <code>toStringTag</code>, você é capaz de costumizar sua própria tag:</p> + +<pre class="brush: js notranslate">class ValidatorClass { + get [Symbol.toStringTag]() { + return 'Validator'; + } +} + +Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]" +</pre> + +<h3 id="toStringTag_disponível_em_todos_os_objetos_protótipos_da_DOM">toStringTag disponível em todos os objetos protótipos da DOM </h3> + +<p>Devido a uma mudança nas especificações <a href="https://github.com/heycam/webidl/pull/357">WebIDL spec change</a> em meados de 2020, navegadores estão adicionando uma propriedade <code>Symbol.toStringTag</code> para todos os objetos protótipos da DOM . Por exemplo, para acessar a propriedade <code>Symbol.toStringTag</code> no {{domxref("HTMLButtonElement")}}:</p> + +<pre class="brush: js notranslate">let test = document.createElement('button'); +test.toString(); // Retorna [object HTMLButtonElement] +test[Symbol.toStringTag]; // Retona HTMLButtonElement</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.toStringTag")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/pt-br/web/javascript/reference/global_objects/symbol/unscopables/index.html new file mode 100644 index 0000000000..f1f76c2177 --- /dev/null +++ b/files/pt-br/web/javascript/reference/global_objects/symbol/unscopables/index.html @@ -0,0 +1,83 @@ +--- +title: Symbol.unscopables +slug: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +--- +<div>{{JSRef}}</div> + +<p>O símbolo <strong><code>Symbol.unscopables</code></strong> é usado para específicar um valor objeto cujo os nomes de propriedade próprio e herdados são excluídos das associações do ambiente <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> o objeto associado. </p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}</div> + + + +<h2 id="Descrição">Descrição</h2> + +<p>O <code>@@unscopables</code> símbolo (<code>Symbol.unscopables</code>) pode ser definido em qualquer objeto para impedir que os nomes da propriedade sejam expostos como variavéis lexicais <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> ligações de ambiente. Note que se usar o <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a>, <code>with</code> as declarações não estão disponíveis e provavelmente não haverá necessidade desse símbolo.</p> + +<p>Configurando a propriedade para <code>true</code> em um objeto <code>unscopables</code> tornará ele não <em>unscopable</em> e portanto não irá apareer nas variavéis de escopo lexicais. Configurando uma propriedade para <code>false</code> o tornará <code>scopable</code> e portanto irá aparecer no escopo de variavéis lexicais.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Escopo_com_declarações">Escopo com declarações</h3> + +<p>O seguinte código funciona normalmente no ES5 e anteriores. Entretanto, no ECMAScript 2015 e superiores, o método {{jsxref("Array.prototype.keys()")}} foi introduzido. Isso significa que dentro do ambiente <code>with</code> "chaves" seria agora o método e não as variavéis. Isso qunado os símbolos <code>unscopable</code>s foram introduzidos. Uma confiração built-in <code>unscopables</code> é implementada como {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}} para prevenir que alguns métodos de Array tenham escopo definido na desclaração <code>with</code>.</p> + +<pre class="brush: js notranslate">var keys = []; + +with (Array.prototype) { + keys.push('something'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"] +</pre> + +<h3 id="Objetos_não_escopáveis">Objetos não escopáveis</h3> + +<p>Você também pode configurar <code>unscopables</code> para seu próprio objeot.</p> + +<pre class="brush: js notranslate">var obj = { + foo: 1, + bar: 2 +}; + +obj[Symbol.unscopables] = { + foo: false, + bar: true +}; + +with (obj) { + console.log(foo); // 1 + console.log(bar); // ReferenceError: bar is not defined +} +</pre> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.unscopables")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> statement (not available in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a>)</li> +</ul> |