feat: add es6.md cheatsheet.

2022-10-31 15:18:50 +08:00 · 2022-10-31 15:18:50 +08:00 · b258494776
commit b258494776
parent 8586f8a212
7 changed files with 749 additions and 8 deletions
--- a/README.md
+++ b/README.md
@ -36,6 +36,7 @@ Quick Reference
 [CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));-->
 [Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
 [Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
+[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
 [Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
 [Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
 [Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
@ -50,7 +51,7 @@ Quick Reference
 [RegEx](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
 [TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
 [Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
-[Vue 3 (努力中...)](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
+[Vue 3 (欢迎参与建设)](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
 <!--rehype:class=home-card-->

 ## Nodejs
--- a/docs/chmod.md
+++ b/docs/chmod.md
@ -277,7 +277,8 @@ $ find /path -type f -exec chmod 644 {} \;
 * [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_

 <!--rehype:ignore:start-->
-### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
+---
 <!--rehype:ignore:end-->

 ```html preview
--- a/docs/es6.md
+++ b/docs/es6.md
@ -0,0 +1,727 @@
+ES2015+ 备忘清单
+===
+
+快速浏览 ES2015、ES2016、ES2017、ES2018 及以后的 JavaScript 新特性
+
+常用
+---
+
+### 块范围
+<!--rehype:wrap-class=row-span-2-->
+
+#### Let
+
+```js {2,4}
+function fn () {
+  let x = 0
+  if (true) {
+    let x = 1 // 只在这个`if`里面
+  }
+}
+```
+
+#### Const
+
+```js
+const a = 1
+```
+
+`let` 是新的 `var`。 常量(`const`) 就像 `let` 一样工作，但不能重新分配。
+请参阅：[Let 和 const](https://babeljs.io/learn-es2015/#let--const)
+
+### 反引号字符串
+<!--rehype:wrap-class=row-span-2-->
+
+#### 插值
+
+```js
+const message = `Hello ${name}`
+```
+
+#### 多行字符串
+
+```js
+const str = `
+hello
+world
+`
+```
+
+模板和多行字符串。
+请参阅：[模板字符串](https://babeljs.io/learn-es2015/#template-strings)
+
+### 二进制和八进制文字
+
+```js
+let bin = 0b1010010
+let oct = 0o755
+```
+
+请参阅：[二进制和八进制文字](https://babeljs.io/learn-es2015/#binary-and-octal-literals)
+
+### 指数运算符
+
+```js {1}
+const byte = 2 ** 8
+// 同: Math.pow(2, 8)
+```
+
+### 新方法
+
+#### 新的字符串方法
+
+```js
+"hello".repeat(3)
+"hello".includes("ll")
+"hello".startsWith("he")
+"hello".padStart(8) // "   hello"
+"hello".padEnd(8) // "hello   " 
+"hello".padEnd(8, '!') // hello!!!
+"\u1E9B\u0323".normalize("NFC")
+```
+
+#### 新的数字方法
+
+```js
+Number.EPSILON
+Number.isInteger(Infinity) // false
+Number.isNaN("NaN") // false
+```
+
+#### 新的 Math 方法
+
+```js
+Math.acosh(3) // 1.762747174039086
+Math.hypot(3, 4) // 5
+Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
+```
+
+#### 新的 Array 方法
+
+```js
+// 返回一个真实的数组
+Array.from(document.querySelectorAll("*"))
+// 类似于 new Array(...)，但没有特殊的单参数行为
+Array.of(1, 2, 3)
+```
+
+请参阅: [新方法](https://babeljs.io/learn-es2015/#math--number--string--object-apis)
+
+### 类
+
+```js
+class Circle extends Shape {
+```
+
+#### 构造函数
+
+```js {1}
+  constructor (radius) {
+    this.radius = radius
+  }
+```
+
+#### 方法
+
+```js {1}
+  getArea () {
+    return Math.PI * 2 * this.radius
+  }
+```
+
+#### 调用超类方法
+
+```js {2}
+  expand (n) {
+    return super.expand(n) * Math.PI
+  }
+```
+
+#### 静态方法
+
+```js {1}
+  static createFromDiameter(diameter) {
+    return new Circle(diameter / 2)
+  }
+}
+```
+
+原型的语法糖。
+请参阅: [类](https://babeljs.io/learn-es2015/#classes)
+
+
+Promises
+--------
+
+### 做出承诺
+
+```js {1}
+new Promise((resolve, reject) => {
+  if (ok) { resolve(result) }
+  else { reject(error) }
+})
+```
+
+用于异步编程。
+请参阅：[Promises](https://babeljs.io/learn-es2015/#promises)
+
+### 使用 Promises
+
+```js {2,3}
+promise
+  .then((result) => { ··· })
+  .catch((error) => { ··· })
+```
+
+### 在 finally 中使用 Promise
+
+```js {4}
+promise
+  .then((result) => { ··· })
+  .catch((error) => { ··· })
+  .finally(() => {
+    /* 独立于成功/错误的逻辑 */
+  })
+```
+
+当承诺被履行或被拒绝时，处理程序被调用
+
+### Promise 函数
+
+```js
+Promise.all(···)
+Promise.race(···)
+Promise.reject(···)
+Promise.resolve(···)
+```
+
+### Async-await
+
+```js {2,3}
+async function run () {
+  const user = await getUser()
+  const tweets = await getTweets(user)
+  return [user, tweets]
+}
+```
+
+`async` 函数是使用函数的另一种方式。
+请参阅：[异步函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
+
+解构 Destructuring
+-------------
+
+### 解构赋值
+
+#### Arrays
+
+```js {1}
+const [first, last] = ['Nikola', 'Tesla']
+```
+
+#### Objects
+
+```js {1}
+let {title, author} = {
+  title: 'The Silkworm',
+  author: 'R. Galbraith'
+}
+```
+
+支持匹配数组和对象。
+请参阅：[解构](https://babeljs.io/learn-es2015/#destructuring)
+
+### 默认值
+
+```js
+const scores = [22, 33]
+const [math = 50, sci = 50, arts = 50] = scores
+```
+----
+```js
+// Result:
+// math === 22, sci === 33, arts === 50
+```
+
+可以在解构数组或对象时分配默认值
+
+### 函数参数
+
+```js {1}
+function greet({ name, greeting }) {
+  console.log(`${greeting}, ${name}!`)
+}
+```
+----
+```js
+greet({ name: 'Larry', greeting: 'Ahoy' })
+```
+
+对象和数组的解构也可以在函数参数中完成
+
+### 默认值
+
+```js {1}
+function greet({ name = 'Rauno' } = {}) {
+  console.log(`Hi ${name}!`);
+}
+```
+----
+```js
+greet() // Hi Rauno!
+greet({ name: 'Larry' }) // Hi Larry!
+```
+
+### 重新分配键
+
+```js {1}
+function printCoordinates({ left: x, top: y }) {
+  console.log(`x: ${x}, y: ${y}`)
+}
+```
+----
+```js
+printCoordinates({ left: 25, top: 90 })
+```
+
+此示例将 `x` 分配给 `left` 键的值
+
+### 循环
+
+```js {1}
+for (let {title, artist} of songs) {
+  ···
+}
+```
+
+赋值表达式也在循环中工作
+
+### 对象解构
+
+```js {1}
+const { id, ...detail } = song;
+```
+
+使用 `rest(...)` 运算符单独提取一些键和对象中的剩余键
+
+扩展运算符 Spread
+------
+
+### 对象扩展
+
+#### 与对象扩展
+
+```js {2}
+const options = {
+  ...defaults,
+  visible: true
+}
+```
+
+#### 没有对象扩展
+
+```js
+const options = Object.assign(
+  {}, defaults,
+  { visible: true })
+```
+
+对象扩展运算符允许您从其他对象构建新对象。
+请参阅：[对象传播](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+
+### 数组扩展
+
+#### 具有数组扩展
+
+```js {2,3}
+const users = [
+  ...admins,
+  ...editors,
+  'rstacruz'
+]
+```
+
+#### 没有数组扩展
+
+```js
+const users = admins
+  .concat(editors)
+  .concat([ 'rstacruz' ])
+```
+
+扩展运算符允许您以相同的方式构建新数组。
+请参阅：[扩展运算符](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+
+函数 Functions
+---------
+
+### 函数参数
+<!--rehype:wrap-class=row-span-3-->
+
+#### 默认参数
+
+```js {1}
+function greet (name = 'Jerry') {
+  return `Hello ${name}`
+}
+```
+
+#### Rest 参数
+
+```js {1}
+function fn(x, ...y) {
+  // y 是一个数组
+  return x * y.length
+}
+```
+
+#### 扩展
+
+```js {1}
+fn(...[1, 2, 3])
+// 与 fn(1, 2, 3) 相同
+```
+
+Default(默认), rest, spread(扩展)。
+请参阅：[函数参数](https://babeljs.io/learn-es2015/#default--rest--spread)
+
+### 箭头函数
+<!--rehype:wrap-class=row-span-3-->
+
+#### 箭头函数
+
+```js {1}
+setTimeout(() => {
+  ···
+})
+```
+
+#### 带参数
+
+```js {1}
+readFile('text.txt', (err, data) => {
+  ...
+})
+```
+
+#### 隐式返回
+
+```js {1,4,5,6}
+arr.map(n => n*2)
+// 没有花括号 = 隐式返回
+// 同: arr.map(function (n) { return n*2 })
+arr.map(n => ({
+  result: n*2
+}))
+// 隐式返回对象需要在对象周围加上括号
+```
+
+类似函数，但保留了 `this`。
+请参阅：[箭头函数](https://babeljs.io/learn-es2015/#arrows-and-lexical-this)
+
+### 参数设置默认值
+
+```js
+function log(x, y = 'World') {
+  console.log(x, y);
+}
+
+log('Hello')          // Hello World
+log('Hello', 'China') // Hello China
+log('Hello', '')      // Hello
+```
+
+### 与解构赋值默认值结合使用
+
+```js
+function foo({x, y = 5} = {}) {
+  console.log(x, y);
+}
+
+foo() // undefined 5
+```
+
+### name 属性
+
+```js
+function foo() {}
+foo.name // "foo"
+```
+
+Objects
+-------
+
+### 速记语法
+
+```js
+module.exports = { hello, bye }
+```
+同下: 
+```js
+module.exports = {
+  hello: hello, bye: bye
+}
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 方法
+
+```js {2}
+const App = {
+  start () {
+    console.log('running')
+  }
+}
+// 同: App = { start: function () {···} }
+```
+
+请参阅：[对象文字增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### Getters and setters
+
+```js {2,5}
+const App = {
+  get closed () {
+    return this.status === 'closed'
+  },
+  set closed (value) {
+    this.status = value ? 'closed' : 'open'
+  }
+}
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 计算属性名称
+
+```js {3}
+let event = 'click'
+let handlers = {
+  [`on${event}`]: true
+}
+// 同: handlers = { 'onclick': true }
+```
+
+请参阅：[对象字面量增强](https://babeljs.io/learn-es2015/#enhanced-object-literals)
+
+### 提取值
+
+```js {3,5}
+const fatherJS = { age: 57, name: "张三" }
+Object.values(fatherJS)
+// [57, "张三"]
+Object.entries(fatherJS)
+// [["age", 57], ["name", "张三"]]
+```
+
+Modules 模块
+-------
+
+### Imports 导入
+
+```js
+import 'helpers'
+// 又名: require('···')
+```
+---
+```js
+import Express from 'express'
+// 又名: const Express = require('···').default || require('···')
+```
+---
+```js
+import { indent } from 'helpers'
+// 又名: const indent = require('···').indent
+```
+---
+```js
+import * as Helpers from 'helpers'
+// 又名: const Helpers = require('···')
+```
+---
+```js
+import { indentSpaces as indent } from 'helpers'
+// 又名: const indent = require('···').indentSpaces
+```
+
+`import` 是新的 `require()`。
+请参阅：[Module imports](https://babeljs.io/learn-es2015/#modules)
+
+### Exports 导出
+
+```js
+export default function () { ··· }
+// 又名: module.exports.default = ···
+```
+----
+```js
+export function mymethod () { ··· }
+// 又名: module.exports.mymethod = ···
+```
+----
+```js
+export const pi = 3.14159
+// 又名: module.exports.pi = ···
+```
+
+----
+
+```js
+const firstName = 'Michael';
+const lastName = 'Jackson';
+const year = 1958;
+export { firstName, lastName, year };
+```
+
+----
+
+```js
+export * from "lib/math";
+```
+
+`export` 是新的`module.exports`。
+请参阅：[Module exports](https://babeljs.io/learn-es2015/#modules)
+
+### `as` 关键字重命名
+
+```js {2,8,12-14}
+import {
+  lastName as surname // 导入重命名
+} from './profile.js';
+
+function v1() { ... }
+function v2() { ... }
+
+export { v1 as default };
+// 等同于 export default v1;
+
+export {
+  v1 as streamV1,           // 导出重命名
+  v2 as streamV2,           // 导出重命名
+  v2 as streamLatestVersion // 导出重命名
+};
+```
+
+### 动态加载模块
+
+```js
+button.addEventListener('click', event => {
+  import('./dialogBox.js')
+    .then(dialogBox => {
+      dialogBox.open();
+    })
+    .catch(error => {
+      /* Error handling */
+    })
+});
+```
+
+[ES2020提案](https://github.com/tc39/proposal-dynamic-import) 引入 `import()` 函数
+
+### import() 允许模块路径动态生成
+
+```js
+const main = document.querySelector('main')
+
+import(`./modules/${someVariable}.js`)
+  .then(module => {
+    module.loadPageInto(main);
+  })
+  .catch(err => {
+    main.textContent = err.message;
+  });
+```
+
+### import.meta
+
+[ES2020](https://github.com/tc39/proposal-import-meta) 为 `import` 命令添加了一个元属性 `import.meta`，返回当前模块的元信息
+
+```js
+new URL('data.txt', import.meta.url)
+```
+
+Node.js 环境中，`import.meta.url`返回的总是本地路径，即 `file:URL` 协议的字符串，比如 `file:///home/user/foo.js`
+
+
+Generators
+----------
+
+### Generator 函数
+
+```js
+function* idMaker () {
+  let id = 0
+  while (true) { yield id++ }
+}
+```
+---
+```js
+let gen = idMaker()
+gen.next().value  // → 0
+gen.next().value  // → 1
+gen.next().value  // → 2
+```
+
+情况很复杂。
+请参阅：[Generators](https://babeljs.io/learn-es2015/#generators)
+
+### For..of + 迭代器(iterator)
+<!--rehype:wrap-class=row-span-2-->
+
+```js
+let fibonacci = {
+  [Symbol.iterator]() {
+    let pre = 0, cur = 1;
+    return {
+      next() {
+        [pre, cur] = [cur, pre + cur];
+        return { done: false, value: cur }
+      }
+    }
+  }
+}
+
+for (var n of fibonacci) {
+  // 在 1000 处截断序列
+  if (n > 1000) break;
+  console.log(n);
+}
+```
+
+用于迭代生成器和数组。
+请参阅：[For..of iteration](https://babeljs.io/learn-es2015/#iterators--forof)
+
+### 与 Iterator 接口的关系
+
+```js
+var gen = {};
+gen[Symbol.iterator] = function* () {
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+[...gen] // => [1, 2, 3]
+```
+
+`Generator` 函数赋值给 `Symbol.iterator` 属性，从而使得 `gen` 对象具有了 `Iterator` 接口，可以被 `...` 运算符遍历了
+
+
+### Symbol.iterator 属性
+
+```js
+function* gen() { /* some code */ }
+var g = gen();
+
+g[Symbol.iterator]() === g // true
+```
+
+`gen` 是一个 `Generator` 函数，调用它会生成一个遍历器对象`g`。它的 `Symbol.iterator` 属性，也是一个遍历器对象生成函数，执行后返回它自己
+
+另见
+---
+
+- [Learn ES2015](https://babeljs.io/docs/en/learn/) _(babeljs.io)_
+- [ECMAScript 6 功能概述](https://github.com/lukehoban/es6features#readme) _(github.com)_
+- [ECMAScript 6 入门教程 (阮一峰)](https://es6.ruanyifeng.com/) _(ruanyifeng.com)_
--- a/docs/quickreference.md
+++ b/docs/quickreference.md
@ -232,10 +232,16 @@ const school = <div>学校</div>;

 ```
  ```html preview
-  这里是你的 HTML 代码
+  <b>这里是你的 HTML 代码</b>
  \```
 ```

+---
+
+```html preview
+<b>这里是你的 HTML 代码</b>
+```
+
 上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览


--- a/scripts/style.css
+++ b/scripts/style.css
@ -624,6 +624,14 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
  display: initial;
 }

+.wrap.h3body-exist .wrap-header.h3wrap {
+  flex: initial;
+}
+
+.wrap.h3body-exist > .h3wrap-body {
+  flex: 1;
+}
+
 .wrap-header.h3wrap {
  z-index: 0;
  width: 100%;
--- a/scripts/utils/anchorPoint.mjs
+++ b/scripts/utils/anchorPoint.mjs
@ -11,8 +11,6 @@ function anchorPoint() {
  Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
  if (elm?.tagName === 'H3') {
    elm?.parentElement?.parentElement?.classList.add('active');
-    const box = elm?.parentElement?.parentElement;
-    console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
  }
 }
 anchorPoint();
@ -23,7 +21,6 @@ function updateAnchor(element) {
    tocanchor.classList.remove('is-active-link');
  });
  const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
-  console.log('anchor', anchor)
  if (anchor) {
    anchor.classList.add('is-active-link');
  }
--- a/scripts/utils/getTocsTree.mjs
+++ b/scripts/utils/getTocsTree.mjs
@ -81,8 +81,11 @@ export function getTocsTree(arr = [], result = []) {
    }
    if (toc.number === level && titleNum(toc.tagName) === level) {
      const header = getHeader(data.slice(n), level);
+      const childs = getChilds([...data.slice(n + 1)], level);
+      const resultChilds = getTocsTree(childs);
      const wrapCls = ['wrap'];
      const headerCls = ['wrap-header', `h${level}wrap`];
+      wrapCls.push(`h${level}body-${resultChilds.length === 0 ? 'not-' : ''}exist`);

      if (level === 1) wrapCls.push('max-container');
      const wrapStyle = toc.properties['wrap-style'];
@ -111,8 +114,6 @@ export function getTocsTree(arr = [], result = []) {
          },
        ],
      };
-      const childs = getChilds([...data.slice(n + 1)], level);
-      const resultChilds = getTocsTree(childs);
      if (resultChilds.length > 0) {
        const bodyStyle = toc.properties['body-style'];
        delete toc.properties['body-style'];