mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
Compare commits
18 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4f68d94311 | |||
| 10d7679216 | |||
| 516ff9af69 | |||
| a9896a265f | |||
| 5f533d8332 | |||
| f60826e6da | |||
| b258494776 | |||
| 8586f8a212 | |||
| f8a706064a | |||
| 48b5d0fba3 | |||
| 18b276097d | |||
| 333891b7c3 | |||
| e145ecc715 | |||
| 1e4b812bc3 | |||
| 909527deec | |||
| ce02da885e | |||
| fb464bd4ff | |||
| 9a2b43372a |
4
.github/ISSUE_TEMPLATE/cheatsheet-request.md
vendored
4
.github/ISSUE_TEMPLATE/cheatsheet-request.md
vendored
@ -16,5 +16,5 @@ assignees: jaywcjlove
|
|||||||
提供参考资料地址
|
提供参考资料地址
|
||||||
----
|
----
|
||||||
|
|
||||||
- [参考地址 1](https://xxx.com)
|
- [提供 参考地址 1](https://jaywcjlove.github.io/reference)
|
||||||
- [官网地址](https://xxx.com)
|
- [提供 官网地址](https://jaywcjlove.github.io/reference)
|
||||||
@ -23,6 +23,7 @@ Quick Reference
|
|||||||
[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
|
[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
|
||||||
[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||||
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||||
|
[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing-->
|
||||||
[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||||
[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||||
[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
|
[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
|
||||||
@ -36,6 +37,7 @@ Quick Reference
|
|||||||
[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));-->
|
[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));-->
|
[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));-->
|
[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));-->
|
[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));-->
|
[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));-->
|
[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
|
||||||
@ -50,7 +52,7 @@ Quick Reference
|
|||||||
[RegEx](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
|
[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));-->
|
[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 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));&class=contributing-->
|
||||||
<!--rehype:class=home-card-->
|
<!--rehype:class=home-card-->
|
||||||
|
|
||||||
## Nodejs
|
## Nodejs
|
||||||
@ -73,13 +75,14 @@ Quick Reference
|
|||||||
|
|
||||||
## Linux 命令
|
## Linux 命令
|
||||||
|
|
||||||
|
[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
|
[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
|
||||||
[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
|
[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
|
||||||
[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
[find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
[htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));-->
|
[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));-->
|
||||||
[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||||
|
|||||||
788
docs/awk.md
Normal file
788
docs/awk.md
Normal file
@ -0,0 +1,788 @@
|
|||||||
|
Awk 备忘清单
|
||||||
|
===
|
||||||
|
|
||||||
|
这是 [GNU awk](https://www.gnu.org/software/gawk/manual/gawk.html) 的单页快速参考备忘单，其中涵盖了常用的 `awk` 表达式和命令。
|
||||||
|
|
||||||
|
入门
|
||||||
|
------
|
||||||
|
|
||||||
|
### 试试
|
||||||
|
|
||||||
|
该程序可用于选择文件中的特定记录并对其执行操作
|
||||||
|
|
||||||
|
```shell
|
||||||
|
$ awk -F: '{print $1, $NF}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
| - | - | - |
|
||||||
|
|---|---------------|---------------------------|
|
||||||
|
| | `-F:` | 冒号作为分隔符 |
|
||||||
|
| | `{...}` | awk 程序 |
|
||||||
|
| | `print` | 打印当前记录 |
|
||||||
|
| | `$1` | 第一个字段 |
|
||||||
|
| | `$NF` | 最后一个字段 |
|
||||||
|
| | `/etc/passwd` | 输入数据文件 |
|
||||||
|
|
||||||
|
### Awk 程序
|
||||||
|
|
||||||
|
```bash
|
||||||
|
BEGIN {<初始化>}
|
||||||
|
<pattern 1> {<计划动作>}
|
||||||
|
<pattern 2> {<计划动作>}
|
||||||
|
...
|
||||||
|
END {< 最后的动作 >}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 示例
|
||||||
|
|
||||||
|
```bash
|
||||||
|
awk '
|
||||||
|
BEGIN { print "\n>>>Start" }
|
||||||
|
!/(login|shutdown)/ { print NR, $0 }
|
||||||
|
END { print "<<<END\n" }
|
||||||
|
' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
### 变量
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$1 $2/$(NF-1) $3/$NF
|
||||||
|
▼ ▼ ▼
|
||||||
|
┌──────┬──────────────┬───────┐
|
||||||
|
$0/NR ▶ │ ID │ WEBSITE │ URI │
|
||||||
|
├──────┼──────────────┼───────┤
|
||||||
|
$0/NR ▶ │ 1 │ baidu.com │ awk │
|
||||||
|
├──────┼──────────────┼───────┤
|
||||||
|
$0/NR ▶ │ 2 │ google.com │ 25 │
|
||||||
|
└──────┴──────────────┴───────┘
|
||||||
|
```
|
||||||
|
---
|
||||||
|
|
||||||
|
```shell
|
||||||
|
# 第一个和最后一个字段
|
||||||
|
awk -F: '{print $1,$NF}' /etc/passwd
|
||||||
|
# 带行号
|
||||||
|
awk -F: '{print NR, $0}' /etc/passwd
|
||||||
|
# 倒数第二个字段
|
||||||
|
awk -F: '{print $(NF-1)}' /etc/passwd
|
||||||
|
# 自定义字符串
|
||||||
|
awk -F: '{print $1 "=" $6}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Awk 变量](#awk-变量)
|
||||||
|
|
||||||
|
### Awk 程序示例
|
||||||
|
<!--rehype:wrap-class=row-span-2 col-span-2-->
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {print "hello world"}' # 打印 "hello world"
|
||||||
|
awk -F: '{print $1}' /etc/passwd # -F: 指定字段分隔符
|
||||||
|
# /pattern/ 仅对匹配的模式执行操作
|
||||||
|
awk -F: '/root/ {print $1}' /etc/passwd
|
||||||
|
# BEGIN 块在开始时执行一次
|
||||||
|
awk -F: 'BEGIN { print "uid"} { print $1 }' /etc/passwd
|
||||||
|
# END 块在最后执行一次
|
||||||
|
awk -F: '{print $1} END { print "-done-"}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
### 条件
|
||||||
|
|
||||||
|
```bash
|
||||||
|
awk -F: '$3>30 {print $1}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Conditions 条件](#awk-条件)
|
||||||
|
|
||||||
|
### 生成 1000 个空格
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN{
|
||||||
|
while (a++ < 1000)
|
||||||
|
s=s " ";
|
||||||
|
print s
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Loops](#awk-循环)
|
||||||
|
|
||||||
|
### 数组 Arrays
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
fruits["mango"] = "yellow";
|
||||||
|
fruits["orange"] = "orange"
|
||||||
|
for(fruit in fruits) {
|
||||||
|
print fruit " 的颜色是 " fruits[fruit]
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Awk 数组](#awk-数组)
|
||||||
|
|
||||||
|
### 函数 Functions
|
||||||
|
|
||||||
|
```shell
|
||||||
|
# => 5
|
||||||
|
awk 'BEGIN{print length("hello")}'
|
||||||
|
# => HELLO
|
||||||
|
awk 'BEGIN{print toupper("hello")}'
|
||||||
|
# => hel
|
||||||
|
awk 'BEGIN{print substr("hello", 1, 3)}'
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Functions](#awk-函数)
|
||||||
|
|
||||||
|
Awk 变量
|
||||||
|
---------
|
||||||
|
|
||||||
|
### 内置变量
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
`$0` | 全线
|
||||||
|
`$1, $2...$NF` | 第一个，第二个……最后一个字段
|
||||||
|
`NR` | 记录总数(`N`umber of `R`ecords)
|
||||||
|
`NF` | N个字段(`N`number of `F`ields)
|
||||||
|
`OFS` | `O`utput `F`ield `S`eparator<br> 输出字段分隔符 _(default " ")_
|
||||||
|
`FS` | input `F`ield `S`eparator <br> 输入字段分隔符 _(default " ")_
|
||||||
|
`ORS` | `O`utput `R`ecord `S`eparator <br> 输出记录分隔符 _(default "\n")_
|
||||||
|
`RS` | input `R`ecord `S`eparator <br> 输入记录分隔符 _(default "\n")_
|
||||||
|
`FILENAME` | 文件名
|
||||||
|
|
||||||
|
### 表达式
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
`$1 == "root"` | 第一个字段等于根
|
||||||
|
`{print $(NF-1)}` | 倒数第二个字段
|
||||||
|
`NR!=1{print $0}` | 从第 2 条记录开始
|
||||||
|
`NR > 3` | 从第 4 条记录开始
|
||||||
|
`NR == 1` | 第一次记录
|
||||||
|
`END{print NR}` | 总记录
|
||||||
|
`BEGIN{print OFMT}` | 输出格式
|
||||||
|
`{print NR, $0}` | 行号
|
||||||
|
`{print NR " " $0}` | 行号(选项卡)
|
||||||
|
`{$1 = NR; print}` | 用行号替换第一个字段
|
||||||
|
`$NF > 4` | 最后一个字段 > 4
|
||||||
|
`NR % 2 == 0` | 甚至记录
|
||||||
|
`NR==10, NR==20` | 记录 10 到 20
|
||||||
|
`BEGIN{print ARGC}` | 总 `arguments`
|
||||||
|
`ORS=NR%5?",":"\n"` | 连接记录
|
||||||
|
|
||||||
|
### 示例
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
打印总和和平均值
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: '{sum += $3}
|
||||||
|
END { print sum, sum/NR }
|
||||||
|
' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
打印参数
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
for (i = 1; i < ARGC; i++)
|
||||||
|
print ARGV[i] }' a b c
|
||||||
|
```
|
||||||
|
|
||||||
|
输出字段分隔符为逗号
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN { FS=":";OFS=","}
|
||||||
|
{print $1,$2,$3,$4}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
匹配位置
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
if (match("One Two Three", "Tw"))
|
||||||
|
print RSTART }'
|
||||||
|
```
|
||||||
|
|
||||||
|
匹配时长
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
if (match("One Two Three", "re"))
|
||||||
|
print RLENGTH }'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 仅限 GNU awk
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
`ENVIRON` | 环境变量
|
||||||
|
`IGNORECASE` | 忽略大小写
|
||||||
|
`CONVFMT` | 转换格式
|
||||||
|
`ERRNO` | 系统错误
|
||||||
|
`FIELDWIDTHS` | 固定宽度字段
|
||||||
|
|
||||||
|
### 环境变量
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
`ARGC` | 数字或参数
|
||||||
|
`ARGV` | 参数数组
|
||||||
|
`FNR` | 文件记录数(`F`ile `N`umber of `R`ecords)
|
||||||
|
`OFMT` | 数字格式 _(default "%.6g")_
|
||||||
|
`RSTART` | 字符串中的位置
|
||||||
|
`RLENGTH` | 比赛时长
|
||||||
|
`SUBSEP` | 多维数组分隔符 _(default "\034")_
|
||||||
|
`ARGIND` | 参数索引
|
||||||
|
|
||||||
|
### 定义变量
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -v var1="Hello" -v var2="Wold" '
|
||||||
|
END {print var1, var2}
|
||||||
|
' </dev/null
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 使用 shell 变量
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -v varName="$PWD" '
|
||||||
|
END {print varName}' </dev/null
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
Awk 运算符
|
||||||
|
---------
|
||||||
|
|
||||||
|
### 运算符
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
`{print $1}` | 第一个字段
|
||||||
|
`$2 == "foo"` | 等于
|
||||||
|
`$2 != "foo"` | 不等于
|
||||||
|
`"foo" in array` | 在数组中
|
||||||
|
|
||||||
|
#### 正则表达式
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
| `/regex/` | 行匹配|
|
||||||
|
| `!/regex/` | 行不匹配|
|
||||||
|
| `$1 ~ /regex/` | 字段匹配|
|
||||||
|
| `$1 !~ /regex/` | 字段不匹配|
|
||||||
|
|
||||||
|
#### 更多条件
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
`($2 <= 4 \|\| $3 < 20)` | 或者
|
||||||
|
`($1 == 4 && $3 < 20)` | 和
|
||||||
|
|
||||||
|
### 运算符
|
||||||
|
|
||||||
|
#### 算术运算
|
||||||
|
|
||||||
|
- `+`
|
||||||
|
- `-`
|
||||||
|
- `*`
|
||||||
|
- `/`
|
||||||
|
- `%`
|
||||||
|
- `++`
|
||||||
|
- `--`
|
||||||
|
<!--rehype:className=cols-3 style-none-->
|
||||||
|
|
||||||
|
#### 速记作业
|
||||||
|
|
||||||
|
- `+=`
|
||||||
|
- `-=`
|
||||||
|
- `*=`
|
||||||
|
- `/=`
|
||||||
|
- `%=`
|
||||||
|
<!--rehype:className=cols-3 style-none-->
|
||||||
|
|
||||||
|
#### 比较运算符
|
||||||
|
|
||||||
|
- `==`
|
||||||
|
- `!=`
|
||||||
|
- `<`
|
||||||
|
- `>`
|
||||||
|
- `<=`
|
||||||
|
- `>=`
|
||||||
|
<!--rehype:className=cols-3 style-none-->
|
||||||
|
|
||||||
|
### 示例
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
if ("foo" ~ "^fo+$")
|
||||||
|
print "Fooey!";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 不匹配
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
if ("boo" !~ "^fo+$")
|
||||||
|
print "Boo!";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 如果在数组中
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
assoc["foo"] = "bar";
|
||||||
|
assoc["bar"] = "baz";
|
||||||
|
if ("foo" in assoc)
|
||||||
|
print "Fooey!";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
Awk 函数
|
||||||
|
----------
|
||||||
|
|
||||||
|
### 常用功能
|
||||||
|
<!--rehype:wrap-class=col-span-2-->
|
||||||
|
|
||||||
|
函数 | 描述
|
||||||
|
:- | :-
|
||||||
|
`index(s,t)` | 字符串 `s` 中出现字符串 `t` 的位置，如果未找到则为 `0`
|
||||||
|
`length(s)` | 字符串 `s` 的长度(如果没有 `arg`，则为 `$0`)
|
||||||
|
`rand` | `0` 到 `1` 之间的随机数
|
||||||
|
`substr(s,index,len)` | 返回从索引开始的 `s` 的 `len-char` 子字符串(从 `1` 开始计数)
|
||||||
|
`srand` | 为 `rand` 设置种子并返回之前的种子
|
||||||
|
`int(x)` | 将 `x` 截断为整数值
|
||||||
|
`split(s,a,fs)` | 将字符串 `s` 拆分为数组 `a` 由 `fs` 拆分，返回 `a` 的长度
|
||||||
|
`match(s,r)` | 字符串 `s` 中出现正则表达式 `r` 的位置，如果未找到，则为 `0`
|
||||||
|
`sub(r,t,s)` | 将 `t` 替换为字符串 `s` 中第一次出现的正则表达式 `r`(如果未给出 `s`，则替换为 `$0`)
|
||||||
|
`gsub(r,t,s)` | 用 `t` 替换字符串 `s` 中所有出现的正则表达式 `r`
|
||||||
|
`system(cmd)` | 执行cmd并返回退出状态
|
||||||
|
`tolower(s)` | 字符串 `s` 转小写
|
||||||
|
`toupper(s)` | 字符串 `s` 转大写
|
||||||
|
`getline` | 将 `$0` 设置为当前输入文件中的下一个输入记录
|
||||||
|
|
||||||
|
|
||||||
|
### 用户定义函数
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk '
|
||||||
|
# 返回最小数量
|
||||||
|
function find_min(num1, num2){
|
||||||
|
if (num1 < num2)
|
||||||
|
return num1
|
||||||
|
return num2
|
||||||
|
}
|
||||||
|
# 返回最大数量
|
||||||
|
function find_max(num1, num2){
|
||||||
|
if (num1 > num2)
|
||||||
|
return num1
|
||||||
|
return num2
|
||||||
|
}
|
||||||
|
# 主功能
|
||||||
|
function main(num1, num2){
|
||||||
|
result = find_min(num1, num2)
|
||||||
|
print "Minimum =", result
|
||||||
|
|
||||||
|
result = find_max(num1, num2)
|
||||||
|
print "Maximum =", result
|
||||||
|
}
|
||||||
|
# 脚本执行从这里开始
|
||||||
|
BEGIN {
|
||||||
|
main(10, 60)
|
||||||
|
}
|
||||||
|
'
|
||||||
|
```
|
||||||
|
|
||||||
|
Awk 数组
|
||||||
|
---------
|
||||||
|
|
||||||
|
### 带索引的数组
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
arr[0] = "foo";
|
||||||
|
arr[1] = "bar";
|
||||||
|
print(arr[0]); # => foo
|
||||||
|
delete arr[0];
|
||||||
|
print(arr[0]); # => ""
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 带键的数组
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
assoc["foo"] = "bar";
|
||||||
|
assoc["bar"] = "baz";
|
||||||
|
print("baz" in assoc); # => 0
|
||||||
|
print("foo" in assoc); # => 1
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 带拆分的数组
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
split("foo:bar:baz", arr, ":");
|
||||||
|
for (key in arr)
|
||||||
|
print arr[key];
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 带有排序的数组
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
arr[0] = 3
|
||||||
|
arr[1] = 2
|
||||||
|
arr[2] = 4
|
||||||
|
n = asort(arr)
|
||||||
|
for (i = 1; i <= n ; i++)
|
||||||
|
print(arr[i])
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 多维
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
multidim[0,0] = "foo";
|
||||||
|
multidim[0,1] = "bar";
|
||||||
|
multidim[1,0] = "baz";
|
||||||
|
multidim[1,1] = "boo";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 多维迭代
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
array[1,2]=3;
|
||||||
|
array[2,3]=5;
|
||||||
|
for (comb in array) {
|
||||||
|
split(comb,sep,SUBSEP);
|
||||||
|
print sep[1], sep[2],
|
||||||
|
array[sep[1],sep[2]]
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
Awk 条件
|
||||||
|
----------
|
||||||
|
|
||||||
|
### if-else 语句
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -v count=2 'BEGIN {
|
||||||
|
if (count == 1)
|
||||||
|
print "Yes";
|
||||||
|
else
|
||||||
|
print "Huh?";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 三元运算符
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -v count=2 'BEGIN {
|
||||||
|
print (count==1) ? "Yes" : "Huh?";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### 存在
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
assoc["foo"] = "bar";
|
||||||
|
assoc["bar"] = "baz";
|
||||||
|
if ("foo" in assoc)
|
||||||
|
print "Fooey!";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 不存在
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
assoc["foo"] = "bar";
|
||||||
|
assoc["bar"] = "baz";
|
||||||
|
if ("Huh" in assoc == 0 )
|
||||||
|
print "Huh!";
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### switch
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: '{
|
||||||
|
switch (NR * 2 + 1) {
|
||||||
|
case 3:
|
||||||
|
case "11":
|
||||||
|
print NR - 1
|
||||||
|
break
|
||||||
|
case /2[[:digit:]]+/:
|
||||||
|
print NR
|
||||||
|
default:
|
||||||
|
print NR + 1
|
||||||
|
case -1:
|
||||||
|
print NR * -1
|
||||||
|
}
|
||||||
|
}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
Awk 循环
|
||||||
|
----------
|
||||||
|
|
||||||
|
### for...i
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
for (i = 0; i < 10; i++)
|
||||||
|
print "i=" i;
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 1 到 100 之间的 2 的幂
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
for (i = 1; i <= 100; i *= 2)
|
||||||
|
print i
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### for...in
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
assoc["key1"] = "val1"
|
||||||
|
assoc["key2"] = "val2"
|
||||||
|
for (key in assoc)
|
||||||
|
print assoc[key];
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Arguments
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
for (argnum in ARGV)
|
||||||
|
print ARGV[argnum];
|
||||||
|
}' a b c
|
||||||
|
```
|
||||||
|
|
||||||
|
### 示例
|
||||||
|
<!--rehype:wrap-class=row-span-3-->
|
||||||
|
|
||||||
|
#### 反向记录
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: '{ x[NR] = $0 }
|
||||||
|
END {
|
||||||
|
for (i = NR; i > 0; i--)
|
||||||
|
print x[i]
|
||||||
|
}
|
||||||
|
' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 反向字段
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: '{
|
||||||
|
for (i = NF; i > 0; i--)
|
||||||
|
printf("%s ",$i);
|
||||||
|
print ""
|
||||||
|
}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 按记录求和
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: '{
|
||||||
|
s=0;
|
||||||
|
for (i = 1; i <= NF; i++)
|
||||||
|
s += $i;
|
||||||
|
print s
|
||||||
|
}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 总结整个文件
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: '
|
||||||
|
{for (i = 1; i <= NF; i++)
|
||||||
|
s += $i;
|
||||||
|
};
|
||||||
|
END{print s}
|
||||||
|
' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
### while
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
while (a < 10) {
|
||||||
|
print "- " " concatenation: " a
|
||||||
|
a++;
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### do...while
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk '{
|
||||||
|
i = 1
|
||||||
|
do {
|
||||||
|
print $0
|
||||||
|
i++
|
||||||
|
} while (i <= 5)
|
||||||
|
}' /etc/passwd
|
||||||
|
```
|
||||||
|
|
||||||
|
### Break
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
break_num = 5
|
||||||
|
for (i = 0; i < 10; i++) {
|
||||||
|
print i
|
||||||
|
if (i == break_num)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
### Continue
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN {
|
||||||
|
for (x = 0; x <= 10; x++) {
|
||||||
|
if (x == 5 || x == 6)
|
||||||
|
continue
|
||||||
|
printf "%d ", x
|
||||||
|
}
|
||||||
|
print ""
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
Awk 格式化打印
|
||||||
|
---------
|
||||||
|
|
||||||
|
### 用法
|
||||||
|
|
||||||
|
#### 右对齐
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN{printf "|%10s|\n", "hello"}'
|
||||||
|
# | hello|
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 左对齐
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk 'BEGIN{printf "|%-10s|\n", "hello"}'
|
||||||
|
# |hello |
|
||||||
|
```
|
||||||
|
|
||||||
|
### 通用说明符
|
||||||
|
|
||||||
|
特征符 | 描述
|
||||||
|
:- | :-
|
||||||
|
`c` | ASCII 字符
|
||||||
|
`d` | 十进制整数
|
||||||
|
`e`, `E`, `f` | 浮点格式
|
||||||
|
`o` | 无符号八进制值
|
||||||
|
`s` | 细绳
|
||||||
|
`%` | 文字百分比
|
||||||
|
|
||||||
|
### Space 空间
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: '{
|
||||||
|
printf "%-10s %s\n", $1, $(NF-1)
|
||||||
|
}' /etc/passwd | head -n 3
|
||||||
|
```
|
||||||
|
|
||||||
|
输出
|
||||||
|
|
||||||
|
```shell
|
||||||
|
root /root
|
||||||
|
bin /bin
|
||||||
|
daemon /sbin
|
||||||
|
```
|
||||||
|
|
||||||
|
### Header 标题头
|
||||||
|
|
||||||
|
```shell
|
||||||
|
awk -F: 'BEGIN {
|
||||||
|
printf "%-10s %s\n", "User", "Home"
|
||||||
|
printf "%-10s %s\n", "----","----"}
|
||||||
|
{ printf "%-10s %s\n", $1, $(NF-1) }
|
||||||
|
' /etc/passwd | head -n 5
|
||||||
|
```
|
||||||
|
|
||||||
|
输出
|
||||||
|
|
||||||
|
```shell
|
||||||
|
User Home
|
||||||
|
---- ----
|
||||||
|
root /root
|
||||||
|
bin /bin
|
||||||
|
daemon /sbin
|
||||||
|
```
|
||||||
|
|
||||||
|
各种各样的
|
||||||
|
-------------
|
||||||
|
|
||||||
|
### 正则表达式元字符
|
||||||
|
- `\`
|
||||||
|
- `^`
|
||||||
|
- `$`
|
||||||
|
- `.`
|
||||||
|
- `[`
|
||||||
|
- `]`
|
||||||
|
- `|`
|
||||||
|
- `(`
|
||||||
|
- `)`
|
||||||
|
- `*`
|
||||||
|
- `+`
|
||||||
|
- `?`
|
||||||
|
<!--rehype:className=cols-3 style-none-->
|
||||||
|
|
||||||
|
### 转义序列
|
||||||
|
|
||||||
|
:- | :-
|
||||||
|
:- | :-
|
||||||
|
`\b` | 退格
|
||||||
|
`\f` | 换页
|
||||||
|
`\n` | 换行(换行)
|
||||||
|
`\r` | 回车
|
||||||
|
`\t` | 水平选项卡
|
||||||
|
`\v` | 垂直选项卡
|
||||||
|
|
||||||
|
### 运行脚本
|
||||||
|
|
||||||
|
```shell
|
||||||
|
$ cat demo.awk
|
||||||
|
#!/usr/bin/awk -f
|
||||||
|
BEGIN { x = 23 }
|
||||||
|
{ x += 2 }
|
||||||
|
END { print x }
|
||||||
|
$ awk -f demo.awk /etc/passwd
|
||||||
|
69
|
||||||
|
```
|
||||||
|
|
||||||
|
另见
|
||||||
|
--------
|
||||||
|
|
||||||
|
- [GNU awk 用户指南](https://www-zeuthen.desy.de/dv/documentation/unixguide/infohtml/gawk/gawk.html) _(www-zeuthen.desy.de)_
|
||||||
|
- [AWK cheatsheet](https://gist.github.com/Rafe/3102414) _(gist.github.com)_
|
||||||
@ -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)_
|
* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
|
||||||
|
|
||||||
<!--rehype:ignore:start-->
|
<!--rehype:ignore:start-->
|
||||||
### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
|
以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
|
||||||
|
---
|
||||||
<!--rehype:ignore:end-->
|
<!--rehype:ignore:end-->
|
||||||
|
|
||||||
```html preview
|
```html preview
|
||||||
|
|||||||
40
docs/css.md
40
docs/css.md
@ -262,14 +262,14 @@ p:first-child {
|
|||||||
|
|
||||||
选择器 | 说明
|
选择器 | 说明
|
||||||
:- | :-
|
:- | :-
|
||||||
`a[target]` | 带有 <yel>target</yel> 属性
|
`a[target]` | 带有 <yel>target</yel> 属性 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attr)
|
||||||
`a[target="_blank"]` | 在新标签中打开
|
`a[target="_blank"]` | 在新标签中打开 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue)
|
||||||
`a[href^="/index"]` | 以 <yel>/index</yel> 开头
|
`a[href^="/index"]` | 以 <yel>/index</yel> 开头 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_4)
|
||||||
`[class\|="chair"]` | 以<yel>chair</yel>开头
|
`[class\|="chair"]` | 以<yel>chair</yel>开头 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_3)
|
||||||
`[class*="chair"]` | 包含<yel>chair</yel>
|
`[class*="chair"]` | 包含<yel>chair</yel> [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_6)
|
||||||
`[title~="chair"]` | 包含单词 <yel>chair</yel>
|
`[title~="chair"]` | 包含单词 <yel>chair</yel> [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_2)
|
||||||
`a[href$=".doc"]` | 以 <yel>.doc</yel> 结尾
|
`a[href$=".doc"]` | 以 <yel>.doc</yel> 结尾 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue_5)
|
||||||
`[type="button"]` | 指定类型
|
`[type="button"]` | 指定类型 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors#attrvalue)
|
||||||
|
|
||||||
另见: [属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors)
|
另见: [属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors)
|
||||||
|
|
||||||
@ -282,6 +282,19 @@ p:first-child {
|
|||||||
`a:hover ` | 鼠标悬停链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover)
|
`a:hover ` | 鼠标悬停链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover)
|
||||||
`a:visited ` | 访问链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited)
|
`a:visited ` | 访问链接 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 未访问链接 */
|
||||||
|
a:link { color: blue; }
|
||||||
|
/* 已访问链接 */
|
||||||
|
a:visited { color: purple; }
|
||||||
|
/* 用户鼠标悬停 */
|
||||||
|
a:hover { background: yellow; }
|
||||||
|
/* 激活链接 */
|
||||||
|
a:active { color: red; }
|
||||||
|
```
|
||||||
|
|
||||||
### 伪类
|
### 伪类
|
||||||
|
|
||||||
选择器 | 说明
|
选择器 | 说明
|
||||||
@ -297,6 +310,10 @@ p:first-child {
|
|||||||
`div:empty` | 没有子元素的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty)
|
`div:empty` | 没有子元素的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty)
|
||||||
`p:lang(en)` | 带有 en 语言属性的 P [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang)
|
`p:lang(en)` | 带有 en 语言属性的 P [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:lang)
|
||||||
`:not(span)` | 不是跨度的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)
|
`:not(span)` | 不是跨度的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not)
|
||||||
|
`:host` | shadowDOM 中选择自定义元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root)
|
||||||
|
`::backdrop` | 处于全屏模式的元素样式 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::backdrop)
|
||||||
|
`::marker` | `li` 项目符号或者数字 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::marker)
|
||||||
|
`::file-selector-button` | type="file" `input` 按钮 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::file-selector-button)
|
||||||
|
|
||||||
### 输入伪类
|
### 输入伪类
|
||||||
|
|
||||||
@ -305,6 +322,8 @@ p:first-child {
|
|||||||
`input:checked` | 检查 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked)
|
`input:checked` | 检查 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:checked)
|
||||||
`input:disabled` | 禁用 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled)
|
`input:disabled` | 禁用 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:disabled)
|
||||||
`input:enabled` | 启用的 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled)
|
`input:enabled` | 启用的 `input` [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:enabled)
|
||||||
|
`input:default` | 有默认值的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:default)
|
||||||
|
`input:blank` | 空的输入框 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:blank)
|
||||||
`input:focus` | `input` 有焦点 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus)
|
`input:focus` | `input` 有焦点 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus)
|
||||||
`input:in-range` | 范围内的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range)
|
`input:in-range` | 范围内的值 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:in-range)
|
||||||
`input:out-of-range` | `input` 值超出范围 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range)
|
`input:out-of-range` | `input` 值超出范围 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:out-of-range)
|
||||||
@ -331,6 +350,11 @@ p:first-child {
|
|||||||
`p:nth-last-of-type(2)` | ...从后面 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type)
|
`p:nth-last-of-type(2)` | ...从后面 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type)
|
||||||
`p:only-of-type` | 其父级的唯一性 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type)
|
`p:only-of-type` | 其父级的唯一性 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type)
|
||||||
`p:only-child` | 其父母的唯一孩子 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child)
|
`p:only-child` | 其父母的唯一孩子 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child)
|
||||||
|
`:is(header, div) p` | 可以选择的元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is)
|
||||||
|
`:where(header, div) p` | 与 `:is` 相同 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where)
|
||||||
|
`a:has(> img)` | 包含 `img` 元素的 `a` 元素 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has)
|
||||||
|
`::first-letter` | 第一行的第一个字母 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-letter)
|
||||||
|
`::first-line` | 第一行应用样式 [#](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-line)
|
||||||
|
|
||||||
CSS 字体
|
CSS 字体
|
||||||
------
|
------
|
||||||
|
|||||||
727
docs/es6.md
Normal file
727
docs/es6.md
Normal file
@ -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)_
|
||||||
774
docs/java.md
Normal file
774
docs/java.md
Normal file
@ -0,0 +1,774 @@
|
|||||||
|
Java 备忘清单
|
||||||
|
===
|
||||||
|
|
||||||
|
该备忘单是针对 Java 初学者的速成课程，有助于复习 Java 语言的基本语法。
|
||||||
|
|
||||||
|
入门
|
||||||
|
--------
|
||||||
|
|
||||||
|
### Hello.java
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
```java
|
||||||
|
public class Hello {
|
||||||
|
// 主要方法
|
||||||
|
public static void main(String[] args)
|
||||||
|
{
|
||||||
|
// 输出: Hello, world!
|
||||||
|
System.out.println("Hello, world!");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
编译和运行
|
||||||
|
|
||||||
|
```shell
|
||||||
|
$ javac Hello.java
|
||||||
|
$ java Hello
|
||||||
|
Hello, world!
|
||||||
|
```
|
||||||
|
|
||||||
|
### 变量 Variables
|
||||||
|
|
||||||
|
```java
|
||||||
|
int num = 5;
|
||||||
|
float floatNum = 5.99f;
|
||||||
|
char letter = 'D';
|
||||||
|
boolean bool = true;
|
||||||
|
String site = "quickref.me";
|
||||||
|
```
|
||||||
|
|
||||||
|
### 原始数据类型
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
| 数据类型 | 大小 | 默认 | 范围 |
|
||||||
|
|-----------|--------|---------|---------------------|
|
||||||
|
| `byte` | 1 byte | 0 | -128 ^to^ 127 |
|
||||||
|
| `short` | 2 byte | 0 | -2^15^ ^to^ 2^15^-1 |
|
||||||
|
| `int` | 4 byte | 0 | -2^31^ ^to^ 2^31^-1 |
|
||||||
|
| `long` | 8 byte | 0 | -2^63^ ^to^ 2^63^-1 |
|
||||||
|
| `float` | 4 byte | 0.0f | _N/A_ |
|
||||||
|
| `double` | 8 byte | 0.0d | _N/A_ |
|
||||||
|
| `char` | 2 byte | \\u0000 | 0 ^to^ 65535 |
|
||||||
|
| `boolean` | _N/A_ | false | true / false |
|
||||||
|
<!--rehype:className=show-header-->
|
||||||
|
|
||||||
|
### 字符串 Strings
|
||||||
|
|
||||||
|
```java
|
||||||
|
String first = "John";
|
||||||
|
String last = "Doe";
|
||||||
|
String name = first + " " + last;
|
||||||
|
System.out.println(name);
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Strings](#java-字符串)
|
||||||
|
|
||||||
|
### 循环 Loops
|
||||||
|
|
||||||
|
```java
|
||||||
|
String word = "QuickRef";
|
||||||
|
for (char c: word.toCharArray()) {
|
||||||
|
System.out.print(c + "-");
|
||||||
|
}
|
||||||
|
// 输出: Q-u-i-c-k-R-e-f-
|
||||||
|
```
|
||||||
|
查看: [Loops](#java-循环)
|
||||||
|
|
||||||
|
### 数组 Arrays
|
||||||
|
|
||||||
|
```java
|
||||||
|
char[] chars = new char[10];
|
||||||
|
chars[0] = 'a'
|
||||||
|
chars[1] = 'b'
|
||||||
|
String[] letters = {"A", "B", "C"};
|
||||||
|
int[] mylist = {100, 200};
|
||||||
|
boolean[] answers = {true, false};
|
||||||
|
```
|
||||||
|
查看: [Arrays](#java-数组)
|
||||||
|
|
||||||
|
### Swap
|
||||||
|
|
||||||
|
```java
|
||||||
|
int a = 1;
|
||||||
|
int b = 2;
|
||||||
|
System.out.println(a + " " + b); // 1 2
|
||||||
|
int temp = a;
|
||||||
|
a = b;
|
||||||
|
b = temp;
|
||||||
|
System.out.println(a + " " + b); // 2 1
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type Casting
|
||||||
|
|
||||||
|
```java
|
||||||
|
// Widening
|
||||||
|
// byte<short<int<long<float<double
|
||||||
|
int i = 10;
|
||||||
|
long l = i; // 10
|
||||||
|
// Narrowing
|
||||||
|
double d = 10.02;
|
||||||
|
long l = (long)d; // 10
|
||||||
|
String.valueOf(10); // "10"
|
||||||
|
Integer.parseInt("10"); // 10
|
||||||
|
Double.parseDouble("10"); // 10.0
|
||||||
|
```
|
||||||
|
|
||||||
|
### 条件语句 Conditionals
|
||||||
|
|
||||||
|
```java
|
||||||
|
int j = 10;
|
||||||
|
if (j == 10) {
|
||||||
|
System.out.println("I get printed");
|
||||||
|
} else if (j > 10) {
|
||||||
|
System.out.println("I don't");
|
||||||
|
} else {
|
||||||
|
System.out.println("I also don't");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Conditionals](#java-conditionals)
|
||||||
|
|
||||||
|
### 用户输入
|
||||||
|
```java
|
||||||
|
Scanner in = new Scanner(System.in);
|
||||||
|
String str = in.nextLine();
|
||||||
|
System.out.println(str);
|
||||||
|
int num = in.nextInt();
|
||||||
|
System.out.println(num);
|
||||||
|
```
|
||||||
|
|
||||||
|
Java 字符串
|
||||||
|
-------
|
||||||
|
|
||||||
|
### 基本的
|
||||||
|
|
||||||
|
```java
|
||||||
|
String str1 = "value";
|
||||||
|
String str2 = new String("value");
|
||||||
|
String str3 = String.valueOf(123);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 字符串连接
|
||||||
|
|
||||||
|
```java
|
||||||
|
String s = 3 + "str" + 3; // 3str3
|
||||||
|
String s = 3 + 3 + "str"; // 6str
|
||||||
|
String s = "3" + 3 + "str"; // 33str
|
||||||
|
String s = "3" + "3" + "23"; // 3323
|
||||||
|
String s = "" + 3 + 3 + "23"; // 3323
|
||||||
|
String s = 3 + 3 + 23; // 29
|
||||||
|
```
|
||||||
|
|
||||||
|
### 字符串生成器
|
||||||
|
<!--rehype:wrap-class=row-span-3-->
|
||||||
|
|
||||||
|
```java
|
||||||
|
StringBuilder sb = new StringBuilder(10);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```java
|
||||||
|
┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
|
||||||
|
| | | | | | | | | |
|
||||||
|
└───┴───┴───┴───┴───┴───┴───┴───┴───┘
|
||||||
|
0 1 2 3 4 5 6 7 8 9
|
||||||
|
```
|
||||||
|
---
|
||||||
|
|
||||||
|
```java
|
||||||
|
sb.append("Reference");
|
||||||
|
```
|
||||||
|
---
|
||||||
|
```java
|
||||||
|
┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
|
||||||
|
| R | e | f | e | r | e | n | c | e |
|
||||||
|
└───┴───┴───┴───┴───┴───┴───┴───┴───┘
|
||||||
|
0 1 2 3 4 5 6 7 8 9
|
||||||
|
```
|
||||||
|
---
|
||||||
|
|
||||||
|
```java
|
||||||
|
sb.delete(3, 9);
|
||||||
|
```
|
||||||
|
---
|
||||||
|
```java
|
||||||
|
┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
|
||||||
|
| R | e | f | | | | | | |
|
||||||
|
└───┴───┴───┴───┴───┴───┴───┴───┴───┘
|
||||||
|
0 1 2 3 4 5 6 7 8 9
|
||||||
|
```
|
||||||
|
---
|
||||||
|
|
||||||
|
```java
|
||||||
|
sb.insert(0, "My ");
|
||||||
|
```
|
||||||
|
---
|
||||||
|
```java
|
||||||
|
┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
|
||||||
|
| M | y | | R | e | f | | | |
|
||||||
|
└───┴───┴───┴───┴───┴───┴───┴───┴───┘
|
||||||
|
0 1 2 3 4 5 6 7 8 9
|
||||||
|
```
|
||||||
|
---
|
||||||
|
|
||||||
|
```java
|
||||||
|
sb.append("!");
|
||||||
|
```
|
||||||
|
---
|
||||||
|
```java
|
||||||
|
┌───┬───┬───┬───┬───┬───┬───┬───┬───┐
|
||||||
|
| M | y | | R | e | f | ! | | |
|
||||||
|
└───┴───┴───┴───┴───┴───┴───┴───┴───┘
|
||||||
|
0 1 2 3 4 5 6 7 8 9
|
||||||
|
```
|
||||||
|
|
||||||
|
### 比较
|
||||||
|
|
||||||
|
```java
|
||||||
|
String s1 = new String("QuickRef");
|
||||||
|
String s2 = new String("QuickRef");
|
||||||
|
s1 == s2 // false
|
||||||
|
s1.equals(s2) // true
|
||||||
|
"AB".equalsIgnoreCase("ab") // true
|
||||||
|
```
|
||||||
|
|
||||||
|
### 操纵
|
||||||
|
|
||||||
|
```java
|
||||||
|
String str = "Abcd";
|
||||||
|
str.toUpperCase(); // ABCD
|
||||||
|
str.toLowerCase(); // abcd
|
||||||
|
str.concat("#"); // Abcd#
|
||||||
|
str.replace("b", "-"); // A-cd
|
||||||
|
" abc ".trim(); // abc
|
||||||
|
"ab".toCharArray(); // {'a', 'b'}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 信息
|
||||||
|
|
||||||
|
```java
|
||||||
|
String str = "abcd";
|
||||||
|
str.charAt(2); // c
|
||||||
|
str.indexOf("a") // 0
|
||||||
|
str.indexOf("z") // -1
|
||||||
|
str.length(); // 4
|
||||||
|
str.toString(); // abcd
|
||||||
|
str.substring(2); // cd
|
||||||
|
str.substring(2,3); // c
|
||||||
|
str.contains("c"); // true
|
||||||
|
str.endsWith("d"); // true
|
||||||
|
str.startsWith("a"); // true
|
||||||
|
str.isEmpty(); // false
|
||||||
|
```
|
||||||
|
|
||||||
|
### 不可变
|
||||||
|
|
||||||
|
```java
|
||||||
|
String str = "hello";
|
||||||
|
str.concat("world");
|
||||||
|
// 输出: hello
|
||||||
|
System.out.println(str);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```java
|
||||||
|
String str = "hello";
|
||||||
|
String concat = str.concat("world");
|
||||||
|
// 输出: helloworld
|
||||||
|
System.out.println(concat);
|
||||||
|
```
|
||||||
|
|
||||||
|
一旦创建就不能修改，任何修改都会创建一个新的String
|
||||||
|
|
||||||
|
Java 数组
|
||||||
|
-------
|
||||||
|
|
||||||
|
### 申明 Declare
|
||||||
|
|
||||||
|
```java
|
||||||
|
int[] a1;
|
||||||
|
int[] a2 = {1, 2, 3};
|
||||||
|
int[] a3 = new int[]{1, 2, 3};
|
||||||
|
int[] a4 = new int[3];
|
||||||
|
a4[0] = 1;
|
||||||
|
a4[2] = 2;
|
||||||
|
a4[3] = 3;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修改 Modify
|
||||||
|
|
||||||
|
```java
|
||||||
|
int[] a = {1, 2, 3};
|
||||||
|
System.out.println(a[0]); // 1
|
||||||
|
a[0] = 9;
|
||||||
|
System.out.println(a[0]); // 9
|
||||||
|
System.out.println(a.length); // 3
|
||||||
|
```
|
||||||
|
|
||||||
|
### 循环 (读 & 写)
|
||||||
|
|
||||||
|
```java
|
||||||
|
int[] arr = {1, 2, 3};
|
||||||
|
for (int i=0; i < arr.length; i++) {
|
||||||
|
arr[i] = arr[i] * 2;
|
||||||
|
System.out.print(arr[i] + " ");
|
||||||
|
}
|
||||||
|
// 输出: 2 4 6
|
||||||
|
```
|
||||||
|
|
||||||
|
### Loop (Read)
|
||||||
|
|
||||||
|
```java
|
||||||
|
String[] arr = {"a", "b", "c"};
|
||||||
|
for (int a: arr) {
|
||||||
|
System.out.print(a + " ");
|
||||||
|
}
|
||||||
|
// 输出: a b c
|
||||||
|
```
|
||||||
|
|
||||||
|
### Multidimensional Arrays
|
||||||
|
|
||||||
|
```java
|
||||||
|
int[][] matrix = { {1, 2, 3}, {4, 5} };
|
||||||
|
int x = matrix[1][0]; // 4
|
||||||
|
// [[1, 2, 3], [4, 5]]
|
||||||
|
Arrays.deepToString(matrix)
|
||||||
|
for (int i = 0; i < a.length; ++i) {
|
||||||
|
for(int j = 0; j < a[i].length; ++j) {
|
||||||
|
System.out.println(a[i][j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 输出: 1 2 3 4 5 6 7
|
||||||
|
```
|
||||||
|
|
||||||
|
### Sort
|
||||||
|
|
||||||
|
```java
|
||||||
|
char[] chars = {'b', 'a', 'c'};
|
||||||
|
Arrays.sort(chars);
|
||||||
|
// [a, b, c]
|
||||||
|
Arrays.toString(chars);
|
||||||
|
```
|
||||||
|
|
||||||
|
Java 条件语句
|
||||||
|
-----------
|
||||||
|
|
||||||
|
### 运算符
|
||||||
|
<!--rehype:wrap-class=row-span-3-->
|
||||||
|
|
||||||
|
- `+` _(加法运算符(也用于字符串连接))_
|
||||||
|
- `-` _(减法运算符)_
|
||||||
|
- `*` _(乘法运算符)_
|
||||||
|
- `/` _(分区运算符)_
|
||||||
|
- `%` _(余数运算符)_
|
||||||
|
- `=` _(简单赋值运算符)_
|
||||||
|
- `++` _(增量运算符；将值增加 1)_
|
||||||
|
- `--` _(递减运算符；将值减 1)_
|
||||||
|
- `!` _(逻辑补码运算符；反转布尔值)_
|
||||||
|
<!--rehype:className=style-round-->
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
- `==` _(等于)_
|
||||||
|
- `!=` _(不等于)_
|
||||||
|
- `>` _(比...更棒)_
|
||||||
|
- `>=` _(大于或等于)_
|
||||||
|
- `<` _(少于)_
|
||||||
|
- `<=` _(小于或等于)_
|
||||||
|
<!--rehype:className=cols-2 style-round-->
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
- `&&` _条件与_
|
||||||
|
- `||` _条件或_
|
||||||
|
- [?:](#三元运算符) _三元(if-then-else 语句的简写)_
|
||||||
|
<!--rehype:className=style-round-->
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
- `instanceof` _(将对象与指定类型进行比较)_
|
||||||
|
<!--rehype:className=style-round-->
|
||||||
|
|
||||||
|
----
|
||||||
|
|
||||||
|
- `~` _(一元按位补码)_
|
||||||
|
- `<<` _(签名左移)_
|
||||||
|
- `>>` _(有符号右移)_
|
||||||
|
- `>>>` _(无符号右移)_
|
||||||
|
- `&` _(按位与)_
|
||||||
|
- `^` _(按位异或)_
|
||||||
|
- `|` _(按位包含 OR)_
|
||||||
|
<!--rehype:className=cols-2 style-round-->
|
||||||
|
|
||||||
|
### If else
|
||||||
|
|
||||||
|
```java
|
||||||
|
int k = 15;
|
||||||
|
if (k > 20) {
|
||||||
|
System.out.println(1);
|
||||||
|
} else if (k > 10) {
|
||||||
|
System.out.println(2);
|
||||||
|
} else {
|
||||||
|
System.out.println(3);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Switch
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
|
||||||
|
```java
|
||||||
|
int month = 3;
|
||||||
|
String str;
|
||||||
|
switch (month) {
|
||||||
|
case 1:
|
||||||
|
str = "January";
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
str = "February";
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
str = "March";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
str = "Some other month";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// 输出: Result March
|
||||||
|
System.out.println("Result " + str);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 三元运算符
|
||||||
|
|
||||||
|
```java
|
||||||
|
int a = 10;
|
||||||
|
int b = 20;
|
||||||
|
int max = (a > b) ? a : b;
|
||||||
|
// 输出: 20
|
||||||
|
System.out.println(max);
|
||||||
|
```
|
||||||
|
|
||||||
|
Java 循环
|
||||||
|
----
|
||||||
|
|
||||||
|
### For 循环
|
||||||
|
|
||||||
|
```java
|
||||||
|
for (int i = 0; i < 10; i++) {
|
||||||
|
System.out.print(i);
|
||||||
|
}
|
||||||
|
// 输出: 0123456789
|
||||||
|
```
|
||||||
|
|
||||||
|
------
|
||||||
|
|
||||||
|
```java
|
||||||
|
for (int i = 0,j = 0; i < 3; i++,j--) {
|
||||||
|
System.out.print(j + "|" + i + " ");
|
||||||
|
}
|
||||||
|
// 输出: 0|0 -1|1 -2|2
|
||||||
|
```
|
||||||
|
|
||||||
|
### 增强的 For 循环
|
||||||
|
|
||||||
|
```java
|
||||||
|
int[] numbers = {1,2,3,4,5};
|
||||||
|
for (int number: numbers) {
|
||||||
|
System.out.print(number);
|
||||||
|
}
|
||||||
|
// 输出: 12345
|
||||||
|
```
|
||||||
|
|
||||||
|
用于循环数组或列表
|
||||||
|
|
||||||
|
### While 循环
|
||||||
|
|
||||||
|
```java
|
||||||
|
int count = 0;
|
||||||
|
while (count < 5) {
|
||||||
|
System.out.print(count);
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
// 输出: 01234
|
||||||
|
```
|
||||||
|
|
||||||
|
### Do While 循环
|
||||||
|
|
||||||
|
```java
|
||||||
|
int count = 0;
|
||||||
|
do {
|
||||||
|
System.out.print(count);
|
||||||
|
count++;
|
||||||
|
} while (count < 5);
|
||||||
|
// 输出: 01234
|
||||||
|
```
|
||||||
|
|
||||||
|
### 继续声明
|
||||||
|
|
||||||
|
```java
|
||||||
|
for (int i = 0; i < 5; i++) {
|
||||||
|
if (i == 3) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
System.out.print(i);
|
||||||
|
}
|
||||||
|
// 输出: 01245
|
||||||
|
```
|
||||||
|
|
||||||
|
### 中断语句
|
||||||
|
|
||||||
|
```java
|
||||||
|
for (int i = 0; i < 5; i++) {
|
||||||
|
System.out.print(i);
|
||||||
|
if (i == 3) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 输出: 0123
|
||||||
|
```
|
||||||
|
|
||||||
|
Java 框架搜集
|
||||||
|
--------------------
|
||||||
|
|
||||||
|
### Java 搜集
|
||||||
|
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||||
|
|
||||||
|
搜集 | Interface | 有序 | 已排序 | 线程安全 | 复制 | Nullable
|
||||||
|
:-|:-|:-|:-|:-|:-|:-
|
||||||
|
[ArrayList](https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html) | List | Y | _N_ | _N_ | Y | Y
|
||||||
|
[Vector](https://docs.oracle.com/javase/8/docs/api/java/util/Vector.html) | List | Y | _N_ | Y | Y | Y
|
||||||
|
[LinkedList](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedList.html) | List, Deque | Y | _N_ | _N_ | Y | Y
|
||||||
|
[CopyOnWriteArrayList](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/CopyOnWriteArrayList.html) | List | Y | _N_ | Y | Y | Y
|
||||||
|
[HashSet](https://docs.oracle.com/javase/8/docs/api/java/util/HashSet.html) | Set | _N_ | _N_ | _N_ | _N_ | One `null`
|
||||||
|
[LinkedHashSet](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedHashSet.html) | Set | Y | _N_ | _N_ | _N_ | One `null`
|
||||||
|
[TreeSet](https://docs.oracle.com/javase/8/docs/api/java/util/TreeSet.html) | Set | Y | Y | _N_ | _N_ | _N_
|
||||||
|
[CopyOnWriteArraySet](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/CopyOnWriteArraySet.html) | Set | Y | _N_ | Y | _N_ | One `null`
|
||||||
|
[ConcurrentSkipListSet](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentSkipListSet.html) | Set | Y | Y | Y | _N_ | _N_
|
||||||
|
[HashMap](https://docs.oracle.com/javase/8/docs/api/java/util/HashMap.html) | Map | _N_ | _N_ | _N_ | _N (key)_ | One `null` _(key)_
|
||||||
|
[HashTable](https://docs.oracle.com/javase/8/docs/api/java/util/Hashtable.html) | Map | _N_ | _N_ | Y | _N (key)_ | _N (key)_
|
||||||
|
[LinkedHashMap](https://docs.oracle.com/javase/8/docs/api/java/util/LinkedHashMap.html) | Map | Y | _N_ | _N_ | _N (key)_ | One `null` _(key)_
|
||||||
|
[TreeMap](https://docs.oracle.com/javase/8/docs/api/java/util/TreeMap.html) | Map | Y | Y | _N_ | _N (key)_ | _N (key)_
|
||||||
|
[ConcurrentHashMap](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentHashMap.html) | Map | _N_ | _N_ | Y | _N (key)_ | _N_
|
||||||
|
[ConcurrentSkipListMap](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentSkipListMap.html) | Map | Y | Y | Y | _N (key)_ | _N_
|
||||||
|
[ArrayDeque](https://docs.oracle.com/javase/8/docs/api/java/util/ArrayDeque.html) | Deque | Y | _N_ | _N_ | Y | _N_
|
||||||
|
[PriorityQueue](https://docs.oracle.com/javase/8/docs/api/java/util/PriorityQueue.html) | Queue | Y | _N_ | _N_ | Y | _N_
|
||||||
|
[ConcurrentLinkedQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentLinkedQueue.html) | Queue | Y | _N_ | Y | Y | _N_
|
||||||
|
[ConcurrentLinkedDeque](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ConcurrentLinkedDeque.html) | Deque | Y | _N_ | Y | Y | _N_
|
||||||
|
[ArrayBlockingQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/ArrayBlockingQueue.html) | Queue | Y | _N_ | Y | Y | _N_
|
||||||
|
[LinkedBlockingDeque](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/LinkedBlockingDeque.html) | Deque | Y | _N_ | Y | Y | _N_
|
||||||
|
[PriorityBlockingQueue](https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/PriorityBlockingQueue.html) | Queue | Y | _N_ | Y | Y | _N_
|
||||||
|
<!--rehype:className=show-header-->
|
||||||
|
|
||||||
|
### ArrayList
|
||||||
|
|
||||||
|
```java
|
||||||
|
List<Integer> nums = new ArrayList<>();
|
||||||
|
// 添加
|
||||||
|
nums.add(2);
|
||||||
|
nums.add(5);
|
||||||
|
nums.add(8);
|
||||||
|
// 检索
|
||||||
|
System.out.println(nums.get(0));
|
||||||
|
// 为循环迭代编制索引
|
||||||
|
for (int i = 0; i < nums.size(); i++) {
|
||||||
|
System.out.println(nums.get(i));
|
||||||
|
}
|
||||||
|
nums.remove(nums.size() - 1);
|
||||||
|
nums.remove(0); // 非常慢
|
||||||
|
for (Integer value : nums) {
|
||||||
|
System.out.println(value);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### HashMap
|
||||||
|
|
||||||
|
```java
|
||||||
|
Map<Integer, String> m = new HashMap<>();
|
||||||
|
m.put(5, "Five");
|
||||||
|
m.put(8, "Eight");
|
||||||
|
m.put(6, "Six");
|
||||||
|
m.put(4, "Four");
|
||||||
|
m.put(2, "Two");
|
||||||
|
// 检索
|
||||||
|
System.out.println(m.get(6));
|
||||||
|
// Lambda forEach
|
||||||
|
m.forEach((key, value) -> {
|
||||||
|
String msg = key + ": " + value;
|
||||||
|
System.out.println(msg);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### HashSet
|
||||||
|
|
||||||
|
```java
|
||||||
|
Set<String> set = new HashSet<>();
|
||||||
|
if (set.isEmpty()) {
|
||||||
|
System.out.println("Empty!");
|
||||||
|
}
|
||||||
|
set.add("dog");
|
||||||
|
set.add("cat");
|
||||||
|
set.add("mouse");
|
||||||
|
set.add("snake");
|
||||||
|
set.add("bear");
|
||||||
|
if (set.contains("cat")) {
|
||||||
|
System.out.println("Contains cat");
|
||||||
|
}
|
||||||
|
set.remove("cat");
|
||||||
|
for (String element : set) {
|
||||||
|
System.out.println(element);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### ArrayDeque
|
||||||
|
|
||||||
|
```java
|
||||||
|
Deque<String> a = new ArrayDeque<>();
|
||||||
|
// 使用 add()
|
||||||
|
a.add("Dog");
|
||||||
|
// 使用 addFirst()
|
||||||
|
a.addFirst("Cat");
|
||||||
|
// 使用 addLast()
|
||||||
|
a.addLast("Horse");
|
||||||
|
// [Cat, Dog, Horse]
|
||||||
|
System.out.println(a);
|
||||||
|
// 访问元素
|
||||||
|
System.out.println(a.peek());
|
||||||
|
// 移除元素
|
||||||
|
System.out.println(a.pop());
|
||||||
|
```
|
||||||
|
|
||||||
|
杂项 Misc
|
||||||
|
----
|
||||||
|
|
||||||
|
### 访问修饰符
|
||||||
|
<!--rehype:wrap-class=col-span-2-->
|
||||||
|
|
||||||
|
| 修饰符 | Class | Package | Subclass | World |
|
||||||
|
|-------------|-------|---------|----------|-------|
|
||||||
|
| public | Y | Y | Y | Y |
|
||||||
|
| protected | Y | Y | Y | _N_ |
|
||||||
|
| no modifier | Y | Y | _N_ | _N_ |
|
||||||
|
| private | Y | _N_ | _N_ | _N_ |
|
||||||
|
<!--rehype:className=show-header-->
|
||||||
|
|
||||||
|
### 常用表达
|
||||||
|
|
||||||
|
```java
|
||||||
|
String text = "I am learning Java";
|
||||||
|
// 删除所有空格
|
||||||
|
text.replaceAll("\\s+", "");
|
||||||
|
// 拆分字符串
|
||||||
|
text.split("\\|");
|
||||||
|
text.split(Pattern.quote("|"));
|
||||||
|
```
|
||||||
|
|
||||||
|
查看: [Regex in java](./regex.md#java-中的正则表达式)
|
||||||
|
|
||||||
|
### 注释 Comment
|
||||||
|
|
||||||
|
```java
|
||||||
|
// 我是单行注释！
|
||||||
|
|
||||||
|
/*
|
||||||
|
而我是一个
|
||||||
|
多行注释！
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* 这个
|
||||||
|
* 是
|
||||||
|
* 文档
|
||||||
|
* 注释
|
||||||
|
*/
|
||||||
|
```
|
||||||
|
|
||||||
|
### 关键字
|
||||||
|
<!--rehype:wrap-class=col-span-2-->
|
||||||
|
|
||||||
|
- abstract
|
||||||
|
- continue
|
||||||
|
- for
|
||||||
|
- new
|
||||||
|
- switch
|
||||||
|
- assert
|
||||||
|
- default
|
||||||
|
- goto
|
||||||
|
- package
|
||||||
|
- synchronized
|
||||||
|
- boolean
|
||||||
|
- do
|
||||||
|
- if
|
||||||
|
- private
|
||||||
|
- this
|
||||||
|
- break
|
||||||
|
- double
|
||||||
|
- implements
|
||||||
|
- protected
|
||||||
|
- throw
|
||||||
|
- byte
|
||||||
|
- else
|
||||||
|
- import
|
||||||
|
- public
|
||||||
|
- throws
|
||||||
|
- case
|
||||||
|
- enum
|
||||||
|
- instanceof
|
||||||
|
- return
|
||||||
|
- transient
|
||||||
|
- catch
|
||||||
|
- extends
|
||||||
|
- int
|
||||||
|
- short
|
||||||
|
- try
|
||||||
|
- char
|
||||||
|
- final
|
||||||
|
- interface
|
||||||
|
- static
|
||||||
|
- void
|
||||||
|
- class
|
||||||
|
- finally
|
||||||
|
- long
|
||||||
|
- strictfp
|
||||||
|
- volatile
|
||||||
|
- const
|
||||||
|
- float
|
||||||
|
- native
|
||||||
|
- super
|
||||||
|
- while
|
||||||
|
<!--rehype:className=cols-7 style-none-->
|
||||||
|
|
||||||
|
### 数学方法
|
||||||
|
|
||||||
|
方法 | 说明
|
||||||
|
:-|:-
|
||||||
|
`Math.max(a,b)` | `a` 和 `b` 的最大值
|
||||||
|
`Math.min(a,b)` | `a` 和 `b` 的最小值
|
||||||
|
`Math.abs(a)` | 绝对值
|
||||||
|
`Math.sqrt(a)` | `a` 的平方根
|
||||||
|
`Math.pow(a,b)` | `b` 的幂
|
||||||
|
`Math.round(a)` | 最接近的整数
|
||||||
|
`Math.sin(ang)` | 正弦
|
||||||
|
`Math.cos(ang)` | `ang` 的余弦
|
||||||
|
`Math.tan(ang)` | `ang` 的切线
|
||||||
|
`Math.asin(ang)` | `ang` 的反正弦
|
||||||
|
`Math.log(a)` | `a` 的自然对数
|
||||||
|
`Math.toDegrees(rad)` | 以度为单位的角度弧度
|
||||||
|
`Math.toRadians(deg)` | 以弧度为单位的角度度
|
||||||
|
|
||||||
|
### Try/Catch/Finally
|
||||||
|
|
||||||
|
```java
|
||||||
|
try {
|
||||||
|
// something
|
||||||
|
} catch (Exception e) {
|
||||||
|
e.printStackTrace();
|
||||||
|
} finally {
|
||||||
|
System.out.println("always printed");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
另见
|
||||||
|
---
|
||||||
|
|
||||||
|
- [Java 官网](https://www.java.com/zh-CN/) _(java.com)_
|
||||||
@ -232,10 +232,16 @@ const school = <div>学校</div>;
|
|||||||
|
|
||||||
```
|
```
|
||||||
```html preview
|
```html preview
|
||||||
这里是你的 HTML 代码
|
<b>这里是你的 HTML 代码</b>
|
||||||
\```
|
\```
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```html preview
|
||||||
|
<b>这里是你的 HTML 代码</b>
|
||||||
|
```
|
||||||
|
|
||||||
上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
|
上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@wcj/reference",
|
"name": "@wcj/reference",
|
||||||
"version": "1.12.0",
|
"version": "1.14.0",
|
||||||
"description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
|
"description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
|
||||||
"author": "jaywcjlove",
|
"author": "jaywcjlove",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
@ -21,7 +21,7 @@
|
|||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@wcj/markdown-to-html": "^2.1.1",
|
"@wcj/markdown-to-html": "^2.1.2",
|
||||||
"chokidar": "^3.5.3",
|
"chokidar": "^3.5.3",
|
||||||
"fs-extra": "^10.1.0",
|
"fs-extra": "^10.1.0",
|
||||||
"husky": "^8.0.1",
|
"husky": "^8.0.1",
|
||||||
|
|||||||
3
scripts/assets/java.svg
Normal file
3
scripts/assets/java.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512" height="1em" width="1em">
|
||||||
|
<path d="M277.74 312.9c9.8-6.7 23.4-12.5 23.4-12.5s-38.7 7-77.2 10.2c-47.1 3.9-97.7 4.7-123.1 1.3-60.1-8 33-30.1 33-30.1s-36.1-2.4-80.6 19c-52.5 25.4 130 37 224.5 12.1zm-85.4-32.1c-19-42.7-83.1-80.2 0-145.8C296 53.2 242.84 0 242.84 0c21.5 84.5-75.6 110.1-110.7 162.6-23.9 35.9 11.7 74.4 60.2 118.2zm114.6-176.2c.1 0-175.2 43.8-91.5 140.2 24.7 28.4-6.5 54-6.5 54s62.7-32.4 33.9-72.9c-26.9-37.8-47.5-56.6 64.1-121.3zm-6.1 270.5a12.19 12.19 0 0 1-2 2.6c128.3-33.7 81.1-118.9 19.8-97.3a17.33 17.33 0 0 0-8.2 6.3 70.45 70.45 0 0 1 11-3c31-6.5 75.5 41.5-20.6 91.4zM348 437.4s14.5 11.9-15.9 21.2c-57.9 17.5-240.8 22.8-291.6.7-18.3-7.9 16-19 26.8-21.3 11.2-2.4 17.7-2 17.7-2-20.3-14.3-131.3 28.1-56.4 40.2C232.84 509.4 401 461.3 348 437.4zM124.44 396c-78.7 22 47.9 67.4 148.1 24.5a185.89 185.89 0 0 1-28.2-13.8c-44.7 8.5-65.4 9.1-106 4.5-33.5-3.8-13.9-15.2-13.9-15.2zm179.8 97.2c-78.7 14.8-175.8 13.1-233.3 3.6 0-.1 11.8 9.7 72.4 13.6 92.2 5.9 233.8-3.3 237.1-46.9 0 0-6.4 16.5-76.2 29.7zM260.64 353c-59.2 11.4-93.5 11.1-136.8 6.6-33.5-3.5-11.6-19.7-11.6-19.7-86.8 28.8 48.2 61.4 169.5 25.9a60.37 60.37 0 0 1-21.1-12.8z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -48,11 +48,18 @@ export function create(str = '', options = {}) {
|
|||||||
],
|
],
|
||||||
filterPlugins: (type, plugins = []) => {
|
filterPlugins: (type, plugins = []) => {
|
||||||
if (type === 'rehype') {
|
if (type === 'rehype') {
|
||||||
|
let rehypePrism = null;
|
||||||
const dt = plugins.filter((plug) => {
|
const dt = plugins.filter((plug) => {
|
||||||
return /(rehypeRaw)/.test(plug.name) ? false : true;
|
if (Array.isArray(plug) && /(rehypePrism)/.test(plug[0].name)) {
|
||||||
|
rehypePrism = plug;
|
||||||
|
}
|
||||||
|
return /(rehypeRaw|rehypePrism)/.test(plug.name) ? false : true;
|
||||||
});
|
});
|
||||||
// 放在 rehypeDocument 前面
|
// 放在 rehypeDocument 前面
|
||||||
dt.unshift(rehypeRaw);
|
dt.unshift(rehypeRaw);
|
||||||
|
if (rehypePrism) {
|
||||||
|
dt.unshift(rehypePrism);
|
||||||
|
}
|
||||||
dt.unshift(rehypePreviewHTML);
|
dt.unshift(rehypePreviewHTML);
|
||||||
return dt;
|
return dt;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -169,16 +169,16 @@ pur {
|
|||||||
color: var(--color-prettylights-syntax-entity);
|
color: var(--color-prettylights-syntax-entity);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-body > p > code,
|
:is(.h3wrap-body, .wrap-body) p > code,
|
||||||
.wrap-body > ul li > code,
|
:is(.h3wrap-body, .wrap-body) ul li > code,
|
||||||
.wrap-body tbody td code {
|
:is(.h3wrap-body, .wrap-body) tbody td code {
|
||||||
--text-opacity: 1;
|
--text-opacity: 1;
|
||||||
color: rgb(5 150 105 / var(--text-opacity));
|
color: rgb(5 150 105 / var(--text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-body em,
|
:is(.h3wrap-body, .wrap-body) em,
|
||||||
.wrap-body sup,
|
:is(.h3wrap-body, .wrap-body) sup,
|
||||||
.wrap-body sub {
|
:is(.h3wrap-body, .wrap-body) sub {
|
||||||
color: var(--color-fg-subtle);
|
color: var(--color-fg-subtle);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -240,7 +240,7 @@ table td:first-child > code {
|
|||||||
}
|
}
|
||||||
table td > del,
|
table td > del,
|
||||||
table td:first-child > del > code,
|
table td:first-child > del > code,
|
||||||
.wrap-body p > del > code {
|
.h3wrap-body p > del > code {
|
||||||
color: var(--color-danger-fg);
|
color: var(--color-danger-fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -365,6 +365,21 @@ body.home .max-container a.home-button:visited:hover {
|
|||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
.home-card a.contributing {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.home-card a.contributing::after {
|
||||||
|
color: var(--color-fg-muted);
|
||||||
|
content: '👆待完善需要您的参与';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 10px;
|
||||||
|
left: 5px;
|
||||||
|
bottom: -15px;
|
||||||
|
}
|
||||||
|
.home-card a.contributing:hover:after {
|
||||||
|
color: var(--color-fg-muted);
|
||||||
|
}
|
||||||
|
|
||||||
[data-color-mode*='light'] body .home-card a {
|
[data-color-mode*='light'] body .home-card a {
|
||||||
--text-opacity: 0.75;
|
--text-opacity: 0.75;
|
||||||
@ -576,6 +591,7 @@ a.text-grey {
|
|||||||
|
|
||||||
.menu-tocs > .menu-modal a.leve2 {
|
.menu-tocs > .menu-modal a.leve2 {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
color: var(--color-fg-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-tocs > .menu-modal a.leve3 {
|
.menu-tocs > .menu-modal a.leve3 {
|
||||||
@ -623,6 +639,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
display: initial;
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrap.h3body-exist .wrap-header.h3wrap {
|
||||||
|
flex: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap.h3body-exist > .h3wrap-body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.wrap-header.h3wrap {
|
.wrap-header.h3wrap {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -649,7 +675,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wrap-header.h3wrap > .wrap-body p,
|
.wrap-header.h3wrap > .wrap-body p,
|
||||||
.wrap-header.h4wrap > .wrap-body p {
|
.h3wrap-body p {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
@ -672,7 +698,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
border-radius: 0.5rem 0.5rem 0 0;
|
border-radius: 0.5rem 0.5rem 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child {
|
.wrap-header.h3wrap > .wrap-body p:not(:first-child):last-child,
|
||||||
|
.h3wrap-body p:not(:first-child):last-child {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
border-radius: 0 0 0.5rem 0.5rem;
|
border-radius: 0 0 0.5rem 0.5rem;
|
||||||
}
|
}
|
||||||
@ -685,7 +712,9 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4wrap > h4 {
|
.h3wrap-body > h4,
|
||||||
|
.h3wrap-body > h5,
|
||||||
|
.h3wrap-body > h6 {
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
background-color: var(--color-neutral-muted);
|
background-color: var(--color-neutral-muted);
|
||||||
color: var(--color-fg-default);
|
color: var(--color-fg-default);
|
||||||
@ -699,12 +728,12 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4wrap > .wrap-body ul,
|
.h3wrap .wrap-body > ul,
|
||||||
.h4wrap > .wrap-body ol,
|
.h3wrap .wrap-body > ol,
|
||||||
.h4wrap > .wrap-body dl,
|
.h3wrap .wrap-body > dl,
|
||||||
.h3wrap > .wrap-body ul,
|
.h3wrap-body > ul,
|
||||||
.h3wrap > .wrap-body ol,
|
.h3wrap-body > ol,
|
||||||
.h3wrap > .wrap-body dl {
|
.h3wrap-body > dl {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -712,10 +741,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
.h4wrap > .wrap-body ul + hr {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h3wrap > .wrap-body ul:not(:last-child),
|
.h3wrap > .wrap-body ul:not(:last-child),
|
||||||
.h3wrap > .wrap-body ol,
|
.h3wrap > .wrap-body ol,
|
||||||
.h3wrap > .wrap-body dl {
|
.h3wrap > .wrap-body dl {
|
||||||
@ -841,7 +866,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
|||||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h2wrap-body > .wrap .wrap-body > *:last-child {
|
.h3wrap-body > *:last-child {
|
||||||
border-radius: 0 0 0.5rem 0.5rem;
|
border-radius: 0 0 0.5rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -11,8 +11,6 @@ function anchorPoint() {
|
|||||||
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
|
Array.from(document.querySelectorAll('.h2wrap-body .wrap')).forEach((elm) => elm.classList.remove('active'))
|
||||||
if (elm?.tagName === 'H3') {
|
if (elm?.tagName === 'H3') {
|
||||||
elm?.parentElement?.parentElement?.classList.add('active');
|
elm?.parentElement?.parentElement?.classList.add('active');
|
||||||
const box = elm?.parentElement?.parentElement;
|
|
||||||
console.log('elm:2', box, document.querySelectorAll('.h2wrap-body .wrap'))
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
anchorPoint();
|
anchorPoint();
|
||||||
@ -23,7 +21,6 @@ function updateAnchor(element) {
|
|||||||
tocanchor.classList.remove('is-active-link');
|
tocanchor.classList.remove('is-active-link');
|
||||||
});
|
});
|
||||||
const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
|
const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
|
||||||
console.log('anchor', anchor)
|
|
||||||
if (anchor) {
|
if (anchor) {
|
||||||
anchor.classList.add('is-active-link');
|
anchor.classList.add('is-active-link');
|
||||||
}
|
}
|
||||||
|
|||||||
@ -81,8 +81,11 @@ export function getTocsTree(arr = [], result = []) {
|
|||||||
}
|
}
|
||||||
if (toc.number === level && titleNum(toc.tagName) === level) {
|
if (toc.number === level && titleNum(toc.tagName) === level) {
|
||||||
const header = getHeader(data.slice(n), level);
|
const header = getHeader(data.slice(n), level);
|
||||||
|
const childs = getChilds([...data.slice(n + 1)], level);
|
||||||
|
const resultChilds = getTocsTree(childs);
|
||||||
const wrapCls = ['wrap'];
|
const wrapCls = ['wrap'];
|
||||||
const headerCls = ['wrap-header', `h${level}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');
|
if (level === 1) wrapCls.push('max-container');
|
||||||
const wrapStyle = toc.properties['wrap-style'];
|
const wrapStyle = toc.properties['wrap-style'];
|
||||||
@ -90,7 +93,7 @@ export function getTocsTree(arr = [], result = []) {
|
|||||||
const wrapClass = toc.properties['wrap-class'];
|
const wrapClass = toc.properties['wrap-class'];
|
||||||
if (wrapClass) wrapCls.push(wrapClass);
|
if (wrapClass) wrapCls.push(wrapClass);
|
||||||
delete toc.properties['wrap-class'];
|
delete toc.properties['wrap-class'];
|
||||||
const panle = {
|
let panle = {
|
||||||
type: 'element',
|
type: 'element',
|
||||||
tagName: 'div',
|
tagName: 'div',
|
||||||
properties: { class: wrapCls, style: wrapStyle },
|
properties: { class: wrapCls, style: wrapStyle },
|
||||||
@ -111,21 +114,30 @@ export function getTocsTree(arr = [], result = []) {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
const childs = getChilds([...data.slice(n + 1)], level);
|
if (titleNum(toc.tagName) > 3) {
|
||||||
const resultChilds = getTocsTree(childs);
|
panle = [toc, ...header];
|
||||||
|
}
|
||||||
if (resultChilds.length > 0) {
|
if (resultChilds.length > 0) {
|
||||||
const bodyStyle = toc.properties['body-style'];
|
const bodyStyle = toc.properties['body-style'];
|
||||||
delete toc.properties['body-style'];
|
delete toc.properties['body-style'];
|
||||||
const bodyClass = toc.properties['body-class'];
|
const bodyClass = toc.properties['body-class'];
|
||||||
delete toc.properties['body-class'];
|
delete toc.properties['body-class'];
|
||||||
panle.children = panle.children.concat({
|
if (Array.isArray(panle)) {
|
||||||
type: 'element',
|
panle = panle.concat(resultChilds);
|
||||||
tagName: 'div',
|
} else if (panle.children) {
|
||||||
properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
|
panle.children = panle.children.concat({
|
||||||
children: [...resultChilds],
|
type: 'element',
|
||||||
});
|
tagName: 'div',
|
||||||
|
properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
|
||||||
|
children: [...resultChilds],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (Array.isArray(panle)) {
|
||||||
|
result = result.concat(panle);
|
||||||
|
} else {
|
||||||
|
result.push(panle);
|
||||||
}
|
}
|
||||||
result.push(panle);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
n++;
|
n++;
|
||||||
|
|||||||
Reference in New Issue
Block a user