七个即将列入规范的JavaScript提案功能，之后确定有用获得的

今天看到一个文章，说node12&chrome中7个新的提案功能。

若是在这里发表了这个文章有侵权嫌疑，请告知删除此文

我看了下，有几个确定用的到，甚至还有?.，玩ruby的同窗是否是以为很熟悉(&.)。

如下是看到的文章的原文。

JavaScript(或ECMA script)是一种不断发展的语言，有许多关于如何更好发展的建议和想法。TC39(技术委员会39)是负责定义JS标准和特性的委员会，今年他们一直很活跃。如下是目前处于"第3阶段"的一些提案的摘要，这是在"完成"以前的最后一个阶段。这意味着这些功能应该很快就会在浏览器和其余引擎中实现。事实上，其中一些如今可用。

1. 私有字段 #

Chrome & NodeJS 12 中可用

是的，你没有看过。最终，JS在类中获取私有字段。再也不须要this._doPrivateStuff()，定义闭包来存储私有值，或者使用WeakMap来hack私有props。

语法看起来像下面这样：

// 私有字段必须使用'#'开头
// 而且不能够在类这个块的外面去访问

class Counter {
  #x = 0;

  #increment() {
    this.#x++;
  }

  onClick() {
    this.#increment();
  }

}

const c = new Counter();
c.onClick(); // works fine
c.#increment(); // error
复制代码

提案：github.com/tc39/propos…

2. 可选的链?.

之前必须访问嵌套在对象内的几个级别的属性，并获得臭名昭著的错误Cannot read property 'stop' of undefined。而后更改代码以处理链中的每一个多是undefined的对象，例如：

const stop = please && please.make && please.make.it && please.make.it.stop;

// 或可使用像'object-path'这样的库
const stop = objectPath.get(please, "make.it.stop");
复制代码

经过可选的连接，你就能够像下面这样来处理：

const stop = please?.make?.it?.stop;
复制代码

提案：github.com/tc39/propos…

3. null合并 ??

变量的可选值可能缺失，若是丢失，则使用默认值，这样属于很常见的现象：

const duration = input.duration || 500;
复制代码

||的问题是它将覆盖全部falsy值，如(0, '', false)，在某些状况下多是有效的输入。

键入null合并运算符，他只会覆盖undefined或null：

const duration = input.duration ?? 500;
复制代码

提案：github.com/tc39/propos…

4. BigInt 1n

Chrome & NodeJS 12 中可用

JS一直不擅长数学的一个缘由是咱们没法可靠地存储大于2 ^ 53的数，这使得处理至关大的数很是困难。幸运的是，BigInt是一个解决这个特定问题的提案。

闲话少说，show me your code：

// 能够定义 BigInt 经过追加 'n' 到一个数字字面量
const theBiggestInt = 9007199254740991n;

// 对字面量使用构造函数
const alsoHuge = BigInt(9007199254740991);

// 或者对字符串使用
const hugeButString = BigInt('9007199254740991');
复制代码

你还能够在BigInt上使用与普通数字相同的运算符，例如:+，-，/，*，%，…不过有一个问题，在大多数操做中不能将BigInt与数字混合使用。比较Number和BigInt工做方式，但不能添加他们：

1n < 2 
// true

1n + 2
// 🤷‍♀️ Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
复制代码

译：根据上面的报错提示，你能够改成显示的转换

Number(1n) + 2
复制代码

提案：github.com/tc39/propos…

5. static 字段

Chrome & NodeJS 12 中可用

这个很简单。它容许在类上有一个静态字段，相似于大多数OOP语言。静态字段能够做为枚举的替代，它们也能够用于私有字段。

class Colors {
  // public static fields
  static red = '#ff0000';
  static green = '#00ff00';

  // private static fields
  static #secretColor = '#f0f0f0';

}


font.color = Colors.red;

font.color = Colors.#secretColor; // Error
复制代码

提案：github.com/tc39/propos…

6. 顶层 await

chrome中可用

容许在你代码的顶层使用await。这对于调试浏览器控制台中的异步内容(如fetch)很是有用，而无需将其封装在async函数中。

若是你须要复习异步并等待，请看我在这篇文章里对他的解释。

另外一个致命的用例是，它能够在以异步方式初始化的ES模块的顶层使用(好比创建链接的数据库层)。当import这样的“异步模块”时，模块系统将在执行依赖它的模块以前等待它解析。这将使处理异步初始化比当前返回初始化promise并等待它的工做区容易得多。模块将不知道它的依赖关系是不是异步的。

// db.mjs
export const connection = await createConnection();
复制代码

// server.mjs
import { connection } from './db.mjs';

server.start();
复制代码

在此示例中，在db.mjs中完成链接以前，不会在server.mjs中执行任何操做。

提案：github.com/tc39/propos…

7. WeakRef

Chrome & NodeJS 12 中可用

对象的弱引用是再也不可以使对象保持活的引用。每当咱们使用(const、let、var)建立一个变量时，只要该变量的引用仍然可访问，垃圾收集器(GC)就永远不会从内存中删除该变量。这些都是强引用。可是，若是没有对弱引用引用的对象有强引用，则GC能够在任什么时候候删除它。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 missing
const fibonacciCached = (number) => {
  const cached = getValue(number);
  if (cached) return cached;
  const sum = calculateFibonacci(number);
  setValue(number, sum);
  return sum;
};
复制代码

对于缓存远程数据来讲，这可能不是一个好主意，由于远程数据从内存中删除 不可预测。在这种状况下，最好使用相似LRU缓存的东西。

译：LRU缓存，是否有去了解？或者下次一块儿了解下 Implementing LRU cache in JavaScript -- medium

LRU cache implementation in Javascript -- stackoverflow

提案：github.com/tc39/propos…

就是这样。我但愿你和我同样会兴奋地使用这些很酷的新功能。有关这些提案以及我未说起的其余提案的更多详细信息，请保持关注github上的TC39提案。

原文：7 Exciting New JavaScript Features You Need to Know