Shulou(Shulou.com)06/03 Report--

Today, I would like to talk to you about the new features of JavaScript, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

The production process of an ECMAScript standard includes five stages from Stage 0 to Stage 4. Each stage is submitted to the next stage and requires TC39 approval. This article introduces these new features in the Stage 3 or Stage 4 phase, which means that they should soon be supported in browsers and other engines.

1. Private variables of the class

One of the latest proposals is a method to add private variables to a class. We will use the # symbol to represent the private variable of the class. This eliminates the need to use closures to hide private variables that you don't want to expose to the outside world.

Class Counter {# x = 0; # increment () {this.#x++;} onClick () {this.#increment ();}} const c = new Counter (); c.onClick (); / / normal c.#increment (); / / error report

Member variables or member functions modified by # become private variables, and if you try to access them outside of Class, an exception will be thrown. This feature is now available in the latest versions of Chrome and Node.js.

Optional chain operator

You may have come across a situation where when you need to access properties nested in several layers of an object, you get the infamous error Cannot read property 'stop' of undefined, and then you have to modify your code to handle every possible undefined object in the property chain, such as:

Let nestedProp = obj?.first?.second

If obj or obj.first is null/undefined, the expression will be short-circuited and will directly return undefined

III. Vacancy merging operator

In the process of development, we often encounter such a scenario: if the variable is null, the default value is used, and this is how we implement it:

Let c = a? A: B / / method 1let c = a | | b / / method 2

The obvious drawback of both approaches is that it overrides all false values, such as (0,', false), which may be valid inputs in some cases.

To solve this problem, it has been proposed to create a "nullish" merge operator, using? It means. With it, we only set the default value when the first item is null or undefined.

For example, there is the following code:

Const x = null;const y = x? 500 0const console.log (y); / / 500const n = console.log (m) / / 0

IV. BigInt

One of the reasons JS has been so bad on Math is that it is impossible to accurately represent the number 2 ^ 53 that is greater than, which makes it very difficult to deal with fairly large numbers.

1234567890123456789 * 123 exchange / > 151851850485185200000 / / loss of accuracy of the calculation result

Fortunately, BigInt (large integers) is here to solve this problem. You can use the same operators as ordinary numbers on BigInt, such as +, -, /, *,%, and so on.

Creating values of type BigInt is also very simple, as long as you add n after the number. For example, 123 becomes 123n. You can also use the global method BigInt (value) to convert the input parameter value to a number or a numeric string.

Const aNumber = 111th Const aBigInt = BigInt (aNumber); aBigInt = = 111n / / truetypeof aBigInt = 'bigint' / / truetypeof 111n / / "number" typeof 111n / / "bigint"

As long as you add n to the end of the number, you can calculate the large number correctly:

1234567890123456789n * 123n controlling / > 151851850485185185047n

One problem, however, is that in most operations, you cannot mix BigInt with Number. It's OK to compare Number and BigInt, but you can't add them up.

1n

< 2// true1n + 2// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions 现在，此特性可在最新版本的 Chrome 和 Node.js中使用。 五、static 字段 它允许类拥有静态字段，类似于大多数OOP语言。静态字段可以用来代替枚举，也可以用于私有字段。 class Colors { // public static 字段 static red = '#ff0000'; static green = '#00ff00'; // private static 字段 static #secretColor = '#f0f0f0';}font.color = Colors.red;font.color = Colors.#secretColor; // 出错 现在，此特性可在最新版本的 Chrome 和 Node.js中使用。 六、Top-level await ES2017（ES8）中的 async/await 特性仅仅允许在 async 函数内使用 await 关键字，新的提案旨在允许 await 关键字在顶层内容中的使用，例如可以简化动态模块加载的过程： const strings = await import(`/i18n/${navigator.language}`); 这个特性在浏览器控制台中调试异步内容（如 fetch）非常有用，而无需将其包装到异步函数中。 另一个使用场景是，可以在以异步方式初始化的 ES 模块的顶层使用它(比如建立数据库连接)。当导入这样的"异步模块"时，模块系统将等待它被解析，然后再执行依赖它的模块。这种处理异步初始化方式比当前返回一个初始化promise并等待它解决来得更容易。一个模块不知道它的依赖是否异步。 // db.mjsexport const connection = await createConnection();// server.mjsimport { connection } from './db.mjs';server.start(); 在此示例中，在server.mjs中完成连接之前不会执行任何操作db.mjs。http://www.changhai120.com/ 现在，此特性可在最新版本的 Chrome中使用。 七、WeakRef 一般来说，在 JavaScript 中，对象的引用是强保留的，这意味着只要持有对象的引用，它就不会被垃圾回收。 const ref = { x: 42, y: 51 };// 只要我们访问 ref 对象（或者任何其他引用指向该对象），这个对象就不会被垃圾回收 目前在 Javascript 中，WeakMap 和 WeakSet 是弱引用对象的唯一方法：将对象作为键添加到 WeakMap 或 WeakSet 中，是不会阻止它被垃圾回收的。 const wm = new WeakMap();{ const ref = {}; const metaData = 'foo'; wm.set(ref, metaData); wm.get(ref); // 返回 metaData}// 在这个块范围内，我们已经没有对 ref 对象的引用。// 因此，虽然它是 wm 中的键，我们仍然可以访问，但是它能够被垃圾回收。const ws = new WeakSet();ws.add(ref);ws.has(ref);// 返回 true JavaScript 的 WeakMap 并不是真正意义上的弱引用：实际上，只要键仍然存活，它就强引用其内容。WeakMap 仅在键被垃圾回收之后，才弱引用它的内容。 WeakRef 是一个更高级的 API，它提供了真正的弱引用，Weakref 实例具有一个方法 deref，该方法返回被引用的原始对象，如果原始对象已被收集，则返回undefined对象。 const cache = new Map();const setValue = (key, obj) =>

{cache.set (key, new WeakRef (obj))}; const getValue = (key) = > {const ref = cache.get (key); if (ref) {return ref.deref ();}}; / / this will look for the value in the cache// and recalculate if it's missingconst fibonacciCached = (number) = > {const cached = getValue (number); if (cached) return cached; const sum = calculateFibonacci (number); setValue (number, sum); return sum;} After reading the above, do you have any further understanding of the new features of JavaScript? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.