美文网首页
js的一些新特性

js的一些新特性

作者: 前端划水工 | 来源:发表于2020-01-03 11:48 被阅读0次

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

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

相关文章

  • js的一些新特性

    一、类的私有变量最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包...

  • [胡侃JS(1)] apply() 和 call()

    最近研究JS的ES6,对JS这个奇葩又有了新的感悟,但是由于之前很多地方理解不够深,在回忆时一些JS特性有一些模糊...

  • JS新特性

    ES ES5 ES6 箭头函数 Promise Symbol属性 Iterator Generator async...

  • 前端技能概况

    html 块级元素、行内元素、盒子模型 H5新特性 css css3新特性 flex 布局 动画 js js基础 ...

  • CSS相关文章

    前端面试之 CSS3 新特性 除了 HTML5 的新特性,CSS3 的新特性也是面试中经常被问到的。如何用 js ...

  • webpack之babel-loader

    1.使用【babel-loader】 来实现处理一些新的js写法,es6等一些特性的转换。 官网:http://b...

  • Typescript 3.7 常用新特性

    写在前面 不是完整的版本新特性,这里只写出了我觉得常用的新特性 可选链式运算符 ?. js 也支持了这个特性 ob...

  • JavaScript 获得变量的类型

    根据上图 js新特性支持还算良好,注意下面两种情况

  • deno.js新特性

    这是我第22篇简书。 Deno是使用V8并内置于Rust的JavaScript和TypeScript的简单、现代且...

  • es6新特性,js一些知识

    js 回收机制 标记清除 引用计数 js 代码存在内存中, css存在硬盘中, 资源在内存中 es6 新特性 ·...

网友评论

      本文标题:js的一些新特性

      本文链接:https://www.haomeiwen.com/subject/fhdzoctx.html