ES 2024 新特性提前知，附案例(1)，CSS四种定位方式的详解

WeakRef

---

WeakRef 提案主要包含两个新功能：

• 可以通过 WeakRef 类来给某个对象创建一个弱引用

• 可以通过 FinalizationRegistry 类，在某个对象被垃圾回收之后，执行一些自定义方法

上述两个新功能可以同时使用，也可以单独使用，取决于你的需求。

一个 WeakRef 对象包含一个对于某个对象的弱引用，被称为 目标 或 引用。通过弱引用一个对象，可以让该对象在没有其它引用的情况下被垃圾回收机制回收。

WeakRef 主要用来 缓存 和 映射 一些大型对象，当你希望某个对象在不被其它地方引用的情况下及时地被垃圾回收，那么你就可以使用它。

function toogle(element) {

const weakElement = new WeakRef(element);

let intervalId = null;

function toggle() {

const el = weakElement.deref();

if (!el) {

return clearInterval(intervalId);

}

const decoration = weakElement.style.textDecoration;

const style= decoration === ‘none’ ? ‘underline’ : ‘none’;

decoration = style;

}

intervalId = setInterval(toggle, 1000);

}

const element = document.getElementById(“link”);

toogle(element);

setTimeout(() => element.remove(), 10000);

FinalizationRegistry 接收一个注册器回调函数，可以利用该注册器为指定对象注册一个事件监听器，当这个对象被垃圾回收之后，会触发监听的事件，具体步骤如下。

首先，创建一个注册器：

const registry = new FinalizationRegistry(heldValue => {

// …

});

接着注册一个指定对象，同时也可以给注册器回调传递一些参数：

registry.register(theObject, “some value”);

逻辑赋值运算符

---

译者注：赋值运算符 和 表达式 的区别可以 看这里。

逻辑赋值运算符结合了 逻辑运算符 和 赋值表达式。逻辑赋值运算符有两种：

• 或等于（||=）

• 且等于（&&=）

// 或等于

|   a   |   b   | a ||= b | a (运算后) |

| true  | true  |   true  |        true         |

| true  | false |   true  |        true         |

| false | true  |   true  |        true         |

| false | false |   false |        false        |

a ||= b

// 等同于:

a || (a = b);

// 且等于

|   a   |   b   | a &&= b | a (运算后) |

| true  | true  |   true  |        true         |

| true  | false |   false |        false        |

| false | true  |   false |        false        |

| false | false |   false |        false        |

a &&= b

// 等同于:

a && (a = b);

数字分隔符

---

通过这个功能，我们利用 “（_，U+005F）” 分隔符来将数字分组，提高数字的可读性：

1_000_000_000           // 十亿

101_475_938.38          // 亿万

const amount = 12345_00;  // 12,345

const amount = 123_4500;  // 123.45 (保留 4 位小数)

const amount = 1_234_500; // 1,234,500

0.000_001 // 百万分之一

1e10_000  // 10^10000

const binary_literals = 0b1010_0001_1000_0101;

const hex_literals = 0xA0_B0_C0;

const bigInt_literals = 1_000_000_000_000n;

const octal_literal = 0o1234_5670;

总结

–

JavaScript 是一门动态类型语言，这在某些方面来说对于 web 开发是有益的。自 ES2015 之后，JavaScript 正在快速发展。在这篇文章里面，我们着重回顾了 ES2021 的一些新特性。

尽管你的项目可能并不会用到这些新特性，但是它们的确为项目开发提供了多种可能性，不是么？

相关文章

---

1. 13个JavaScript单行代码，让你看起来更专业

2. 由浅入深，66条JavaScript面试知识点

3. 20个常用的JavaScript简写技巧

最后

–

转发文章并关注公众号：前端开发博客，回复 1024，领取前端进阶资料

1. 回复「电子书」领取27本精选电子书

2. 回复「加群」加入前端大神交流群，一起学习进步

3. 回复「JS」获取 JavaScript 精选文章
   自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题

https://i-blog.csdnimg.cn/blog_migrate/15e5aaece333ce1c45a4454b4975b4bb.jpeg" />

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题