js的一些新特性

一、类的私有变量
最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。

class Counter {
  #x = 0;
  #increment() {
    this.#x++;
  }
  onClick() {
    this.#increment();
  }
}

const c = new Counter();
c.onClick(); // 正常
c.#increment(); // 报错

二、可选链操作符
你可能碰到过这样的情形:当需要访问嵌套在对象内部好几层的属性时,会得到臭名昭著的错误Cannot read property 'stop' of undefined,然后你就要修改你的代码来处理来处理属性链中每一个可能的undefined对象,比如:

let nestedProp = obj && obj.first && obj.first.second;
在访问obj.first.second之前,obj和obj.first 的值要被确认非null(且不是undefined)。目的是为了防止错误发生,如果简单直接的访问obj.first.second而不对obj和obj.first 进行校验就有可能产生错误。

有了可选链式调用 ,你只要这样写就可以做同样的事情:

let nestedProp = obj?.first?.second;

三、空位合并操作符
我们在开发过程中,经常会遇到这样场景:变量如果是空值,则就使用默认值,我们是这样实现的:

let c = a ? a : b // 方式1
let c = a || b // 方式2
这两种方式有个明显的弊端,它都会覆盖所有的假值,如(0, '', false),这些值可能是在某些情况下有效的输入。

可以这样写

let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;

四、BigInt
JS在Math上一直很糟糕的原因之一是,无法精确表示大于的数字2 ^ 53,这使得处理相当大的数字变得非常困难。幸运的是,BigInt(大整数)就是来解决这个问题。你可以在BigInt上使用与普通数字相同的运算符,例如 +, -, /, *, %等等。

创建 BigInt 类型的值也非常简单,只需要在数字后面加上 n 即可。例如,123 变为 123n。也可以使用全局方法 BigInt(value) 转化,入参 value 为数字或数字字符串。

const aNumber = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
typeof aBigInt === 'bigint' // true
typeof 111 // "number"
typeof 111n // "bigint"
只要在数字末尾加上 n,就可以正确计算大数了:

1234567890123456789n * 123n;
// -> 151851850485185185047n

五、static 字段
它允许类拥有静态字段,类似于大多数OOP语言。静态字段可以用来代替枚举,也可以用于私有字段。

  // public static 字段
  static red = '#ff0000';
  static green = '#00ff00';

  // private static 字段
  static #secretColor = '#f0f0f0';

}

font.color = Colors.red;
font.color = Colors.#secretColor; // 出错

//现在,此特性可在最新版本的 Chrome 和 Node.js中使用。

五、一道经典面试题

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果:
Foo.getName(); 2
getName();4
Foo().getName();1
getName();1
new Foo.getName();2
new Foo().getName();3
new new Foo().getName();3

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1,如果你准备要拍vlog,可以提前想好每一站想要突出的重点和情绪氛围,拍摄的时候有意识地去捕捉它们。 2,“带领...
    阿赛Cynthia阅读 4,502评论 0 0
  • 价值观是指一个人对周围的客观事物(包括人、事、物)的意义、重要性的总评价和总看法。是人们对社会存在的反映。是社会成...
    企鹅星球阅读 5,314评论 0 0
  • 已修改完成七章。喜欢的亲们从上面点进去,便可逐章节阅读。 本次修改目的是修改人物名称,以及使前几章的情节更具有逻辑...
    云卿的玉麒麟阅读 2,662评论 0 8
  • 原文链接 http://note.youdao.com/share/mobile.html?id=a424d61f...
    寻心塘阅读 1,558评论 0 0
  • 目的 只在访问当前页面时加载对应组件,避免页面组件全部加载。(按需加载)ES6 Require 脚本之家-Vue按...
    付出的前端路阅读 5,525评论 0 0

友情链接更多精彩内容