23年你可能错过的 10个 前端新变化

2023年前端圈中迎来了很多新的变化，快来回顾一下吧

1. 可迭代对象 group by

使用 group by 很容易对可迭代对象进行分组，例如下面的数组示例数据

const arr = [
  { name: "芦笋", type: "蔬菜", quantity: 5 },
  { name: "香蕉", type: "水果", quantity: 0 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "樱桃", type: "水果", quantity: 5 },
  { name: "鱼", type: "肉", quantity: 22 },
];

const cb = ({ type }, index) => type;
const result = Object.groupBy(arr, cb);

Object.groupBy()")") 为可迭代对象中的每个元素调用一次提供的 callbackFn 函数。回调函数应返回一个字符串或 symbol（不属于这两种类型的值会被强制转换为字符串），用于指示元素所属的分组。callbackFn 的返回值会被用作 Map.groupBy() 返回的对象的键。每个键都有一个相关联的数组，其中包含回调函数返回相同值的所有元素。

2. toSorted

Array 实例的 toSorted() 方法是 sort() 方法的复制方法版本。它返回一个新数组，其元素按升序排列。

const arr = [5, 3, 1, 4, 2]
const newArr = arr. toSorted((a, b) => a - b);

toSorted函数接受一个可选的 compareFn 函数参数，用于指定排序顺序。如果省略，则将数组元素转换为字符串，然后根据每个字符的 Unicode 码位值进行排序。

3. dialog html 标签

2023年 html 新增的 <dialog/> 标签让我们在 html 中创建新弹窗元素更加语义化了。

<dialog id="d">
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<button onclick="d.showModal()">打开弹窗</button>

4. ios Web Push

在 ios 16.4 版本开始，添加了对 Web Push to Home Screen Web 应用程序的支持。 Web Push 使 Web 开发人员可以通过使用 Push API、Notifications API 和 Service Workers 向用户发送推送通知。

已添加到主屏幕的 Web 应用程序可以请求接收推送通知的权限，只要该请求是响应直接用户交互（例如点击 Web 应用程序提供的“订阅”按钮）即可。然后，iOS 或 iPadOS 将提示用户授予 Web 应用发送通知的权限。一旦获得许可，用户就可以在“通知设置”中管理每个 Web 应用程序的这些权限，就像 iPhone 和 iPad 上的任何其他应用程序一样。

来自网络应用程序的通知的工作方式与来自其他应用程序的通知完全相同。它们显示在锁定屏幕、通知中心和配对的 Apple Watch 上

5. Nextjs App Router 应用路由器

Next.js App Router 引入了一种新模型，用于使用 React 的最新功能（例如服务器组件、Suspense 流式传输和服务器操作）构建应用程序。

2023年在 Nextjs@13.4版本说明中，App Router 已处于 Stable 可用阶段了。

最大的变化就是我们可以直接操作服务端数据了， 例如

import kv from './kv';
 
export default function Page({ params }) {
  async function increment() {
    'use server';
    await kv.incr(`post:id:${params.id}`);
  }
 
  return (
    <form action={increment}>
      <button type="submit">Like</button>
    </form>
  );
}

有没有 php 即视感

6. Nuxt Dev Tools

2023年10月份 Nuxt Dev Tools 正式发布 v1.0 版本， 通过Nuxt Dev Tools， 可让您深入了解 Nuxt 应用程序并提高其透明度。找出性能差距，无缝管理应用程序配置。

7. Svelte Runes

Svelte 5 引入了 runes，这是一组强大的原语，用于控制 Svelte 组件内的反应性，并且首次在 .svelte.js 和 .svelte.ts 模块内控制反应性。

<script>
-    let count = 0;
+    let count = $state(0);

    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>
    clicks: {count}
</button>

感觉越来越像 react 了

Runes 还有以下成员

• $state
• $state.frozen
• $derived
• $derived.by
• $effect
• $effect.pre
• $effect.active
• $effect.root
• $props
• $inspect

8. Angular 17

Angular 17 带来的新的特性，主要变更有

优化内置控制流

Angular官方开发团队发现 许多开发人员都在*ngIf 、 *ngSwitch 和 *ngFor 方面遇到困难， 因此在新版本中，Angular中使用新的语法实现，例如

*ngIf 优化版

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

*ngSwitch 优化版

@switch (accessLevel) {
  @case ('admin') {  }
  @case ('moderator') {  }
  @default {  }
}

*ngFor 优化版

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

引入Signals

Angular Signals 实现已通过开发者预览版，到今年 5 月，在 Angular v18 中，我们将提供许多功能来进一步改善开发人员使用 Signals 的体验。

const count = signal(0);

// Signals are getter functions - calling them reads their value.
console.log('The count is: ' + count());

Deferrable Views

Angular 17的可延迟视图将性能和开发人员体验提升到了一个新的水平，因为它们通过前所未有的人体工程学实现了声明性和强大的延迟加载。

@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}

9. Nodejs

Permissions

nodejs@21 版本中引入了 Permissions 模型, 让开发者在程序执行期间限制对特定资源的访问，例如文件系统操作、子进程生成和 worker 线程创建。权限分为 Module-based permissions 基于模块的权限 和 Process-based permissions 基于进程的权限

内置WebSocket客户端

10 月 17 日发布的 Node.js 21 配备了一个实验性的、与浏览器兼容的 WebSocket 实现，通过 --experimental-websocket 标志启用。 WebSocket 支持浏览器和服务器之间的双向通信，无需轮询服务器以获得答复。

const sock = new WebSocket ("ws: //someurl");

10. Bun JS 运行时

Zig 编写的新 JavaScript 运行时 Bun，带来了出色的开发人员体验和一些狂野的东西， 关于性能的声明以及在首次发布后发现了相当多的错误，但它仍然是未来处理后端 JavaScript 的一种有前途的新方法