文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

从 ES2021 到 ES2023 的 13 个实用的 JavaScript 新功能

2024-11-30 05:04

关注

以下是 ECMAScript 从 ES2021 到 ES2023 中引入的一些有用且令人兴奋的功能:

ES2021

ES2022(拟议)

ES2023(拟议)

请注意,提到的 ES2022 和 ES2023 的特性目前还处于提案阶段,可能会经历变更,或者最终不会被纳入正式规范。查看官方 ECMAScript 文档或关注 TC39 委员会的讨论,以获取这些特性的最新更新,总是一个好主意。

下面是功能说明和代码示例:

ES2021

1、String.prototype.replaceAll():

const str = 'Hello, World!';
const replacedStr = str.replaceAll('o', '0');
console.log(replacedStr); // Hell0, W0rld!

2、逻辑赋值运算符(&&=、||=、??=):

let x = 5;
let y = 10;
x &&= y;
console.log(x); // 10

let a = false;
let b = true;
a ||= b;
console.log(a); // true

let c = null;
let d = 'default';
c ??= d;
console.log(c); // default

ES2022

3、Array.prototype.groupBy()

const numbers = [1, 2, 3, 4, 5, 6];
const grouped = numbers.groupBy((num) => num % 2 === 0 ? 'even' : 'odd');
console.log(grouped);
// Output: { odd: [1, 3, 5], even: [2, 4, 6] }

4、String.prototype.sliceSet()

let str = 'Hello, World!';
str.sliceSet(7, 12, 'Earth');
console.log(str); // Hello, Earth!

ES2023

5、Realms API

该功能没有附带具体的代码示例,因为它更像是对 JavaScript 运行环境的概念性补充。

6、Temporal

该功能引入了一个新的内置库。下面是一个简化示例:

const date = Temporal.now.date();
console.log(date.year); // 2023
console.log(date.month); // 6
console.log(date.day); // 2

7、Record and Tuple

const person: Record = { name: 'John', age: '30' };
console.log(person.name); // John

type Point = [number, number];
const coordinates: Point = [10, 5];
console.log(coordinates[0]); // 10

8、Promise.any()

const promises = [
  Promise.reject('Error 1'),
  Promise.resolve('Success 2'),
  Promise.reject('Error 3')
];

Promise.any(promises)
  .then((result) => console.log(result)) // Success 2
  .catch((error) => console.log(error));

9、Promise.try()

const synchronousTask = () => {
  throw new Error('Oops!');
};

Promise.try(synchronousTask)
  .then(() => console.log('Success'))
  .catch((error) => console.log(error)); // Error: Oops!

10、WeakRefs

该功能比较复杂,涉及需要跟踪对象弱引用的情况。下面是一个简单的例子:

let obj = { data: 'example' };
const weakRef = new WeakRef(obj);
obj = null;

setTimeout(() => {
  const recoveredObj = weakRef.deref();
  console.log(recoveredObj); // { data: 'example' }
}, 1000);

11、Object.observe()

该提案目前处于第二阶段,还没有可用的代码示例。

12、管道操作符

该功能允许以更易读的方式连锁函数:

const add = (x, y) => x + y;
const multiplyBy2 = (num) => num * 2;
const subtract = (x, y) => x - y;

const result = 5 |> add(3) |> multiplyBy2 |> subtract(10);
console.log(result); // -1

13、错误原因

该提案建议在错误对象中添加 cause 属性,为错误提供更多上下文信息:

const error1 = new Error('Error 1');
const error2 = new Error('Error 2');
error1.cause = error2;

console.log(error1.cause.message); // Error 2

请记住,ES2022 和 ES2023 提出的特性可能会根据 TC39 委员会正在进行的讨论和最终审批而发生变化。

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯