utquidem/website/docs/guides/tutorials/c04-es6-plus-and-ts/4.1-use-es6-plus.md

The meta-framework suite designed from scratch for frontend-focused modern web development.

---
title: 使用 ES6+ 语法
---

上一章节中，我们确认了当前 IDE 的编程环境。

这一章节中，我们沿用上一章节的项目和编码环境，实现一个最简单的联系人列表。

Modern.js 支持 `src` 目录下直接使用 ES6+（ES2015+）语法，原则上包括：

1. 已经进入 [Stage 4（完成阶段）](https://github.com/tc39/proposals/blob/master/finished-proposals.md)的语法，包括 ES2015（ES6）到 ES2020（ES11）以及后续版本。
2. 部分很有用且确定性较强（重构也容易）的 [Stage 1（提案阶段）](https://github.com/tc39/proposals/blob/master/stage-1-proposals.md)、[Stage 2（草案阶段）](https://github.com/tc39/proposals#stage-2)、[Stage 3（候选阶段）](https://github.com/tc39/proposals#stage-3)语法，比如：

     - [Decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators)（默认使用 legacy 提案，可通过 `output.enableLatestDecorators` 使用新版提案）
     - [Class Public Properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
     - [Class Private Properties](https://babeljs.io/docs/en/babel-plugin-proposal-private-property-in-object)、[Class Private Methods](https://babeljs.io/docs/en/babel-plugin-proposal-private-methods)
     - [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator)（默认为 minimal 提案）
     - [Partial Application](https://babeljs.io/docs/en/babel-plugin-proposal-partial-application)
     - [Bind Operator](https://babeljs.io/docs/en/babel-plugin-proposal-function-bind)
     - [export default from](https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from), [export namespace from](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from)
     - [Optional Catch Binding](https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding)
     - [Numeric Separator](https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator)

我们把 `src/App.jsx` 改成：

```js
const getAvatar = users =>
  users.map(user => ({
    ...user,
    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
  }));

const mockData =
  [
    { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
    { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
    { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
    { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
  ] |> getAvatar;

function App() {
  return (
    <ul>
      {mockData.map(({ name, avatar, email }) => (
        <li key={name}>
          <img src={avatar} width={60} height={60} /> ---
          <span>{name}</span> ---
          <span>{email}</span>
        </li>
      ))}
    </ul>
  );
}

export default App;
```

可以看到其中使用了多种 ES6+ 语法（注意生成 mockData 过程中使用了 [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator) 语法），都不需要做任何配置。

运行 `pnpm run dev`，查看运行结果：

![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/contacts.png)

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern)。