缓存是性能优化中简单高效的一种方式。优先的缓存策略可以缩短网页请求资源的距离，减少延迟，并且可以缓存文件进行复用，还可以减少带宽，降低网络负荷。

对于一个数据请求来说，可以分为发起请求、后端处理、浏览器响应 3 个阶段，缓存可以在 1、2 两步优化性能。

## 缓存位置

### 1. service worker

service worker 是运行在浏览器背后的独立线程。使用 service worker 必须使用 https 传输协议。service worker 可以让用户自由控制缓存哪些文件，如何匹配缓存、如何读取缓存，同时缓存还是持久性的。

### 2. Memory Cache

memory cache 是内存中的缓存，主要包含当前页面中已经抓取到的资源。


### 3. Disk Cache

disk cache 是硬盘中的缓存。

### 4. Push Cache

Push Cache 是推送缓存，是 HTTP/2 中的内容，当以上 3 种缓存都没有命中时，才会被使用。该缓存在 会话（session）中存在，会话结束就会被释放。

### 小结

通常浏览器缓存分为 2 种：强缓存 和 协商缓存，并且缓存策略都是通过设置 HTTP Header 实现的。


## 缓存过程

- 浏览器每次发起请求，都会现在浏览器缓存中查找请求的结果和标识
- 浏览器每次拿到返回的请求都会将该结果和缓存标识存入缓存中

### 强缓存

强缓存：不会向服务器发生请求，直接从缓存中读取资源。在 chrome 控制台可以看到该请求返回 200 的状态码，并且 size 显示 from disk cache 或 from memory cache。
强缓存可以通过设置 2 中 HTTP Header 实现：expires 和 Cache-Control。

- expires 
 缓存过期时间，用来指定资源到期时间，是服务器的具体的时间点。expires=max-age + 请求时间，需要和 last-modified 结合使用。expires 是 HTTP/1 的产物，受限于本地时间，修改本地时间，可能会导致缓存失效。
- cache-control 
 cache-control 可以在请求头或响应头中设置，可以组合使用多种指令。
 - public：所有内容都会被缓存
 - private: 所有内容只有客户端可以缓存
 - no-cache: 不是说浏览器不使用缓存，而是先确认下数据和服务器是否一致。也就是使用 etag 或者 last-modified 控制缓存。
 - no-store：所有内容都不缓存，不使用强缓存也不使用协商缓存
 - max-age: 表示缓存内容在多久后失效
 - s-maxage: 同 max-age，但是只在代理服务器生效（比如 cdn）
 - max-stale: 能容忍的最大过期时间
 - max-fresh: 能容忍的最小新鲜度

expires 是 HTTP 1.0 的产物，cache-control 是 HTTP 1.1 的产物，两者同时存在时，cache-control 优先级高些。

### 协商缓存

强缓存判断缓存是否超出某个时间或者范围，但是不关心服务器是否已经更新内容。为了获取服务器更新，就需要使用协商缓存。

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器决定是否使用缓存。主要有 2 中情况：

- 协商缓存生效，返回 304 和 no modified
- 协商缓存失效，返回 200 和 请求结果

协商缓存通过 2 中 HTTP Heeader 设置：last-modified 和 etag。

#### last-modified 和 if-modified-since

浏览器在第一次访问资源时，服务器返回资源的同时，在 响应头添加 last-modified，值是这个资源在服务器上的最后修改时间。

浏览器下一次请求，服务器检测到 last-modified 的值，再添加个 if-modified-since 值是 last-modified 的值。服务器再次收到请求，会根据 last-modified-since 的值于服务器中这个资源的最后修改时间对比。相同 304，如果 if-modified-since 的值比服务器上资源最后修改时间小，返回新的资源和 200。


last-modified 存在的弊端：

- 如果在本地打开缓存文件，即使没有改内容，last-modified 也会被修改，服务器就不能命中缓存
- last-modified 只能以秒计时，如果在不可感知的时间内修改，服务器还是会认为命中缓存了

因为根据文件修改时间决定缓存命中有欠缺，所以根据文件内容是否修改， HTTP 1.1 出现了 etag 和 if-none-match。


#### etag 和 if-none-match

etag 是服务器响应请求时，返回当前资源文件的一个唯一标识（有服务器生成），只要资源有变化，etag 就会重新生成。

浏览器下一次请求时，只需要把上一次 etag 的值写到 if-none-match 中，服务器再比较 if-none-match 和当前资源的 etag 是否一致。


#### 对比

精度上，etag 优于 last-modified。

Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；如果是负载均衡的服务器，各个服务器生成的Last-Modified也有可能不一致。

- 在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值。
- 在优先级上，服务器校验优先考虑Etag

### 小结

强缓存优先于协商缓存，若强缓存生效则直接使用缓存，若不生效使用协商缓存（last-modified/if-modified-since 和 etag/if-none-match）。协商缓存由服务器决定是否使用缓存。使用缓存返回 304，不使用 返回 200 和 新的资源。

## 应用

### 频繁变动的资源

> cache-control: no-cache

通过设置 no-cache 使浏览器每次都请求服务器，然后配合使用 etag 或者 last-modified 协商缓存。

### 不常变化的缓存

> cache-control: max-age=315360000

通过设置一个很大的过期时间，浏览器就会使用强缓存。而为了解决更新的问题，就需要在文件名(或者路径)中添加 hash， 版本号等动态字符，之后更改动态字符，从而达到更改引用 URL 的目的，让之前的强制缓存失效 (其实并未立即失效，只是不再使用了而已)。


## 用户行为对浏览器缓存的影响

- 打开网页，输入URL：查找 disk-cache，有就用，没有发请求
- F5 刷新：优先查找 memory-cache ，然后 disk-cache
- ctrl+ f5 （强制刷新）：浏览器不使用缓存，所有请求头加上 cache-control: no-cache

缓存是性能优化中简单高效的一种方式。优先的缓存策略可以缩短网页请求资源的距离，减少延迟，并且可以缓存文件进行复用，还可以减少带宽，降低网络负荷。


浏览器缓存机制

最近开发时遇到了URL中的 query 参数解析异常问题。表现为： 
假设 URL 中 seacr 部分为：<code>?name=dd+ =iuio</code>，常用的 qs 库解析 <code>query</code> 参数为：
<pre><code class="js language-js">{ name: 'dd =iuio' }
</code></pre>
更换使用 node <code>url</code> 模块解析也是如此。思来想去，最终还是决定手写解析方法：
<pre><code class="js language-js">const assert = require('assert');

function parseQuery(str) {
 str = str.trim().replace(/^(\?|#|&amp;)/, '');

 if (!str) {
 return {};
 }

 const res = {};

 str.split('').forEach((params) => {
 const parts = params.split('=');
 const key = parts.shift();
 const val = parts.length > 0 ? decodeURIComponent(parts.join('=')) : null;

 if (res[key] === undefined) {
 res[key] = val;
 } else if (Array.isArray(res[key])) {
 res[key].push(val);
 } else {
 res[key] = [res[key], val];
 }
 });

 return res;
}

assert.deepEqual(parseQuery(`?name=dd+ =iuio`), { name: 'dd+ =iuio' });
assert.deepEqual(parseQuery(`?name=dd+ =iuio=ui`), { name: 'dd+ =iuio=ui' });
assert.deepEqual(parseQuery(`?name=dd+ =iuio=ui&amp;name=ui#`), {
 name: ['dd+ =iuio=ui', 'ui#'],
});
assert.deepEqual(parseQuery(`?name=; , / ? : @ = + $ - _ . ! ~ * ' " ( )`), {
 name: `; , / ? : @ = + $ - _ . ! ~ * ' " ( )`,
});
</code></pre>

js 解析 url search params 特殊字符问题

<h2 id="">前言</h2>
最近看了不少关于 h5 页面制作工具。端午闲来无事，决定尝试下一个页面搭建工具。效果如下：
<img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-27/ramiko-ditor.png" alt="" /> 
<img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-27/ramiko-page.png" alt="" />
gif 录制效果不佳，可以访问以下链接进行体验。
<ul>
<li>Github：<a href="https://github.com/fantasticit/ramiko">传送门</a></li>
<li>编辑器：<a href="https://blog.wipi.tech/ramiko/editor">传送门</a></li>
<li>demo：<a href="https://blog.wipi.tech/ramiko/page/85333d78-ed24-4adf-8d09-b185fddd73fc">传送门</a></li>
</ul>







<h2 id="-1">技术栈</h2>
<ul>
<li>next.js：前端模块化开发</li>
<li>sass: 配合使用 css modules</li>
<li>nest.js：服务端语言</li>
<li>MySQL：数据存储</li>
</ul>







<h2 id="-2">整体架构</h2>
<img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-28/ramiko-jiagou.png" alt="" />
前端开发组件库，完善组件类型，编辑器读取组件完成页面搭建，将页面数据发送至服务端保存。 
访问页面，从服务端拉取页面数据，前端渲染页面即可。
<h2 id="-3">编辑器设计</h2>
<img src="https://wipi.oss-cn-shanghai.aliyuncs.com/2020-06-28/ramiko.png" alt="编辑器整体结构图" />
<pre><code class="shell language-shell">.
|____index.tsx
|____plugins ## 组件库管理
|____Editor.tsx ## 编辑器
|____type.ts ## 类型定义
|____components
| |____Pannel ## 左侧组件面板
| |____Preview ## 中间预览面板
| |____Editor ## 组件编辑器实现
| | |____index.tsx
| | |____PropsEditor
| | | |____index.tsx
| | | |____components
| | | | |____SwitchEditor
| | | | |____RadioEditor
| | | | |____ImgEditor
| | | | |____ColorEditor
| | | | |____TextEditor
| | | | |____TextareaEditor
| | | | |____NumberEditor
| | | |____renderEditorItem.tsx
| | | |____UnionEditor.tsx
| | |____FunctionEditor
| | |____SettingEditor
|____renderPage.tsx
</code></pre>
<h2 id="-4">数据结构</h2>
<h3 id="-5">定义页面数据结构</h3>
既然是可视化页面搭建，那么页面必须可以以某种数据结构进行描述。比如：
<pre><code class="js language-js">{
 setting: {
 } // 页面设置
 components: []; // 页面使用到的组件
}
</code></pre>
<h3 id="-6">定义组件数据结构</h3>
页面核心是由组件搭建而成的，那么就要定义组件的数据结构。
<pre><code class="tsx language-tsx">import React from 'react';

export const Title = ({ title, style }) =&gt; {
 return &lt;h1&gt;{title}&lt;/h1&gt;
};

Title.defaultProps = {
 title: '标题',
};

Title.schema = {
 title: {
 title: '标题',
 type: 'text'
 },
};
</code></pre>
核心可以抽象为：
<pre><code class="js language-js">{
 name: 'Title'; // 对应组件名
 props: {
 }
 schema: {
 }
}
</code></pre>
<h4 id="name"><code>name</code></h4>
不可能把组件源代码保存到服务端，所以这里只保存组件的名称，前端渲染时，根据该名称找到对应组件渲染即可（类似 Vue.js 的动态组件）
<h4 id="props"><code>props</code></h4>
React 组件的 props，这里使用 <code>defaultProps</code> 赋值默认值
<h4 id="schema"><code>schema</code></h4>
对应 <code>props</code> 各个属性的描述，用于编辑器针对进行渲染。进行组件编辑，实际上编辑的是组件的 <code>props</code>，<code>props</code> 改变组件的渲染结果自然改变。为了对 <code>props</code> 进行编辑，需要定义 <code>props</code> 的描述语言，通过 <code>props</code> 描述来进行属性编辑。这里使用如下的 <code>schema</code>。
<pre><code class="js language-js">{
 title: '标题';
 type: 'text';
}
</code></pre>
对应组件 <code>props.title</code>，通过 <code>type</code> 可以决定如何渲染编辑器组件。
<h2 id="-7">无渲染组件</h2>
可能光能渲染组件是不够的，也许需要更多的功能包装，比如埋点。这一类函数本质上也是组件。可以通过 <code>schema</code> 定义进行 <code>props</code> 编辑。举个例子：
<pre><code class="js language-js">import React from 'react';

export const Tracking = ({ op, pageSn, pageElSn, children }) =&gt; {
 const onClick = () =&gt; {
 alert('埋点测试：' + op + '_' + pageSn + '_' + pageElSn);
 };

 return &lt;div onClick={onClick}&gt;{children}&lt;/div&gt;;
};

Tracking.defaultProps = {
 op: 'click',
 pageSn: null,
 pageElSn: null
};

Tracking.schema = {
 op: {
 title: '曝光方式',
 type: 'radio',
 options: ['click', 'pv']
 },
 pageSn: {
 title: '页面编号',
 type: 'number'
 },
 pageElSn: {
 title: '元素编号',
 type: 'number'
 }
};
</code></pre>
<h2 id="-8">丰富完善</h2>
<ol>
<li>丰富组件库</li>
<li>优化编辑器：比如添加组件拖拽功能。</li>
</ol>







<h2 id="-9">项目启动</h2>
Github：<a href="https://github.com/fantasticit/ramiko">传送门</a>
在 <code>client</code> 和 <code>server</code> 分别执行 <code>yarn dev</code> 即可。

next.js + nest.js 构建页面可视化编辑器 -- Ramiko

<h2 id="lru">LRU缓存机制</h2>
运用你所掌握的数据结构，设计和实现一个 LRU (最近最少使用) 缓存机制。它应该支持以下操作： 获取数据 get 和 写入数据 put 。 
获取数据 get(key) - 如果密钥 (key) 存在于缓存中，则获取密钥的值（总是正数），否则返回 -1。 
写入数据 put(key, value) - 如果密钥已经存在，则变更其数据值；如果密钥不存在，则插入该组「密钥/数据值」。当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据值，从而为新的数据值留出空间。
示例:
<pre><code>LRUCache cache = new LRUCache( 2 /* 缓存容量 */ );

cache.put(1, 1);
cache.put(2, 2);
cache.get(1); // 返回 1
cache.put(3, 3); // 该操作会使得密钥 2 作废
cache.get(2); // 返回 -1 (未找到)
cache.put(4, 4); // 该操作会使得密钥 1 作废
cache.get(1); // 返回 -1 (未找到)
cache.get(3); // 返回 3
cache.get(4); // 返回 4
</code></pre>
<h3 id="">思路</h3>
维护待删除 key 值的队列，根据使用情况对 key 值进行位置调整。
<pre><code>/**
 * @param {number} capacity
 */
var LRUCache = function (capacity) {
 this.capacity = capacity;
 this.usedCapacity = 0;
 this.store = Object.create(null);
 this.toDeleteKeys = [];
};

/**
 * @param {number} key
 * @return {number}
 */
LRUCache.prototype.get = function (key) {
 if (this.store[key]) {
 this.moveKeyToEnd(key);
 }

 return this.store[key] || -1;
};

LRUCache.prototype.moveKeyToEnd = function (key) {
 let arr = this.toDeleteKeys;
 let idx = this.toDeleteKeys.indexOf(key);

 if (idx &lt; 0) {
 return;
 }

 if (idx === arr.length - 1) {
 return;
 }

 arr.splice(idx, 1);
 arr.push(key);
};

/**
 * @param {number} key
 * @param {number} value
 * @return {void}
 */
LRUCache.prototype.put = function (key, value) {
 if (this.store[key]) {
 this.moveKeyToEnd(key);
 this.store[key] = value;
 return;
 }

 this.toDeleteKeys.push(key);

 if (this.usedCapacity &lt; this.capacity) {
 this.store[key] = value;
 this.usedCapacity += 1;
 } else {
 let deleteKey = this.toDeleteKeys.shift();
 delete this.store[deleteKey];
 this.store[key] = value;
 }
};
</code></pre>
运行结果：
<pre><code>Accepted
18/18 cases passed (256 ms)
Your runtime beats 38.35 % of javascript submissions
Your memory usage beats 100 % of javascript submissions (58.9 MB)
</code></pre>

LeetCode：LRU缓存机制

## 背景

团队使用 TypeScript 进行 React 组件开发。开发组件的同时，需要为组件撰写文档（使用 Markdown 编写文档）。文档中需要对组件的 props 定义进行说明。

![Antd 组件的 API 说明](https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-26/WX20200426-105830%402x.png)

在开发组件的时候，是编写组件 props 的接口定义。这时候就希望能够偷懒了，直接抽取组件源代码中的接口定义和注释来生成这部分文档。

## 分析

基于上面背景进行分析，可以发现核心需求是抽取组件接口定义和注释形成特定格式的文档。

```ts
import React from "react";

export interface IProps {
 // 文字
 text: string;
 // 点击事件
 onClick: () => void;
}

const Button = ({ text }) => {
 return <button>{text}</button>;
};

export default Button;
```

其实就是抽取 `IProps` 定义然后转换成其他格式文档。

## 思路

在人人都说 `AST` 的今天，我们肯定是要使用 `AST` 来完成。

1. 将源代码转换成 `AST`
2. 遍历 `AST` 抽取 `interface` 定义
3. 继续遍历 `interface` 抽取各个字段定义 `definition`

```shell
code -> ast -> interface -> definitions
```

## 源代码 -> `AST`

站在巨人的肩膀上，使用 `babel` 解析源代码即可。

```js
const parser = require("@babel/parser");

function transformCode2Ast(code) {
 return parser.parse(code, {
 sourceType: "module",
 plugins: [
 "jsx",
 "typescript",
 "asyncGenerators",
 "bigInt",
 "classProperties",
 "classPrivateProperties",
 "classPrivateMethods",
 ["decorators", { decoratorsBeforeExport: false }],
 "doExpressions",
 "dynamicImport",
 "exportDefaultFrom",
 "exportNamespaceFrom",
 "functionBind",
 "functionSent",
 "importMeta",
 "logicalAssignment",
 "nullishCoalescingOperator",
 "numericSeparator",
 "objectRestSpread",
 "optionalCatchBinding",
 "optionalChaining",
 ["pipelineOperator", { proposal: "minimal" }],
 "throwExpressions",
 "topLevelAwait",
 "estree",
 ],
 });
}
```

转换上面的 Button 组件，`AST` 大概长这样：

```js
Node {
 type: 'File',
 start: 0,
 end: 207,
 loc:
 SourceLocation {
 start: Position { line: 1, column: 0 },
 end: Position { line: 16, column: 0 } },
 errors: [],
 program:
 Node {
 type: 'Program',
 start: 0,
 end: 207,
 loc: SourceLocation { start: [Position], end: [Position] },
 sourceType: 'module',
 interpreter: null,
 body: [ [Node], [Node], [Node], [Node] ] },
 comments:
 [ { type: 'CommentLine',
 value: ' 文字',
 start: 57,
 end: 62,
 loc: [SourceLocation] },
 { type: 'CommentLine',
 value: ' 点击事件',
 start: 81,
 end: 88,
 loc: [SourceLocation] } ] }
```

## 遍历 `AST`

同样站在巨人的肩膀上，使用 `ast-types` 对 `ast` 进行遍历。

```ts
const { visit } = require("ast-types");

function findInterface(ast) {
 let ret = Object.create(null);
 let currentInterface = null;

 visit(ast, {
 visitTSInterfaceDeclaration(nodePath) {
 currentInterface = nodePath.value.id.name;
 this.traverse(nodePath);
 },
 visitTSPropertySignature(nodePath) {
 ret[currentInterface] = ret[currentInterface] || [];
 ret[currentInterface].push(nodePath.value);
 return false;
 },
 });
 return ret;
}
```

对 `AST` 遍历抽取 `Interface` 后的结果大概长这样。

```js
Node {
 type: 'TSPropertySignature',
 start: 65,
 end: 78,
 loc: [SourceLocation],
 key: [Node],
 computed: false,
 typeAnnotation: [Node],
 leadingComments: [Array],
 trailingComments: [Array] },
Node {
 type: 'TSPropertySignature',
 start: 91,
 end: 111,
 loc: [SourceLocation],
 key: [Node],
 computed: false,
 typeAnnotation: [Node],
 leadingComments: [Array] } ] }
```

会发现各个定义在 `typeAnnotation` 中，这时候对它进行解析即可。

## 解析 TypeAnnotation

通过分析 `typeAnnotation` 很容易写出。

```js
const get = require("lodash/get");

function parseTSTypeReference(typeName) {
 const type = get(typeName, "type");
 switch (type) {
 case "TSQualifiedName":
 return `${get(typeName, "left.name")}.${get(typeName, "right.name")}`;
 default:
 return `Unknown ReferenceType`;
 }
}

function parseTSFunctionType(parameters, typeAnnotation) {
 const parseTSFunctionParameters = (parameters) => {
 if (!parameters || !parameters.length) {
 return `()`;
 }
 let args = parameters.map((parameter) => {
 return `${get(parameter, "name")}: ${parseTypeAnnotation(
 get(parameter, "typeAnnotation.typeAnnotation")
 )}`;
 });
 return "( " + args.join(", ") + ")";
 };
 const parseTSFunctionReturn = (typeAnnotation) => {
 const type = get(typeAnnotation, "type");
 switch (type) {
 case "TSVoidKeyword":
 return "void";
 case "TSTypeReference":
 return parseTSTypeReference(get(typeAnnotation, "typeName"));
 default:
 return `Unknown FunctionType`;
 }
 };
 return `${parseTSFunctionParameters(parameters)} => ${parseTSFunctionReturn(
 typeAnnotation
 )}`;
}

function parseTSTypeLiteral(members) {
 const ret = parseInterfaceDefinitions(members);
 let args = ret.map((t) => `${t.name}: ${t.type}`);
 return "{ " + args.join(", ") + " }";
}

function parseTypeAnnotation(typeAnnotation) {
 const type = get(typeAnnotation, "type");
 switch (type) {
 case "TSNumberKeyword":
 case "TSStringKeyword":
 case "TSBoleanKeyword":
 case "TSNullKeyword":
 case "TSUndefinedKeyword":
 case "TSSymbolKeyword":
 case "TSAnyKeyword":
 return type.match(/TS(\w+)Keyword/)[1].toLowerCase();
 case "TSUnionType":
 return get(typeAnnotation, "types", [])
 .map((type) => get(type, "literal.value"))
 .join(" | ");
 case "TSFunctionType":
 return parseTSFunctionType(
 get(typeAnnotation, "parameters"),
 get(typeAnnotation, "typeAnnotation.typeAnnotation")
 );
 case "TSTypeReference":
 return parseTSTypeReference(get(typeAnnotation, "typeName"));
 case "TSTypeLiteral":
 return parseTSTypeLiteral(get(typeAnnotation, "members"));
 default:
 return "UnKnowType";
 }
}

function parseInterfaceDefinitions(nodePaths) {
 const parseInterfaceDefinitionsNode = (nodePath) => {
 const name = get(nodePath, "key.name");
 const comments = get(nodePath, "leadingComments.0.value", "")
 .trim()
 .split(/[\r\n]/)
 .map((str) => str.trim().replace(/^\*/g, "").trim())
 .filter(Boolean);
 const typeAnnotation = get(nodePath, "typeAnnotation.typeAnnotation");
 const type = parseTypeAnnotation(typeAnnotation);
 return { name, type, comments };
 };
 return nodePaths.map(parseInterfaceDefinitionsNode);
}
```

至此，可以得到 `Button` 的接口定义。

```js
[
 [
 {
 name: "text",
 type: "string",
 comments: ["文字"],
 },
 {
 name: "onClick",
 type: "() => void",
 comments: ["点击事件"],
 },
 ],
];
```

接下来只要将解析后的结果转成想要的格式即可。

## 测试

```js
function parseTypeScriptComponentInterface(code) {
 let ast = transformCode2Ast(code);
 let interfaces = findInterfaces(ast);
 let definitions = Object.keys(interfaces).reduce((a, c) => {
 a[c] = a[c] || [];
 a[c].push(parseInterfaceDefinitions(interfaces[c]));
 return a;
 }, Object.create(null));
 return definitions;
}

const code = `
import React from 'react';

export interface IProps {
 /**
 * button 
 * 显示文字
 */
 text: string;
 // 点击事件
 onClick: () => void;
 // 属性 3
 props3: (arg: any) => void;
 // 属性 4
 props4: (arg: { name: string, age: number }) => React.Node
}

const Button = ({ text }) => {
 return <button>{text}</button>;
};

export default Button;
`;

let ret = parseTypeScriptComponentInterface(code);
```

输出：

```js
{
 "IProps": [
 [
 {
 "name": "text",
 "type": "string",
 "comments": [
 "button",
 "显示文字"
 ]
 },
 {
 "name": "onClick",
 "type": "() => void",
 "comments": [
 "点击事件"
 ]
 },
 {
 "name": "props3",
 "type": "( arg: any) => void",
 "comments": [
 "属性 3"
 ]
 },
 {
 "name": "props4",
 "type": "( arg: { name: string, age: number }) => React.Node",
 "comments": [
 "属性 4"
 ]
 }
 ]
 ]
}
```

[源代码地址](https://github.com/zhxuc/parse-typescript-component-interface)。

使用 AST 解析 React TypeScript Component 接口定义

# Leetcode

✅ Solutions to LeetCode by JavaScript.

## 简单

- [两数之和](https://github.com/fantasticit/LeetCode/tree/master/Easy/0001.两数之和.js)
- [整数反转](https://github.com/fantasticit/LeetCode/tree/master/Easy/0007.整数反转.js)
- [回文数](https://github.com/fantasticit/LeetCode/tree/master/Easy/0009.回文数.js)
- [有效的括号](https://github.com/fantasticit/LeetCode/tree/master/Easy/0020.有效的括号.js)
- [合并两个有序链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0021.合并两个有序链表.js)
- [删除排序数组中的重复项](https://github.com/fantasticit/LeetCode/tree/master/Easy/0026.删除排序数组中的重复项.js)
- [移除元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0027.移除元素.js)
- [实现-str-str](https://github.com/fantasticit/LeetCode/tree/master/Easy/0028.实现-str-str.js)
- [搜索插入位置](https://github.com/fantasticit/LeetCode/tree/master/Easy/0035.搜索插入位置.js)
- [最大子序和](https://github.com/fantasticit/LeetCode/tree/master/Easy/0053.最大子序和.js)
- [最后一个单词的长度](https://github.com/fantasticit/LeetCode/tree/master/Easy/0058.最后一个单词的长度.js)
- [加一](https://github.com/fantasticit/LeetCode/tree/master/Easy/0066.加一.js)
- [二进制求和](https://github.com/fantasticit/LeetCode/tree/master/Easy/0067.二进制求和.js)
- [爬楼梯](https://github.com/fantasticit/LeetCode/tree/master/Easy/0070.爬楼梯.js)
- [删除排序链表中的重复元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0083.删除排序链表中的重复元素.js)
- [合并两个有序数组](https://github.com/fantasticit/LeetCode/tree/master/Easy/0088.合并两个有序数组.js)
- [相同的树](https://github.com/fantasticit/LeetCode/tree/master/Easy/0100.相同的树.js)
- [对称二叉树](https://github.com/fantasticit/LeetCode/tree/master/Easy/0101.对称二叉树.js)
- [二叉树的最大深度](https://github.com/fantasticit/LeetCode/tree/master/Easy/0104.二叉树的最大深度.js)
- [二叉树的层次遍历-ii](https://github.com/fantasticit/LeetCode/tree/master/Easy/0107.二叉树的层次遍历-ii.js)
- [平衡二叉树](https://github.com/fantasticit/LeetCode/tree/master/Easy/0110.平衡二叉树.js)
- [二叉树的最小深度](https://github.com/fantasticit/LeetCode/tree/master/Easy/0111.二叉树的最小深度.js)
- [只出现一次的数字](https://github.com/fantasticit/LeetCode/tree/master/Easy/0136.只出现一次的数字.js)
- [环形链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0141.环形链表.js)
- [反转链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0206.反转链表.js)
- [最小栈](https://github.com/fantasticit/LeetCode/tree/master/Easy/0155.最小栈.js)
- [移除链表元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0203.移除链表元素.js)
- [存在重复元素](https://github.com/fantasticit/LeetCode/tree/master/Easy/0217.存在重复元素.js)
- [回文链表](https://github.com/fantasticit/LeetCode/tree/master/Easy/0234.回文链表.js)
- [各位相加](https://github.com/fantasticit/LeetCode/tree/master/Easy/0258.各位相加.js)
- [反转字符串](https://github.com/fantasticit/LeetCode/tree/master/Easy/0344.反转字符串.js)
- [找不同](https://github.com/fantasticit/LeetCode/tree/master/Easy/0389.找不同.js)
- [用队列实现栈](https://github.com/fantasticit/LeetCode/tree/master/Easy/0225.用队列实现栈.js)
- [斐波那契数](https://github.com/fantasticit/LeetCode/tree/master/Easy/0509.斐波那契数.js)
- [二分查找](https://github.com/fantasticit/LeetCode/tree/master/Easy/0704.二分查找)
- [反转字符串-ii](https://github.com/fantasticit/LeetCode/tree/master/Easy/0541.反转字符串-ii.js)

## 中等

- [两数相加](https://github.com/fantasticit/LeetCode/tree/master/Medium/0002.两数相加.js)
- [字符串转换整数-atoi](https://github.com/fantasticit/LeetCode/tree/master/Medium/0008.字符串转换整数-atoi.js)
- [盛最多水的容器](https://github.com/fantasticit/LeetCode/tree/master/Medium/0011.盛最多水的容器.js)
- [三数之和](https://github.com/fantasticit/LeetCode/tree/master/Medium/0015.三数之和.js)
- [最接近的三数之和](https://github.com/fantasticit/LeetCode/tree/master/Medium/0016.最接近的三数之和.js)
- [四数之和](https://github.com/fantasticit/LeetCode/tree/master/Medium/0018.四数之和.js)
- [删除链表的倒数第 n 个节点](https://github.com/fantasticit/LeetCode/tree/master/Medium/0019.删除链表的倒数第n个节点.js)
- [括号生成](https://github.com/fantasticit/LeetCode/tree/master/Medium/0022.括号生成.js)
- [两两交换链表中的节点](https://github.com/fantasticit/LeetCode/tree/master/Medium/0024.两两交换链表中的节点.js)
- [两数相除](https://github.com/fantasticit/LeetCode/tree/master/Medium/0029.两数相除.js)
- [在排序数组中查找元素的第一个和最后一个位置](https://github.com/fantasticit/LeetCode/tree/master/Medium/0034.在排序数组中查找元素的第一个和最后一个位置.js)
- [有效的数独](https://github.com/fantasticit/LeetCode/tree/master/Medium/0036.有效的数独.js)
- [字符串相乘](https://github.com/fantasticit/LeetCode/tree/master/Medium/0043.字符串相乘.js)
- [字母异位词分组](https://github.com/fantasticit/LeetCode/tree/master/Medium/0049.字母异位词分组.js)
- [pow-x-n](https://github.com/fantasticit/LeetCode/tree/master/Medium/0050.pow-x-n.js)
- [二叉树的前序遍历](https://github.com/fantasticit/LeetCode/tree/master/Medium/0144.二叉树的前序遍历.js)
- [lru 缓存机制](https://github.com/fantasticit/LeetCode/tree/master/Medium/0146.lru缓存机制.js)
- [最长上升子序列](https://github.com/fantasticit/LeetCode/tree/master/Medium/0300.最长上升子序列)
- [二叉树的中序遍历](https://github.com/fantasticit/LeetCode/tree/master/Medium/0094.二叉树的中序遍历)

## 困难

- [缺失的第一个正数](https://github.com/fantasticit/LeetCode/tree/master/Hard/0041.缺失的第一个正数.js)
- [最小覆盖子串](https://github.com/fantasticit/LeetCode/tree/master/Hard/0076.最小覆盖子串)
- [二叉树的后序遍历](https://github.com/fantasticit/LeetCode/tree/master/Hard/0145.二叉树的后序遍历)

## LICENSE

MIT


LeetCode 刷题

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">二叉树的前序遍历</h2>给定一个二叉树，返回它的 前序 遍历。示例: <pre data-lang="javascript" class="lang-javascript"><code>输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3]</code></pre><h3>思路</h3>前序遍历：跟 -&gt; 左 -&gt; 右。<h4>递归：</h4><pre data-lang="javascript" class="lang-javascript"><code>/** * @param {TreeNode} root * @return {number[]} */ var preorderTraversal = function (root) { let ret = []; let node = root; function traverse(node, ret) { if (!node) { return; } ret.push(node.val); if (node.left) { traverse(node.left, ret); } if (node.right) { traverse(node.right, ret); } } traverse(node, ret); return ret; };</code></pre><pre data-lang="javascript" class="lang-javascript"><code>Accepted 68/68 cases passed (68 ms) Your runtime beats 48.83 % of javascript submissions Your memory usage beats 72.22 % of javascript submissions (33.7 MB)</code></pre><h4>循环：</h4><pre><code>/** * @param {TreeNode} root * @return {number[]} */ var preorderTraversal = function (root) { if (!root) { return []; } let ret = []; let stack = []; stack.push(root); while (stack.length) { let node = stack.pop(); ret.push(node.val); if (node.right) { stack.push(node.right); } if (node.left) { stack.push(node.left); } } return ret; };</code></pre><pre><code>Accepted 68/68 cases passed (64 ms) Your runtime beats 69.91 % of javascript submissions Your memory usage beats 72.22 % of javascript submissions (33.8 MB)</code></pre>

LeetCode：二叉树的前序遍历

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">斐波那契数</h2>斐波那契数，通常用 <code>F(n)</code> 表示，形成的序列称为斐波那契数列。该数列由 <code>0</code> 和 <code>1</code> 开始，后面的每一项数字都是前面两项数字的和。也就是：<pre><code>F(0) = 0,   F(1) = 1 F(N) = F(N - 1) + F(N - 2), 其中 N &gt; 1.</code></pre>给定 <code>N</code>，计算 <code>F(N)</code>。示例: <pre data-lang="javascript" class="lang-javascript"><code>输入：2 输出：1 解释：F(2) = F(1) + F(0) = 1 + 0 = 1. 输入：3 输出：2 解释：F(3) = F(2) + F(1) = 1 + 1 = 2.</code></pre><h3>思路</h3><h4>普通递归</h4><pre><code>/** * @param {number} n * @return {number} */ var fib = function (n) { if (n &lt; 2) return n; return fib(n) + fib(n - 1); };</code></pre><pre><code>Accepted 31/31 cases passed (100 ms) Your runtime beats 10.54 % of javascript submissions Your memory usage beats 60 % of javascript submissions (34.2 MB)</code></pre><h4>循环实现</h4>f(2) = f(1) + f(0) =&gt; f(3) = f(2) + f(1)，所以可以直接从 0 和 1 循环到 n 即可。<pre><code>/** * @param {number} n * @return {number} */ var fib = function (n) { let a = 0; let b = 1; let t = 0; while (n-- &gt; 0) { t = a; a = b; b += t; } return a; };</code></pre><pre><code>Accepted 31/31 cases passed (64 ms) Your runtime beats 67.36 % of javascript submissions Your memory usage beats 84 % of javascript submissions (33.7 MB)</code></pre><h4>尾递归</h4>与循环实现思路一致，改造成尾递归减少调用栈。<pre><code>/** * @param {number} n * @return {number} */ var fib = function (n) { function f(a, b, n) { if (n &lt; 1) return a; return f(b, a + b, n - 1); } return f(0, 1, n); };</code></pre><pre><code>Accepted 31/31 cases passed (56 ms) Your runtime beats 93.71 % of javascript submissions Your memory usage beats 84 % of javascript submissions (33.7 MB)</code></pre>

LeetCode：斐波那契数

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">用队列实现栈</h2>使用队列实现栈的下列操作：<ul><li>push(x) -- 元素 x 入栈</li><li>pop() -- 移除栈顶元素</li><li>top() -- 获取栈顶元素</li><li>empty() -- 返回栈是否为空</li></ul>注意:<ul><li>你只能使用队列的基本操作-- 也就是 <code>push to back</code>, <code>peek/pop from front</code>, <code>size</code>, 和 <code>is empty</code> 这些操作是合法的。</li><li>你所使用的语言也许不支持队列。 你可以使用 list 或者 deque（双端队列）来模拟一个队列 , 只要是标准的队列操作即可。</li><li>你可以假设所有操作都是有效的（例如, 对一个空的栈不会调用 pop 或者 top 操作）。</li></ul><h3>思路</h3>队列：先进先出；栈：后进先出。<pre data-lang="javascript" class="lang-javascript"><code>/** * Initialize your data structure here. */ var MyStack = function () { this.elements = []; this.length = 0; }; /** * Push element x onto stack. * @param {number} x * @return {void} */ MyStack.prototype.push = function (x) { this.elements.push(x); this.length += 1; }; /** * Removes the element on top of the stack and returns that element. * @return {number} */ MyStack.prototype.pop = function () { let element = this.elements.pop(); this.length -= 1; return element; }; /** * Get the top element. * @return {number} */ MyStack.prototype.top = function () { return this.elements[this.length - 1]; }; /** * Returns whether the stack is empty. * @return {boolean} */ MyStack.prototype.empty = function () { return this.length === 0; }; /** * Your MyStack object will be instantiated and called as such: * var obj = new MyStack() * obj.push(x) * var param_2 = obj.pop() * var param_3 = obj.top() * var param_4 = obj.empty() */</code></pre>运行结果：<pre data-lang="javascript" class="lang-javascript"><code>Accepted 16/16 cases passed (68 ms) Your runtime beats 38.28 % of javascript submissions Your memory usage beats 100 % of javascript submissions (33.6 MB)</code></pre>

LeetCode：用队列实现栈

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">找不同</h2>给定两个字符串 s 和 t，它们只包含小写字母。 字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。示例: <pre data-lang="javascript" class="lang-javascript"><code>输入： s = &quot;abcd&quot; t = &quot;abcde&quot; 输出： e 解释： &#x27;e&#x27; 是那个被添加的字母。</code></pre><h3>思路</h3>首先，遍历字符串 <code>s</code> 将出现的各个字符存进对象 <code>m</code> 并进行计数；然后，遍历字符串 <code>t</code> ，同时构建 <code>t</code> 的字符对象 <code>n</code> 。如果字符在 <code>m</code> 中不存在，直接返回字符，若都存在，遍历 <code>n</code> ，比较字符在 <code>m</code> 和 <code>n</code> 中的计数是否相等。<pre data-lang="javascript" class="lang-javascript"><code>/** * @param {string} s * @param {string} t * @return {character} */ var findTheDifference = function (s, t) { let m = {}; let n = {}; for (let i = 0; i &lt; s.length; i++) { m[s[i]] = m[s[i]] ? m[s[i]] + 1 : 1; } for (let j = 0; j &lt; t.length; j++) { if (!m[t[j]]) { return t[j]; } n[t[j]] = n[t[j]] ? n[t[j]] + 1 : 1; } for (let char in n) { if (n[char] !== m[char]) { return char; } } return; };</code></pre>运行结果：<pre data-lang="javascript" class="lang-javascript"><code>Accepted 54/54 cases passed (88 ms) Your runtime beats 22.41 % of javascript submissions Your memory usage beats 53.85 % of javascript submissions (35.9 MB)</code></pre>

给定两个字符串 s 和 t，它们只包含小写字母。字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。请找出在 t 中被添加的字母。

LeetCode：找不同

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">反转字符串</h2>编写一个函数，其作用是将输入的字符串反转过来。输入字符串以字符数组 char[] 的形式给出。 不要给另外的数组分配额外的空间，你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 你可以假设数组中的所有字符都是 ASCII 码表中的可打印字符。示例: <pre data-lang="javascript" class="lang-javascript"><code>输入：[&quot;h&quot;,&quot;e&quot;,&quot;l&quot;,&quot;l&quot;,&quot;o&quot;] 输出：[&quot;o&quot;,&quot;l&quot;,&quot;l&quot;,&quot;e&quot;,&quot;h&quot;] 输入：[&quot;H&quot;,&quot;a&quot;,&quot;n&quot;,&quot;n&quot;,&quot;a&quot;,&quot;h&quot;] 输出：[&quot;h&quot;,&quot;a&quot;,&quot;n&quot;,&quot;n&quot;,&quot;a&quot;,&quot;H&quot;]</code></pre><h3>思路</h3>前半部分和后半部分两两交换即可。<pre data-lang="javascript" class="lang-javascript"><code>/** * @param {character[]} s * @return {void} Do not return anything, modify s in-place instead. */ var reverseString = function (s) { let len = s.length; let mid = ~~(len / 2); for (let i = 0; i &lt; mid; i++) { let tmp = s[i]; s[i] = s[len - 1 - i]; s[len - 1 - i] = tmp; } };</code></pre>运行结果：<pre data-lang="javascript" class="lang-javascript"><code>Accepted 478/478 cases passed (200 ms) Your runtime beats 11.27 % of javascript submissions Your memory usage beats 95.29 % of javascript submissions (46.7 MB)</code></pre>

LeetCode：反转字符串

<h2 style="text-align:start;" size="0" _root="undefined" __ownerid="undefined" __hash="undefined" __altered="false">存在重复元素</h2>给定一个整数数组，判断是否存在重复元素。 如果任意一值在数组中出现至少两次，函数返回 <code>true</code> 。如果数组中每个元素都不相同，则返回 <code>false</code>。示例: <pre data-lang="javascript" class="lang-javascript"><code>输入: [1,2,3,1] 输出: true 输入: [1,2,3,4] 输出: false 输入: [1,1,1,3,3,4,3,2,4,2] 输出: true</code></pre><h3>思路</h3>利用对象对数字计数<pre data-lang="javascript" class="lang-javascript"><code>/** * @param {number[]} nums * @return {boolean} */ var containsDuplicate = function (nums) { if (!nums || nums.length === 0 || nums.length == 1) return false; if (nums.length === 2) return nums[0] === nums[1]; let map = {}; for (let num of nums) { if (map[num]) { return true; } else { map[num] = !map[num] ? 1 : map[num] + 1; } } return false; };</code></pre>运行结果：<pre data-lang="javascript" class="lang-javascript"><code>Accepted 18/18 cases passed (88 ms) Your runtime beats 54.62 % of javascript submissions Your memory usage beats 41.31 % of javascript submissions (42.6 MB)</code></pre>

给定一个整数数组，判断是否存在重复元素。如果任意一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false。

标题	状态	分类	标签	阅读量	发布时间	操作
浏览器缓存机制	已发布			^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-07-12 18:03:51	编辑
js 解析 url search params 特殊字符问题	已发布	前端		^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-07-04 20:46:09	编辑
next.js + nest.js 构建页面可视化编辑器 -- Ramiko	已发布	前端	JS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-06-27 23:34:36	编辑
LeetCode：LRU缓存机制	已发布	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-05-06 10:28:47	编辑
使用 AST 解析 React TypeScript Component 接口定义	已发布	前端	JS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-05-01 11:41:45	编辑
LeetCode 刷题	已发布	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-04-19 14:45:04	编辑
LeetCode：二叉树的前序遍历	草稿	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-04-15 20:46:13	编辑
LeetCode：斐波那契数	草稿	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-04-14 11:14:06	编辑
LeetCode：用队列实现栈	草稿	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-04-13 10:40:43	编辑
LeetCode：找不同	草稿	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-04-11 23:16:01	编辑
LeetCode：反转字符串	草稿	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-04-10 03:13:52	编辑
LeetCode：存在重复元素	草稿	LeetCode	LeetCodeJS	^{0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 90 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9}	2020-04-06 20:20:39	编辑