ES2020(ES11) 重新开始

Vamos ver mais de perto as coisas incríveis que chegaram agora na nova especação do ECMAScript！ 🤩

目前，ECMAScript已将其作为特性提案，并作为TC39 委员会的一项提案进行了完善，并最终确定了第 4 阶段的最终版本，并定义了草案。

Essas将其作为工具提供。

Esse processo garante uma melhora Constante no estado da arte do Javascript 👩‍🎨。

作为 2020 年（ES2020）具体特征的最终确定，这对导航、引擎和设备来说是非常重要的！

➡️ BigInt

➡️ 私有方法

➡️ 可选链

➡️ 空值合并运算符

➡️ String.prototype.matchAll

➡️ globalThis

➡️ for-in 循环机制

➡️ Promise.allSettled

➡️ 动态导入

➡️ 模块命名空间导出

作为提案🖋

BigInt 🧮

在 JS 中，习惯使用数字，但不能使用双精度 64 位数字，因此通常会限制数字的使用，从而避免使用“安全”形式的操作。

// Número máximo seguro no JS
Number.MAX\_SAFE\_INTEGER // 9007199254740991

Para isso é comum dependentermos de bibliotecas externas para tentar Lidar de forma mais segura com valores altos.

BigInt集市或原始语言的设置，提供激光雷达部分的精确信息。 Pois uma variável deste tito pode 代表 2⁵³ 数字。

这是一个新的具体信息或 BigInt 类型，它没有最终的数字，表示 Javascript 引擎（v8 或其他）的数字。

const numeroGrande = 100000000000000000000000000000n;
console.log(numeroGrande \* 2n); // 200000000000000000000000000000n

Podemos Fazer选角从新开始。

console.log( BigInt ( Number.MAX\_SAFE\_INTEGER))
// 9007199254740991n

BigInt 中的数字是最重要的，因为它可以准确地定义 BigInt 中的数字，以确保 BigInt 的正确性。

BigInt 可以在 Chrome、Firefox、Opera 和 Node.js 10.4 上实现，并且可以实现 ✅

📖 具体说明

🗼 插件 Babel

（OBS：O 插件 babel não 实现 o novo Tipo apenas 允许使用 essa sintaxe。Ou seja，o código “const foo = 1n” vai buildar，mas a variável não vai poder usar um número do bigint。（Obrigada Macabeus））

私有方法🔒

JS始终将东方语言作为实现类的对象，以类的原型为基础，以ES2015 类的特殊语法为术语，以实现类的具体方法为基础私人的。

在 Javascript 项目中，我们使用类来命名一些私人元素，以区别于其他元素。

这是一个新的具体内容，是#na frente da variável 或 função já vai definir que o no se deve ter accesses ele em outros contextos além da própria classe。

与直觉相反，我决定对所有的图书馆进行进一步的研究，以实现我的私人生活，并改变我现有的生活。

这是因为Typescript的语法和定义是私人的。

Dessa forma podemos escrever 类类似于 essa：

class Counter {
  #x = 0; // Define uma variável privada
  increment() {
this.#x++; // Incrementa a variável privada
  }
  decrement() {
this.#x--; // Decrementa a variável privada
  }
  getX(){
return this.#x;
  }
}

const c = new Counter();

console.log(c.getX()); // 0 -> Valor é exposto pelo metodo getX

Tentar pegar o valor da variável privada diretetamente não é viável pois ela não pode ser acessada fora do contexto da classe。

c.#x => 🙅‍♀Uncaught SyntaxError: Private field '#x'

修改方法并最终获得 getX 或 valor -1 的结果。

c.increment(); 
c.decrement();
c.decrement();
console.log(c.getX()); // -1 -> Valor é modificado e depois exposto

如果没有任何示例，请尝试以 0 的勇气进行测试，并使用辅助隐私功能来进行验证。

class Counter {
  #x = 0;     
  increment() {
this.#x++;       
  }
  #isPositive() {
return this.#x > 0
  }
  decrement() {
if ( this.#isPositive()) this.#x--;  
  // Chama o método privado para verificar se o valor x é positivo
  }
  getX(){
return this.#x;
  }
}

const c = new Counter();

Assim 是一个私人财产，但不以新的方式进行阶级背景。

c.#isPositive() => 🙅‍♀Uncaught SyntaxError: Private method '#x'

在此过程中，我们将减少您的权力，以保证我们的勇气不被否定。

c.decrement();
console.log(c.getX()); // 0

这是在开/闭原则上解决固体原则的最重要问题。

Essa 功能是Chrome和Node v12的终极版本。

📖 具体说明

🗼 插件 Babel

可选链式运算符❓

Quem nunca passou ouviu falar do famoso “无法读取未定义的属性”？ Javascript Pode Ser棘手的quando estamos litando com valores nulos ou undefined。

Javascript 的主要功能是通过多种验证来验证目标对象的属性，从而避免出现错误。

Supondo um objeto com bados de um “usuário” que pode_(ou não)_ conter informações do perfil de uma pessoa.

user // undefined
user.profile // Error : _Cannot read property of undefined_  
user.profile.name // Error : _Cannot read property of undefined_

一切都可能是物体的属性，或者是物体的属性，如果是错误的话，或者是勇气。

所有这些都不是示例中的价值保证和示例性条款，我们的专有名称是第二个用于验证各种验证的对象的名称。

if (user != undefined && user.profile != undefined) {
 user.profile.name 
}

Adicionando 或新操作员询问之前的问题，以便进行后续操作或选择。如果存在的话，就会得到结果。

const user = {profile: {name: "Maria"}}


user ?.profile ?.name // “Maria”

Caso algum valor comparado pelo operador não 存在 ele retorna apenas um undefined sem mais 错误。

const user = {}

user ?.profile ?.name // Undefined

不限制任何对象或阵列的使用和执行的功能。

user.profile.checarAlgo ?.(...argumentos)

Essa sintaxe também pode ser usada para acesso dinâmico da propriedade

user.profile ?.[nomeDaPropriedade]

这是一个特别有趣的事情，它是一种伟大的创造的勇气，是一种永远存在的东西。

// Com operador
a ?.b[3].c?.(x).d
// Sem operador
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d

可选链接操作员允许激光雷达以一种形式存在的价值，并且可以通过多种方式验证所需的信息。这是C#和Swift语言的灵感来源，并且是Typescript的保证，它是本机的功能。

这是一个主要实现导航、引擎和性能的功能！

📖 具体说明

🗼 插件 Babel

无效合并算子⏸

可以验证特定的价值和错误（空、未定义等），以适合的形式进行验证，而不是使用特定的代码或使用酸的价值。

所有这些都必须获得该对象的所有属性，但不能证明该对象已存在并可以使用默认值。 Tentamos 算法与 isso 类似：

user.profile.name == undefined ? “Anonymous” : person.profile.name
user.profile.age == undefined ? 0 : person.profile.age

Também podemos tentar expressar a mesma coisa por meio do operador barra-barra ou OR => ||。

false || “Texto teste” // Texto teste
undefined || “Texto teste” // Texto teste
null || "Texto teste" // Texto teste
NaN || "Texto teste" //Texto teste

Essa 解决方案和实际问题是激光雷达是否考虑到“Falsey”

O Nullish Coalescing不存在任何询问操作符 (??) ，但其验证类型可能为 strict p_ermitindo um valor _default apenas quando temos um null或undefined。

false ?? “Texto teste” // false
undefined ?? “Texto teste” // Texto teste
null ?? ”Texto teste” // Texto teste
NaN ?? “Texto teste” // NaN

简单的例子：

user.profile.name == undefined ? “Anonymous” : person.profile.name
user.profile.name **??** “Anonymous”

如果没有任何对象用户，则可以使用名称或昵称来配置个人资料。

Se em um Campo de nome devomostrar o name OU onickname OU um valor padrão, nossa solução comum seria algo 类似：

if (person.profile.nickname == undefined) { 
if (person.profile.name == undefined) {
    “Anonymous”
  } else {
    return person.profile.name
  }
} else {
  return person.profile.nickname
}

Com nosso novo operador se Torna apenas：

person.profile.nickname ?? person.profile.name ?? “Anonymous”.

这是一个与C#和Swift语言之外的语言的结合，它是PHP版本 7 的一个版本，也是一个主要的实现。

📖 具体说明

🗼 插件 Babel

String.protype.matchAll 💕

新方法matchAll() 与常规表达式相关。

可以通过表达式表达参数和返回迭代器以获取“匹配”结果的结果。

Podemos acessar os casos iterando o seu resultado。

const onlyABC = /[a-c]/g
const str = 'abc'
const matches = str.matchAll(onlyABC)

for (const match of matches) {
  console.log(match);
}

// ["a", index: 0, input: "abc", groups: undefined]
// ["b", index: 0, input: "abc", groups: undefined]
// ["c", index: 0, input: "abc", groups: undefined]

这是一个交互过程，我们可以通过迭代器来实现，其中包括 matchAll() 和 novamente 所要求的 novamente 结果。

const arrMatches = [...str.matchAll(onlyABC)]

// [["a", index: 0, input: "abc", groups: undefined],
    ["b", index: 0, input: "abc", groups: undefined],
    ["c", index: 0, input: "abc", groups: undefined]]

好吧，这有好处吗？

Agora conseguimos um resultado para nossa regex além do match em si , e isso fica visível em casos mais Complexos em temos diversos agrupamentos。

const getTest = /t(e)(st(\d?))/g;
const str = 'test1test2'

const arrMatches= [...str.matchAll(getTest)];

array[0];
// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
array[1];
// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]

str.match(getTest); 
// Array ['test1', 'test2']

一个关于性能问题的迭代和性能问题的课程，可以帮助您以无范例的方式传播操作员的价值。

Essa 具有强大的功能。

📖 规格

标准化的全局此对象🌍

O que para algunsé um mon stro para outros pode ser benção,agora temos padronizado o THIS GLOBAL .您是运行时的全局独立应用程序的上下文。

全球此指的是全球对象，独立于执行或代码。

Sendo assim você pode em produção para um projeto multiplataforma escrever isso:

globalThis.variavelGlobalzassa = "Irraaa 🤠🐎"

Brincadeiras aparte, essa padronização se deve ao fato que por JS Ser multiplataforma e portanto, um uneco código pode rodar no Node, no navegador ou em qualquer outro contexto.

Sendo assim 是一个困难的全局对象，它可以在窗口（浏览器）或全局（节点）中使用。

📖 规格

承诺.全部解决🚦

O metodoPromise.allSettled recebe um array de Promises e so se resolve quando todas as elas estiverem resolvidas, seja como已完成或拒绝， com o estado de cada uma delas.

我们现在的承诺是，现在所有的承诺都已完成，独立的结果，似乎是一项必要的努力。

恢复的方法是，承诺的状态是勇敢的，如果履行了，或者是拒绝的。

例如，colocamos duas 承诺没有 Promise.allSettled 、 uma com resolução 和 outra com falha 、 damos console.log 没有结果！

const stuff1 = new Promise ((res, rej) => res({x: 10, test: "🤠"}));
const stuff2= new Promise ((res, rej) => rej(Error ("Deu ruim 😭")));

Promise.allSettled([stuff1, stuff2])
  .then(data => **console**.log(data)); 
// [ 
//   Object { status: "fulfilled", value: {x: 10, test: "🤠"}},
//   Object { status: "rejected", reason: "Deu ruim 😭"} 
// ]

项目的结果是对象的数组，并且是Promise解决方案的状态。解决了财产价值问题或承诺的具体问题，并解决了财产原因和错误的问题。

Já tentávamos fazer algo 类似的解决方法是同时在 Promise.all 上实现多个 Promise。

Promise.all([stuff1, stuff2])
  .catch(err => console.log(err)); // Deu ruim 😭

Se colocássemos as duas Promise o Promise.all joga pra cima a falha do stuff2para que você trate e ignora completamente as Promises que foram resolvidas.请不要使用“não ligasse”的方法来实现承诺的结果。

实现4 个承诺组合的动机是通过图书馆或激光雷达语言实现的原则。

Promise.all 和 Promise.race 是 ES2015 的具体论坛， Promise.allSettled 以及Promise.any 的未来方法。

O Promise.any receberia também uma lista de Promises and retornaria quando qualquer uma fosse resolvida.

📖 规格

for-in 机制🎡

作为存在特征的伴随。为在开发中实现的具体形式提供了一种最终方式，以实现与 (x in y) 开发罗达莱万多引擎之间的关系的最终版本。

📖 规格

动态导入 / Import() 🚢

O import dinâmico retorna uma uma Promise para o object do modulo do namespace que foi requisitado. Sendo assim、agora poderemos colocar um import dentro de uma variável 和 chamar usando async/await 。

Para que isso é importante？重要的是“懒惰”或“懒惰”的情况，请按照规定执行。

保证运行时的执行控制会影响运行时的性能，并影响执行过程中的所有开销。

例如，您可以使用一些特定功能的功能，或者使用特定功能的算法。

是否可以导入或执行或使用外汇（e se forem）实际使用？

//utils.js

...muitas funções e coisas...

const add = (x, y) => x + y;

export { add };

您可以使用以下方法来导入特定的功能。

const doMathStuff = async (x, y) => {
const math = await import('./utils.js');
console.log(math.add(5, 10));
};

运行时，您将无法使用该功能，也无法使用该功能，请注意，该功能适用于美国。

对于前端示例来说，这是极其重要的，因为它可以最小化或最大程度地发送执行信息。 Muito código sendo executado inconsequentemente abrir um site pode ser bem custoso_( [_ver “V8 Start-up Performance” ]( https://medium.com/reloading/javascript-start-up-performance-69200f43b201)_)._

结合代码拆分和改进代码，我们可以将其发送给babel com webpack，或者将其打包成一个模块。

Webpack的示例是“Tree Shaking”，它是一个基本的依赖项，可用于示例、删除或删除。

操作系统在webpack中导入Tree Shaking 的工具（即JavaScript 中的动态导入和 Tree Shaking），这是一个重要的问题，它可以控制我们的操作。

📖 具体说明

🗼 插件 babel

🌲 Otimização JS com tree shake

模块命名空间导出🛄

使用以下模块，可以使用示例中的所有重要元素，例如：

import * from './utils.js'

Mas não podíamos exportar de formaimilar nativamente e tínhamos de exportar or próprio dentro de um object.

import default as utils from './utils.js'
export { utils }

Masagora temos uma sintaxeimilar para exportar todo o conteúdo do módulo de forma like！

export * from './utils.js'

重新命名或继续导出示例：

export * as utils from './utils.js'
export { add as soma } from './utils.js'

一个想法很简单，可以与我们的项目保持一致。

📖 具体说明

🗼 插件 Babel

——

“Quero usar essas funcionalidade tipo，AGORA !!”

修改 arquivo.babelrc 并使用新插件

{
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-syntax-bigint"
  ]
}

您可以通过以下方式进行配置：最简单的系列使用或包裹捆绑程序，无需安装项目 - 取决于您的情况

$ yarn add parcel-bundler

在 seu package.json中配置 nos 脚本来执行 seu projeto。

// package.json

...

"scripts": {
  "start": "parcel index.js"
},

结论

Javascript 是一种语言，它随着网络的发展而不断发展，并且随着语言的发展越来越快，语言的发展也变得越来越困难。

Espero que vocês tenham gostado!! 👏👏👏👏👏👏

Quem gostou bate palminha pra que o artigo alcance outros amiguinhos。

❤️🧡💛💚💙💜。

tc39/提案

文章来源：https://dev.to/naluhh/o-que-tem-de-novo-no-es2020-es11-46d1

菜单

分享

ES2020(ES11) 重新开始

ES2020(ES11) 重新开始

作为提案🖋

BigInt 🧮

私有方法🔒

可选链式运算符❓

无效合并算子⏸

String.protype.matchAll 💕

标准化的全局此对象🌍

承诺.全部解决🚦

for-in 机制🎡

动态导入 / Import() 🚢

模块命名空间导出🛄

结论

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码