PageSourceSearch

https://jeffersondrsblog.vercel.app/post/javascript

html jeffersondrsblog.vercel.app collected 2026-10-03 07:08:43 UTC 33,176 bytes, 26 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/><link rel="icon" type="image/x-icon" href="https://img.icons8.com/nolan/512/happy-skull.png"/><link rel="preload" href="/_next/static/css/fac4dac50944d251.css" as="style"/><link rel="stylesheet" href="/_next/static/css/fac4dac50944d251.css" data-n-g=""/><link rel="preload" href="/_next/static/css/15cbae759d1218d5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/15cbae759d1218d5.css" data-n-p=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-69db33922baa0ba7.js" defer=""></script>
1<script src="/_next/static/chunks/framework-363bae7ec5ec9684.js" defer=""></script>
1<script src="/_next/static/chunks/main-0238e8cb4dff9bf8.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-a4971e0b431cbaf1.js" defer=""></script>
1<script src="/_next/static/chunks/426-e751252ccd144bc6.js" defer=""></script>
1<script src="/_next/static/chunks/pages/post/%5Bslug%5D-9dfeacbb3edd9cab.js" defer=""></script>
1<script src="/_next/static/Zbx6N_VZ_gOQAiU99ecsj/_buildManifest.js" defer=""></script>
1<script src="/_next/static/Zbx6N_VZ_gOQAiU99ecsj/_ssgManifest.js" defer=""></script>
1</head><body><div id="__next"><div class="container mx-auto px-10 mb-3"><div class="w-full py-4 flex flex-row justify-between items-center"><div class="mb:float-left block"><a href="/"><div><div class="flex flex-row gap-2 items-center"><span class="text-base bg-yellow-400 p-1" style="opacity:1;will-change:transform;transform:translateX(-30px)">J</span><p class="text-sm px-1 text-white" style="opacity:0;will-change:opacity">efferson</p></div><div class="flex flex-row gap-2 items-center"><span class="text-base bg-yellow-400 p-1" style="opacity:1;will-change:transform;transform:translateY(-30px)">S</span><p class="text-sm px-1 text-white" style="opacity:0;will-change:opacity,transform">antos</p></div></div></a></div><div><div class="hidden md:float-right md:contents"></div></div></div></div><div class="container mx-auto px-10 mb-8"><div class="grid grid-cols-1 lg:grid-cols-12 gap-4"><div class="col-span-1 lg:col-span-8"><div class="bg-black/90 text-white shadow-lg p-4 gap-4"><div class="relative overflow-hidden shadow-md h-72 mb-4"><img alt="" loading="lazy" width="200" height="200" decoding="async" data-nimg="1" class="object-top object-cover shadow-lg w-full" style="color:transparent" src="https://media.graphassets.com/B5OCaCUXTPe6bW1Z8wQc"/></div><div class="flex flex-col gap-4"><div class="flex w-full flex-wrap justify-center items-center gap-4"><div class="hidden md:flex items-center justify-center "><img alt="Jefferson Santos" loading="lazy" width="30" height="30" decoding="async" data-nimg="1" class="align-middle rounded-full" style="color:transparent" src="https://media.graphassets.com/0CUnW6EZQMuwIvO4L390"/><p class="inline align-middle text-gray-700 font-medium text-xs">Jefferson Santos</p></div><div class="font-medium text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline mr-2 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><span class="align-middle text-xs">Nov 22, 2022</span></div></div><h1 class="text-sm font-medium">Os recursos mais recentes do ES13 JavaScript</h1><div class="flex flex-col text-sm"><p class="mb-8">ECMAScript 2022 (ES13) é um novo padrão JavaScript definido para ser lançado em junho de 2022. Vamos dar uma olhada nas últimas mudanças que estão no novo lançamento à medida que terminam as propostas (aquelas que atingiram o Estágio 4 na proposta processo e, portanto, são implementados em várias implementações e estarão na próxima revisão prática).
2
3O ECMAScript 2022 apresenta nove propostas finalizadas:
4
51 - Declarações de campo de classe
62 - Verificações de marca ergonômicas para campos privados
73 - Classe Bloco Estático
84 - Índices de correspondência Regexp
95 - Aguardar operador no nível superior
106 - Função método .at() para indexação
117 - Object.prototype.hasOwnProperty() acessível
128 - Causa do erro
139 - Matriz encontrada desde o último
14</p><p class="mb-8"><b>Declarações de campo de classe</b></p><p class="mb-8">
15Antes do ES13 definimos as propriedades de uma classe em seu construtor assim:
16</p><img alt="carbon (3).png" loading="lazy" width="1328" height="1188" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/psH2KbBCQUK2PKRQbRTW"/><p class="mb-8"></p><p class="mb-8">Dentro do construtor, definimos dois campos. Como você pode ver, um deles está marcado com um _ na frente do nome, que é apenas uma convenção de nomenclatura JavaScript para declarar o campo como privado, o que significa que ele só pode ser acessado de dentro de um método de classe. Mas, isso é apenas uma convenção de nomenclatura, é por isso que quando tentamos acessá-lo, não gerou nenhum erro.
17
18No ES13, temos uma maneira mais fácil de declarar campos públicos e privados. A primeira coisa é que não precisamos defini-los dentro do construtor. Em segundo lugar, também podemos definir campos privados adicionando # antes de seus nomes.</p><p class="mb-8"></p><img alt="carbon (4).png" loading="lazy" width="1560" height="1138" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/gI2LyMkZS5Sqn4KJ95PB"/><p class="mb-8"></p><p class="mb-8">A principal diferença com o exemplo anterior é que desta vez um erro real será lançado se tentarmos acessar ou modificar o campo fora da classe.
19<b>
20Verificações de marca ergonômicas para campos privados</b>
21Essa funcionalidade nos ajuda a verificar se o objeto possui o slot privado fornecido, para isso, o operador in é usado.</p><p class="mb-8"></p><p class="mb-8"></p><img alt="carbon (5).png" loading="lazy" width="930" height="840" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/f0Cr8tgVQY13OEkhOOg9"/><p class="mb-8">Usando o mesmo identificador privado em classes diferentes. As duas classes User e Person possuem um slot cujo identificador é #name. O operador in os distingue corretamente:</p><img alt="carbon (6).png" loading="lazy" width="948" height="1392" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/r7dYH076QXuHI3siqsre"/><p class="mb-8"><b></b></p><p class="mb-8"><b>Classe Bloco Estático</b>
22Blocos de inicialização estáticos em classes. Para dados estáticos, temos campos estáticos e blocos estáticos que são executados quando a classe é criada. Uma classe pode ter qualquer número de blocos de inicialização {}
22 estáticos no corpo da classe. Eles são avaliados, juntamente com quaisquer inicializadores de campo estático intercalados, na ordem em que são declarados. O super.property pode ser usado dentro de um bloco estático para referenciar propriedades de uma superclasse.
23</p><p class="mb-8"></p><img alt="carbon (7).png" loading="lazy" width="1128" height="1308" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/97Di2PIVSniCm38vTgMf"/><p class="mb-8"></p><p class="mb-8">Este exemplo abaixo mostra como o acesso pode ser concedido ao objeto privado de uma classe de um objeto fora da classe</p><p class="mb-8"></p><p class="mb-8"></p><img alt="carbon (8).png" loading="lazy" width="1272" height="924" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/U9HK2z2OQK2qTtYfpS1J"/><p class="mb-8"><b></b></p><p class="mb-8"><b>Índices de Match Regexp</b></p><p class="mb-8">Esta atualização nos permitirá usar o caractere d para especificar que queremos obter os índices (início e fim) das matchs de nosso RegExp. Anteriormente isso não era possível. Você só pode obter dados de indexação no processo de operação de correspondência de string.</p><p class="mb-8"></p><img alt="carbon (9).png" loading="lazy" width="1128" height="924" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/Ct5DDevQuOe8iw8RbzPT"/><p class="mb-8"></p><p class="mb-8">O que não sabemos são os índices em que a string termina, algo que podemos adicionar agora o caractere d e ver o resultado.</p><p class="mb-8"></p><p class="mb-8"></p><img alt="carbon (10).png" loading="lazy" width="1128" height="1096" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/iLK0nU2jRtCcgp9LbfrD"/><p class="mb-8"></p><p class="mb-8">Novos índices de campo, como você pode ver, retornaram [15,21]</p><p class="mb-8"></p><p class="mb-8">Podemos usar Regexp.exec ou String.matchAll para encontrar uma lista de correspondências, com a principal diferença entre eles sendo que Regexp.exec retorna seus resultados um por um, enquanto String.matchAll retorna um iterador.</p><p class="mb-8"></p><p class="mb-8"><b>Aguardar operador no nível superior</b></p><p class="mb-8">O operador await só pode ser usado em um método assíncrono é provavelmente um erro que você encontra com frequência. No ES13 poderemos usá-lo fora do contexto de um método assíncrono.</p><p class="mb-8"></p><p class="mb-8">Carregando módulos dinamicamente</p><img alt="carbon (11).png" loading="lazy" width="1128" height="414" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/uTGMP0cRLq0gS8gBI5y2"/><p class="mb-8"><b></b></p><p class="mb-8"><b>Usando um fallback se o carregamento do módulo falhar</b></p><p class="mb-8"></p><img alt="carbon (12).png" loading="lazy" width="1236" height="628" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/wcUyaJpQNWBmmh6ITrAF"/><p class="mb-8"><b></b></p><p class="mb-8"><b>Usando o recurso que carrega mais rápido</b></p><p class="mb-8"></p><img alt="carbon (13).png" loading="lazy" width="948" height="542" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/ewgqT9ygS0kayXEKElOT"/><p class="mb-8"></p><p class="mb-8">Função método .at() para indexação
24Atualmente, para acessar um valor do final de um objeto indexável, a prática comum é escrever arr[arr.length - N], onde N é o enésimo item do final (começando em 1). Isso requer nomear o indexável duas vezes e adicionar mais 7 caracteres para o .length.
25
26Outro método que evita algumas dessas desvantagens, mas tem algumas desvantagens de desempenho de seu arr.slice(-N)[0]</p><p class="mb-8"></p><p class="mb-8"></p><img alt="carbon (14).png" loading="lazy" width="822" height="542" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/MxjPNseMT2PM8VgCSmhA"/><p class="mb-8"></p><p class="mb-8"></p><p class="mb-8">Poderíamos escrever:</p><p class="mb-8"></p><img alt="carbon (15).png" loading="lazy" width="822" height="670" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/1AAByz0FR3amu2RdGIxK"/><p class="mb-8"></p><p class="mb-8">Os seguintes tipos “indexáveis” têm o método .at()</p><p class="mb-8"><b>Object.prototype.hasOwnProperty() acessível</b></p><p class="mb-8">Em JavaScript já temos um Object.prototype.hasOwnProperty mas, como a documentação do MDN também sugere, é melhor não usar hasOwnProperty fora do próprio protótipo, pois não é uma propriedade protegida, o que significa que um objeto pode ter sua propriedade chamada hasOwnProperty que tem nada a ver com Object.prototype.hasOwnProperty</p><p class="mb-8"></p><img alt="carbon (16).png" loading="lazy" width="1020" height="712" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/kBJcOzG3SV6AbNQZ6sR8"/><p class="mb-8"></p><p class="mb-8">Outro problema Object.create(null) criará um objeto que não herda de Object.prototype, tornando esses métodos inacessíveis.</p><p class="mb-8"></p><p class="mb-8"></p><img alt="carbon (17).png" loading="lazy" width="1632" height="458" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/hSjtJ7tRVaLhJuXpKL7w"/><p class="mb-8"></p><p class="mb-8">O método Object.hasOwn() com o mesmo comportamento de chamar Object.hasOwnProperty, toma nosso Object como primeiro argumento e a propriedade que queremos verificar como segundo:</p><p class="mb-8"></p><img alt="carbon (18).png" loading="lazy" width="1182" height="754" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/LKEmR8CVSqKpdcvSSuB4"/><p class="mb-8"></p><p class="mb-8"><b>Causa do Error</b></p><p class="mb-8">Para ajudar no diagnóstico de comportamento inesperado, os erros precisam ser aumentados com informações contextuais como mensagens de erro e propriedades de inst
26ância de erro para explicar o que aconteceu no momento, a propriedade <u>.cause</u> no objeto de erro nos permitiria especificar qual erro causou o outro erro. Assim, os erros podem ser encadeados sem formalidades desnecessárias e superelaboradas para agrupar os erros em condições.</p><img alt="carbon (19).png" loading="lazy" width="1326" height="584" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/En34AnxSK2CTbVNaEh6w"/><p class="mb-8"><b></b></p><p class="mb-8"><b>Array encontrada desde o último </b><u>(find from last)</u></p><p class="mb-8">Em JavaScript já temos um Array.prototype.find e Array.prototype.findIndex. Sabemos que encontrar a partir do último pode ter melhor desempenho (o elemento de destino na cauda da matriz pode ser anexado com push ou concat em uma fila ou pilha, por exemplo: ponto de tempo correspondente recentemente em uma linha do tempo). Se nos preocupamos com a ordem dos elementos (pode haver um item duplicado no array, por exemplo: última ímpar na lista de números), uma maneira melhor de usar os novos métodos Array.prototype.findLast e Array.prototype.findLastIndex</p><p class="mb-8"></p><p class="mb-8">Em vez de escrever para encontrar do último:</p><img alt="carbon (20).png" loading="lazy" width="1974" height="754" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/e1UqPJWIRni3sj0sbPC4"/><p class="mb-8"></p><p class="mb-8"></p><p class="mb-8">Poderíamos escrever:</p><p class="mb-8"></p><img alt="carbon (21).png" loading="lazy" width="1578" height="712" decoding="async" data-nimg="1" style="color:transparent" src="https://media.graphassets.com/eUHzEhaIQJuGRRFJSkub"/><p class="mb-8"></p><p class="mb-8">Então, aprendemos sobre os últimos recursos do ES13 JavaScript que melhorariam sua eficiência. Esses recursos do ES13 JavaScript foram lançados em junho de 2022. Obrigado por ler até aqui. </p><p class="mb-8">Texto traduzido do inglês pelo google tradutor, pode conter erros.</p><p class="mb-8">Link da publicação original em inglês: </p></div></div></div><div class="text-center pt-10 pb-4 mt-8 mb-4 relative bg-black bg-opacity-20"><div class="absolute flex justify-center w-full -left-0 -top-4"><img alt="Jefferson Santos" loading="lazy" width="100" height="100" decoding="async" data-nimg="1" class="align-middle rounded-full w-12 h-12" style="color:transparent" src="https://media.graphassets.com/0CUnW6EZQMuwIvO4L390"/></div><p class="text-white text-sm font-mono">Jefferson Santos</p><p class="text-white text-xs">Estudante de programação, com sonhos e buscando sempre evoluir cada dia mais</p></div><div class="grid grid-cols-1 lg:grid-cols-8 my-4"></div><div class="bg-black/40 shadow-lg p-4 text-white mb-4"><h3 class="text-sm mb-4 font-medium">Deixe um comentário sobre este artigo</h3><div class="grid grid-cols-1 gap-4 mb-4"><textarea class="p-4 outline-none w-full h-40 focus:ring-2 focus:ring-gray-200 bg-gray-300 text-gray-700 text-xs placeholder:text-gray-400" name="comment" placeholder="Comment"></textarea></div><div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4"><input type="text" class="py-2 px-4 outline-none w-full focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700 text-xs" placeholder="Name" name="name"/><input type="email" class="py-2 px-4 outline-none w-full focus:ring-2 focus:ring-gray-200 bg-gray-100 text-gray-700 text-xs" placeholder="Email" name="email"/></div><div class="grid grid-cols-1 gap-4 mb-4"><div class="flex flex-row gap-2 items-center justify-start"><input type="checkbox" id="storeData" name="storeData" value="true"/><label class="text-gray-400 cursor-pointer text-xs" for="storeData">Salvar meus dados neste navegador para a próxima vez que eu comentar.</label></div></div><div class=""><button type="button" class="transition duration-300 ease hover:bg-indigo-900 inline-block bg-green-500 text-xs font-medium text-white px-4 py-2 cursor-pointer">Postar Comentário</button></div></div></div><div class="col-span-1 lg:col-span-4"><div class="relative lg:sticky top-8"><div class="bg-black/40 shadow-lg p-4 mb-2 text-white"><h3 class="text-base mb-2 border-b pb-1">Related Posts</h3></div><div class="bg-black/40 text-white shadow-lg p-4 mb-2"><h3 class="text-base mb-2 border-b pb-1">Categories</h3></div></div></div></div></div></div>
26<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"post":{"title":"Os recursos mais recentes do ES13 JavaScript","excerpt":"EcmaScript 13(ES13) 2022, novas features do javascript sendo implementadas a partir de junho de cada ano.","featuredImage":{"url":"https://media.graphassets.com/B5OCaCUXTPe6bW1Z8wQc"},"author":{"name":"Jefferson Santos","bio":"Estudante de programação, com sonhos e buscando sempre evoluir cada dia mais","photo":{"url":"https://media.graphassets.com/0CUnW6EZQMuwIvO4L390"}},"createdAt":"2022-11-22T03:04:23.548721+00:00","slug":"javascript","content":{"raw":{"children":[{"type":"paragraph","children":[{"text":"ECMAScript 2022 (ES13) é um novo padrão JavaScript definido para ser lançado em junho de 2022. Vamos dar uma olhada nas últimas mudanças que estão no novo lançamento à medida que terminam as propostas (aquelas que atingiram o Estágio 4 na proposta processo e, portanto, são implementados em várias implementações e estarão na próxima revisão prática).\n\nO ECMAScript 2022 apresenta nove propostas finalizadas:\n\n1 - Declarações de campo de classe\n2 - Verificações de marca ergonômicas para campos privados\n3 - Classe Bloco Estático\n4 - Índices de correspondência Regexp\n5 - Aguardar operador no nível superior\n6 - Função método .at() para indexação\n7 - Object.prototype.hasOwnProperty() acessível\n8 - Causa do erro\n9 - Matriz encontrada desde o último\n"}]},{"type":"paragraph","children":[{"bold":true,"text":"Declarações de campo de classe"}]},{"type":"paragraph","children":[{"text":"\nAntes do ES13 definimos as propriedades de uma classe em seu construtor assim:\n"}]},{"src":"https://media.graphassets.com/psH2KbBCQUK2PKRQbRTW","type":"image","title":"carbon (3).png","width":1328,"handle":"psH2KbBCQUK2PKRQbRTW","height":1188,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Dentro do construtor, definimos dois campos. Como você pode ver, um deles está marcado com um _ na frente do nome, que é apenas uma convenção de nomenclatura JavaScript para declarar o campo como privado, o que significa que ele só pode ser acessado de dentro de um método de classe. Mas, isso é apenas uma convenção de nomenclatura, é por isso que quando tentamos acessá-lo, não gerou nenhum erro.\n\nNo ES13, temos uma maneira mais fácil de declarar campos públicos e privados. A primeira coisa é que não precisamos defini-los dentro do construtor. Em segundo lugar, também podemos definir campos privados adicionando # antes de seus nomes."}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/gI2LyMkZS5Sqn4KJ95PB","type":"image","title":"carbon (4).png","width":1560,"handle":"gI2LyMkZS5Sqn4KJ95PB","height":1138,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"A principal diferença com o exemplo anterior é que desta vez um erro real será lançado se tentarmos acessar ou modificar o campo fora da classe.\n"},{"bold":true,"text":"\nVerificações de marca ergonômicas para campos privados"},{"text":"\nEssa funcionalidade nos ajuda a verificar se o objeto possui o slot privado fornecido, para isso, o operador in é usado."}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/f0Cr8tgVQY13OEkhOOg9","type":"image","title":"carbon (5).png","width":930,"handle":"f0Cr8tgVQY13OEkhOOg9","height":840,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":"Usando o mesmo identificador privado em classes diferentes. As duas classes User e Person possuem um slot cujo identificador é #name. O operador in os distingue corretamente:"}]},{"src":"https://media.graphassets.com/r7dYH076QXuHI3siqsre","type":"image","title":"carbon (6).png","width":948,"handle":"r7dYH076QXuHI3siqsre","height":1392,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"bold":true,"text":""}]},{"type":"paragraph","children":[{"bold":true,"text":"Classe Bloco Estático"},{"text":"\nBlocos de inicialização estáticos em classes. Para dados estáticos, temos campos estáticos e blocos estáticos que são executados quando a classe é criada. Uma classe pode ter qualquer número de blocos de inicialização {}
26 estáticos no corpo da classe. Eles são avaliados, juntamente com quaisquer inicializadores de campo estático intercalados, na ordem em que são declarados. O super.property pode ser usado dentro de um bloco estático para referenciar propriedades de uma superclasse.\n"}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/97Di2PIVSniCm38vTgMf","type":"image","title":"carbon (7).png","width":1128,"handle":"97Di2PIVSniCm38vTgMf","height":1308,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Este exemplo abaixo mostra como o acesso pode ser concedido ao objeto privado de uma classe de um objeto fora da classe"}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/U9HK2z2OQK2qTtYfpS1J","type":"image","title":"carbon (8).png","width":1272,"handle":"U9HK2z2OQK2qTtYfpS1J","height":924,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"bold":true,"text":""}]},{"type":"paragraph","children":[{"bold":true,"text":"Índices de Match Regexp"}]},{"type":"paragraph","children":[{"text":"Esta atualização nos permitirá usar o caractere d para especificar que queremos obter os índices (início e fim) das matchs de nosso RegExp. Anteriormente isso não era possível. Você só pode obter dados de indexação no processo de operação de correspondência de string."}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/Ct5DDevQuOe8iw8RbzPT","type":"image","title":"carbon (9).png","width":1128,"handle":"Ct5DDevQuOe8iw8RbzPT","height":924,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"O que não sabemos são os índices em que a string termina, algo que podemos adicionar agora o caractere d e ver o resultado."}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/iLK0nU2jRtCcgp9LbfrD","type":"image","title":"carbon (10).png","width":1128,"handle":"iLK0nU2jRtCcgp9LbfrD","height":1096,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Novos índices de campo, como você pode ver, retornaram [15,21]"}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Podemos usar Regexp.exec ou String.matchAll para encontrar uma lista de correspondências, com a principal diferença entre eles sendo que Regexp.exec retorna seus resultados um por um, enquanto String.matchAll retorna um iterador."}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"bold":true,"text":"Aguardar operador no nível superior"}]},{"type":"paragraph","children":[{"text":"O operador await só pode ser usado em um método assíncrono é provavelmente um erro que você encontra com frequência. No ES13 poderemos usá-lo fora do contexto de um método assíncrono."}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Carregando módulos dinamicamente"}]},{"src":"https://media.graphassets.com/uTGMP0cRLq0gS8gBI5y2","type":"image","title":"carbon (11).png","width":1128,"handle":"uTGMP0cRLq0gS8gBI5y2","height":414,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"bold":true,"text":""}]},{"type":"paragraph","children":[{"bold":true,"text":"Usando um fallback se o carregamento do módulo falhar"}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/wcUyaJpQNWBmmh6ITrAF","type":"image","title":"carbon (12).png","width":1236,"handle":"wcUyaJpQNWBmmh6ITrAF","height":628,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"bold":true,"text":""}]},{"type":"paragraph","children":[{"bold":true,"text":"Usando o recurso que carrega mais rápido"}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/ewgqT9ygS0kayXEKElOT","type":"image","t
26itle":"carbon (13).png","width":948,"handle":"ewgqT9ygS0kayXEKElOT","height":542,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Função método .at() para indexação\nAtualmente, para acessar um valor do final de um objeto indexável, a prática comum é escrever arr[arr.length - N], onde N é o enésimo item do final (começando em 1). Isso requer nomear o indexável duas vezes e adicionar mais 7 caracteres para o .length.\n\nOutro método que evita algumas dessas desvantagens, mas tem algumas desvantagens de desempenho de seu arr.slice(-N)[0]"}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/MxjPNseMT2PM8VgCSmhA","type":"image","title":"carbon (14).png","width":822,"handle":"MxjPNseMT2PM8VgCSmhA","height":542,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Poderíamos escrever:"}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/1AAByz0FR3amu2RdGIxK","type":"image","title":"carbon (15).png","width":822,"handle":"1AAByz0FR3amu2RdGIxK","height":670,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Os seguintes tipos “indexáveis” têm o método .at()"}]},{"type":"bulleted-list","children":[{"type":"list-item","children":[{"type":"list-item-child","children":[{"text":"string"}]}]},{"type":"list-item","children":[{"type":"list-item-child","children":[{"text":"Array"}]}]},{"type":"list-item","children":[{"type":"list-item-child","children":[{"text":"All Typed Array classes: Uint8Array etc."}]}]}]},{"type":"paragraph","children":[{"bold":true,"text":"Object.prototype.hasOwnProperty() acessível"}]},{"type":"paragraph","children":[{"text":"Em JavaScript já temos um Object.prototype.hasOwnProperty mas, como a documentação do MDN também sugere, é melhor não usar hasOwnProperty fora do próprio protótipo, pois não é uma propriedade protegida, o que significa que um objeto pode ter sua propriedade chamada hasOwnProperty que tem nada a ver com Object.prototype.hasOwnProperty"}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/kBJcOzG3SV6AbNQZ6sR8","type":"image","title":"carbon (16).png","width":1020,"handle":"kBJcOzG3SV6AbNQZ6sR8","height":712,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Outro problema Object.create(null) criará um objeto que não herda de Object.prototype, tornando esses métodos inacessíveis."}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/hSjtJ7tRVaLhJuXpKL7w","type":"image","title":"carbon (17).png","width":1632,"handle":"hSjtJ7tRVaLhJuXpKL7w","height":458,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"O método Object.hasOwn() com o mesmo comportamento de chamar Object.hasOwnProperty, toma nosso Object como primeiro argumento e a propriedade que queremos verificar como segundo:"}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/LKEmR8CVSqKpdcvSSuB4","type":"image","title":"carbon (18).png","width":1182,"handle":"LKEmR8CVSqKpdcvSSuB4","height":754,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"bold":true,"text":"Causa do Error"}]},{"type":"paragraph","children":[{"text":"Para ajudar no diagnóstico de comportamento inesperado, os erros precisam ser aumentados com informações contextuais como mensagens de erro e propriedades de instância de erro para explicar o que aconteceu no momento, a propriedade "},{"text":".cause","italic":true,"underline":true},{"text":" no objeto de erro nos permitiria especificar qual erro causou o outro erro. Assim, os erros podem ser encadeados sem formalidades desnecessárias e superelaboradas para agrupar os erros em condições."}]},{"src":"https://media.graphassets.com/En34AnxSK2CTbVNaEh6w","type":"image","t
26itle":"carbon (19).png","width":1326,"handle":"En34AnxSK2CTbVNaEh6w","height":584,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"bold":true,"text":""}]},{"type":"paragraph","children":[{"bold":true,"text":"Array encontrada desde o último "},{"bold":true,"text":"(find from last)","underline":true}]},{"type":"paragraph","children":[{"text":"Em JavaScript já temos um Array.prototype.find e Array.prototype.findIndex. Sabemos que encontrar a partir do último pode ter melhor desempenho (o elemento de destino na cauda da matriz pode ser anexado com push ou concat em uma fila ou pilha, por exemplo: ponto de tempo correspondente recentemente em uma linha do tempo). Se nos preocupamos com a ordem dos elementos (pode haver um item duplicado no array, por exemplo: última ímpar na lista de números), uma maneira melhor de usar os novos métodos Array.prototype.findLast e Array.prototype.findLastIndex"}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Em vez de escrever para encontrar do último:"}]},{"src":"https://media.graphassets.com/e1UqPJWIRni3sj0sbPC4","type":"image","title":"carbon (20).png","width":1974,"handle":"e1UqPJWIRni3sj0sbPC4","height":754,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Poderíamos escrever:"}]},{"type":"paragraph","children":[{"text":""}]},{"src":"https://media.graphassets.com/eUHzEhaIQJuGRRFJSkub","type":"image","title":"carbon (21).png","width":1578,"handle":"eUHzEhaIQJuGRRFJSkub","height":712,"children":[{"text":""}],"mimeType":"image/png"},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":"Então, aprendemos sobre os últimos recursos do ES13 JavaScript que melhorariam sua eficiência. Esses recursos do ES13 JavaScript foram lançados em junho de 2022. Obrigado por ler até aqui. "}]},{"type":"paragraph","children":[{"text":"Texto traduzido do inglês pelo google tradutor, pode conter erros."}]},{"type":"paragraph","children":[{"text":"Link da publicação original em inglês: "},{"href":"https://medium.com/javascript-in-plain-english/latest-es13-javascript-features-24cba45c93f7","type":"link","children":[{"text":"https://medium.com/javascript-in-plain-english/latest-es13-javascript-features-24cba45c93f7"}]},{"text":""}]}]}},"categories":[{"name":"Javascript","slug":"javascript"},{"name":"Node","slug":"node"},{"name":"React","slug":"react"}]}},"__N_SSG":true},"page":"/post/[slug]","query":{"slug":"javascript"},"buildId":"Zbx6N_VZ_gOQAiU99ecsj","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
26</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.