- 当前位置：首页 >数据库 >这些 JS 的新语法有点东西啊
这些 JS 的新语法有点东西啊
发布时间：2025-11-05 05:49:33 来源：码上建站 作者：域名
TC39 的新东西提案笔者一直有关注，攒了一些有趣的语法有点今天来聊聊。
PS：提案总共五个阶段，新东西只有到阶段 4 才会被纳入到发布规范中，语法有点其它的新东西只是有几率会被纳入。
.at()
这是语法有点个挺不错的新语法。其他有些语言是新东西可以用 arr[-1] 来获取数组末尾的元素，但是语法有点对于 JS 来说这是实现不了的事情。因为 [key] 对于对象来说就是新东西在获取 key 对应的值。数组也是语法有点对象，对于数组使用 arr[-1] 就是新东西在获取 key 为 -1 的值。
由于以上原因，语法有点我们想获取末尾元素就得这样写 arr[arr.length - 1]，新东西以后有了 at 这个方法，语法有点我们就可以通过 arr.at(-1) 来拿末尾的新东西元素了，另外同样适用类数组、企商汇字符串。
// Polyfill function at(n) { // ToInteger() abstract op n = Math.trunc(n) || 0; // Allow negative indexing from the end if(n < 0) n += this.length; // OOB access is guaranteed to return undefined if(n < 0 || n >= this.length) return undefined; // Otherwise, this is just normal property access return this[n]; }顶层 await
await 都得用 async 函数包裹大家肯定都知道，这个限制导致我们不能在全局作用域下直接使用 await，必须得包装一下。
有了这个提案以后，大家就可以直接在顶层写 await 了，算是一个便利性的提案。
目前该提案已经进入阶段 4，板上钉钉会发布。另外其实 Chrome 近期的更新已经支持了该功能。
image-20210620162451146
Error Cause
这个语法主要帮助我们便捷地传递 Error。一旦可能出错的地方一多，我们实际就不清楚错误到底是哪里产生的。如果希望外部清楚的知道上下文信息的话，我们需要封装以下 error。
async function getSolution() { const rawResource = await fetch(//domain/resource-a) .catch(err => { // How to wrap the error properly? // 1. throw new Error(Download raw resource failed: + err.message); // 2. const wrapErr = new Error(Download raw resource failed); // wrapErr.cause = err; // throw wrapErr; // 3. class CustomError extends Error { // constructor(msg, cause) { // super(msg); // this.cause = cause; // } // } // throw new CustomError(Download raw resource failed, err); }) const jobResult = doComputationalHeavyJob(rawResource); await fetch(//domain/upload, { method: POST, body: jobResult }); } await doJob(); // => TypeError: Failed to fetch那么有了这个语法以后，我们可以这样来简化代码：
async function doJob() { const rawResource = await fetch(//domain/resource-a) .catch(err => { throw new Error(Download raw resource failed, { cause: err }); }); const jobResult = doComputationalHeavyJob(rawResource); await fetch(//domain/upload, { method: POST, body: jobResult }) .catch(err => { throw new Error(Upload job result failed, { cause: err }); }); } try { await doJob(); } catch (e) { console.log(e); console.log(Caused by, e.cause); } // Error: Upload job result failed // Caused by TypeError: Failed to fetch管道运算符
这个语法的 Star 特别多，有 5k 多个，侧面也能说明是个受欢迎的语法，但是距离发布应该还有好久，源码库毕竟这个提案三四年前就有了，目前还只到阶段 1。
这个语法其实在其他函数式编程语言上很常见，主要是为了函数调用方便：
let result = exclaim(capitalize(doubleSay("hello"))); result //=> "Hello, hello!" let result = "hello" |> doubleSay |> capitalize |> exclaim; result //=> "Hello, hello!"这只是对于单个参数的用法，其它的用法有兴趣的读者可以自行阅读提案，其中涉及到了特别多的内容，这大概也是导致推进阶段慢的原因吧。
新的数据结构：Records & Tuples
这个数据结构笔者觉得发布以后会特别有用，总共新增了两种数据结构，我们可以通过 # 来声明：
1. #{ x: 1, y: 2 }2.#[1, 2, 3, 4]
这种数据结构是不可变的，类似 React 中为了做性能优化会引入的 immer 或者 immutable.js，其中的值只接受基本类型或者同是不可变的数据类型。
const proposal = #{ id: 1234, title: "Record & Tuple proposal", contents: `...`, // tuples are primitive types so you can put them in records: keywords: #["ecma", "tc39", "proposal", "record", "tuple"], }; // Accessing keys like you would with objects! console.log(proposal.title); // Record & Tuple proposal console.log(proposal.keywords[1]); // tc39 // Spread like objects! const proposal2 = #{ ...proposal, title: "Stage 2: Record & Tuple", }; console.log(proposal2.title); // Stage 2: Record & Tuple console.log(proposal2.keywords[1]); // tc39 // Object functions work on Records: console.log(Object.keys(proposal)); // ["contents", "id", "keywords", "title"]最后
以上笔者列举了一部分有意思的 TC39 提案，除了以上这些还有很多提案，各位读者有兴趣的话可以在 TC39 中寻找。免费源码下载
- 解决电脑Java平台错误的有效方法（探索如何应对和修复常见的电脑Java平台错误）
- 苹果电脑重装分区教程（详细指导如何在苹果电脑上进行重装分区操作）
- 详解在U盘上安装Ubuntu系统教程（轻松将Ubuntu安装到U盘，随时随地带着走）
- 自制U盘系统教程（以WindowsPE为基础，轻松定制个人专属U盘系统）
- 宏基E5-532G-C98P的性能与优势（一款高性能、全能的笔记本电脑）
- ab音箱的性能和特点（揭秘ab音箱的卓越音质和多功能设计）
- 使用UEFI制作Win7引导教程（详解UEFI引导方式下制作Win7启动盘的方法和步骤）
- 使用XP系统设置U盘启动教程（一步步教你在XP系统中设置U盘启动）
- 全面指南（简单易懂的制作教程，让您轻松驾驭U盘系统驱动盘）
- 使用U盘镜像安装系统的详细教程（轻松学会使用U盘安装系统的方法）
- 电脑时钟错误导致无法上网的解决方法（解决电脑时钟错误，顺利上网畅享互联网世界）
- Win8操作系统使用教程（轻松掌握Win8的关键技巧与功能）
- 使用移动硬盘制作启动盘的详细教程（一步步教你如何利用移动硬盘制作可靠的启动盘）
- 耳机保养全攻略（延长耳机寿命，享受更好音质）
- 电脑蓝屏错误时间的解决方法（提高电脑稳定性，有效应对蓝屏错误）
- 主火中置怎么样？（探索主火中置的优势与应用前景）
- 华硕台式电脑PE装机教程（详细指导您如何使用PE系统完成华硕台式电脑的装机过程）
- 如何使用PS225103进行量产教程（解密PS225103芯片的量产技巧与步骤）
- 技嘉主板H61MS1——性能稳定可靠的选择（技嘉主板H61MS1的特点与优势）
- 联想L470升级内存教程（轻松升级你的联想L470内存，提升性能！）
随便看看
- Copyright © 2025 Powered by 这些 JS 的新语法有点东西啊,码上建站 滇ICP备2023006006号-47sitemap