QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 4154|回复: 0

[HTML/CSS/JS] 这些 JS 新语法有点东西啊

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1322 小时
   最后登录 : 2025-11-29

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-7-9 09:12:45 | 显示全部楼层 |阅读模式
       TC39是 Ecma International标准化组织旗下的技术委员会的一员,它负责管理着ECMAScript语言和标准化API。ECMAScript语言和标准化API又可以分为两个标准:
- t( c) c1 C, e4 p
  • 第一个是ECMA-262标准,它包含了语言的语法和核心的API。
  • 另一个标准ECMA-402则包含了一些国际化的API,提供给ECMAScript核心API选择性支持。- p  ~5 V; Z2 e; m; K, N0 e! g
一、.at()
9 E- n4 k& H4 j% c9 u1 B# F       这是个挺不错的新语法。其他有些语言是可以用 arr[-1] 来获取数组末尾的元素,但是对于 JS 来说这是实现不了的事情。因为 [key] 对于对象来说就是在获取 key 对应的值。数组也是对象,对于数组使用 arr[-1] 就是在获取 key 为 -1 的值。
0 @, }. ?8 T/ d- z       由于以上原因,我们想获取末尾元素就得这样写 arr[arr.length - 1],以后有了 at 这个方法,我们就可以通过 arr.at(-1) 来拿末尾的元素了,另外同样适用类数组、字符串。
4 d# }/ }/ I4 I% m0 O3 |, K. C
// 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
1 c0 [8 u! a$ R& b       await 都得用 async 函数包裹大家肯定都知道,这个限制导致我们不能在全局作用域下直接使用 await,必须得包装一下。有了这个提案以后,大家就可以直接在顶层写 await 了,算是一个便利性的提案。目前该提案已经进入阶段 4,板上钉钉会发布。另外其实 Chrome 近期的更新已经支持了该功能。6 i" J, d( p( d0 ~# n9 `+ M: \
1.jpg
3 e1 J$ x/ z4 g2 a1 E2 |' H, b, Y三、Error Cause
; ^( X0 \/ v7 P( U: u       这个语法主要帮助我们便捷地传递Error。一旦可能出错的地方一多,实际就不清楚错误到底是哪里产生的。如果希望外部清楚的知道上下文信息的话,需要封装以下error。* Z) S4 r6 g' y$ A4 @  a
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
      那么有了这个语法以后,就可以这样来简化代码:8 @& \1 c4 s) ]: O
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
四、管道运算符
, r4 Q! C. R$ f$ P9 M& @7 `1 N       这个语法的Star特别多,有5k多个,侧面也能说明是个受欢迎的语法,但是距离发布应该还有好久,毕竟这个提案三四年前就有了,目前还只到阶段 1。这个语法其实在其他函数式编程语言上很常见,主要是为了函数调用方便:0 H0 T3 v5 E( _3 l
let result = exclaim(capitalize(doubleSay("hello")));
result //=> "Hello, hello!"
let result = "hello"
  |> doubleSay
  |> capitalize
  |> exclaim;
result //=> "Hello, hello!"
      这只是对于单个参数的用法,其它的用法有兴趣的读者可以自行阅读提案,其中涉及到了特别多的内容,这大概也是导致推进阶段慢的原因吧。8 i7 @. d- p, L1 o
五、新的数据结构:Records & Tuples/ M+ g4 p0 ^8 j0 ]
       这个数据结构笔者觉得发布以后会特别有用,总共新增了两种数据结构,可以通过#来声明:
; E$ K4 Y; S6 G1 ?- K. F5 Z1 M% H
#{ x: 1, y: 2 }) h/ ]0 V' h# U  v$ o# d2 R% L' d6 o
#[1, 2, 3, 4]
! Y5 g; ?& N7 y* t8 z! k$ ~
     这种数据结构是不可变的,类似 React 中为了做性能优化会引入的 immer 或者 immutable.js,其中的值只接受基本类型或者同是不可变的数据类型。+ n. p! H2 C8 x
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"]
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2026-1-11 12:23

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表