Skip to content

Commit

Permalink
📖 更新文章
Browse files Browse the repository at this point in the history
  • Loading branch information
@fxzer
fxzer committed Jul 30, 2024
1 parent 3a3d05f commit edc7d74
Show file tree
Hide file tree
Showing 6 changed files with 1,126 additions and 868 deletions.
4 changes: 4 additions & 0 deletions docs/FrontEnd/CSS/常用代码段.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,3 +147,7 @@ input:-internal-autofill-selected {
transition: background-color 999999999s !important;
}
```

## VitePress 集成插件后高亮语法

[shikijs-transformers](https://github.com/shikijs/shiki/blob/4a58472070a9a359a4deafec23bb576a73e24c6a/docs/packages/transformers.md?plain=1#L228)
112 changes: 56 additions & 56 deletions docs/FrontEnd/JavaScript/async与await.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ new Promise((resolve, reject) => {
})

new Promise((resolve, reject) => {
reject('fail') // 失败执行
reject(new Error('fail')) // 失败执行
})
.then((result) => {
alert(result)
Expand Down Expand Up @@ -89,107 +89,107 @@ new Promise((resolve, reject) => {
> async标记该函数就是一个异步函数，不会阻塞其他执行逻辑的执行，被async标记的函数返回也是promise对象
> （**async 和 await必须成对出现，不能用在普通函数上**）
> （**async 和 await必须成对出现**）
```js
async fn1() {
const result = await new Promise(function(resolve){
setTimeout(function(){
async function fn1() {
const result = await new Promise((resolve) => {
setTimeout(() => {
resolve('fn1执行结果')
},5000)
})
console.log(result)
},

fn2(){
this.fn1() //async的函数并不会阻塞后续同步代码执行
console.log('fn2执行') //先执行
}, 5000)
})
console.log(result)
}

function fn2() {
this.fn1() // async的函数并不会阻塞后续同步代码执行
console.log('fn2执行') // 先执行
}
```

#### 实现fn1先执行

```js
async fn2(){
await this.fn1()
console.log('fn2执行')
}
async function fn2() {
await this.fn1()
console.log('fn2执行')
}
```

#### 捕获异常

```js
async getCatch() {
try { // 通过 try/catch捕获异常
await new Promise(function (resolve, reject) {
reject(new Error('失败'))
})
console.log('log1')
} catch (error) {
console.log('log2')
}
}
async function getCatch() {
try { // 通过 try/catch捕获异常
await new Promise((resolve, reject) => {
reject(new Error('失败'))
})
console.log('log1')
}
catch (error) {
console.log('log2')
}
}
```

#### 使用陷阱

> 1.会打破异步操作并行
```js
async fn1(){
const a = await fetch("http://.../post/1")
const b = await fetch("http://.../post/2")
//a任务需要等到b任务执行完后才执行
async function fn1() {
const a = await fetch('http://.../post/1')
const b = await fetch('http://.../post/2')
// a任务需要等到b任务执行完后才执行
}
```

**高效做法**

```js
async fn1(){
const promistA = fetch("http://.../post/1")
const promistB = fetch("http://.../post/2")
//利用 Promise.all组合
const [a,b] = await Promise.all([promiseA,pormiseB])

async function fn1() {
const promistA = fetch('http://.../post/1')
const promistB = fetch('http://.../post/2')
// 利用 Promise.all组合
const [a, b] = await Promise.all([promiseA, pormiseB])
}

```

> 2.循环中执行异步操作，不能直接使用forEach,map等方法
> 2.循环中执行异步操作，不能直接在forEach,map等方法使用
```js
async fn(){
[1,2,3].forEach(await (item)=>{
/* async function fn(){
[1,2,3].forEach(await (item) => { // [!code error]
await someAsyncOpt()
})//会立刻返回，并不会等待所有异步操作执行完
console.log('done')
}
} */
```

**解决方法**

```js
async fn(){
for(let i of [1,2,3]){
await someAsyncOpt()
} //等待所有异步操作执行完毕在执行后面代码
console.log('done')
async function fn() {
for (const i of [1, 2, 3]) {
await someAsyncOpt()
} // 等待所有异步操作执行完毕在执行后面代码
console.log('done')
}
```

**高效做法**

```js
async fn(){
const promises = [
someAsyncOpt(),
someAsyncOpt(),
someAsyncOpt(),
]
for await (let res of promises ){
//...
} //等待所有异步操作执行完毕在执行后面代码
console.log('done')
async function fn() {
const promises = [
someAsyncOpt(),
someAsyncOpt(),
someAsyncOpt(),
]
for await (const res of promises) {
// ...
} // 等待所有异步操作执行完毕在执行后面代码
console.log('done')
}
```
61 changes: 33 additions & 28 deletions docs/FrontEnd/JavaScript/常见算法.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,48 +97,52 @@ function fibonacci(n) {
### 扁平化数组

```js
//ES6的flat方法实现：
// ES6的flat方法实现：
function flatten(array) {
return array.flat(Infinity);
return array.flat(Infinity)
}
//仅限二维数组
// 仅限二维数组
function flat(arr) {
return Array.prototype.concat.apply([], arr);
return Array.prototype.concat.apply([], arr)
}
let array1 = [2, 3, 4, [4, 6, 5, 8]];
flat(array1)[(2, 3, 4, 4, 6, 5, 8)];
const array1 = [2, 3, 4, [4, 6, 5, 8]]
flat(array1)[(2, 3, 4, 4, 6, 5, 8)]

//多维数组
```

```js
// 多维数组
function flatplus(arr) {
while (arr.some((item) => item instanceof Array)) {
arr = Array.prototype.concat.apply([], arr);
while (arr.some(item => Array.isArray(item))) {
arr = Array.prototype.concat.apply([], arr)
}
return arr;
return arr
}
let arr = [2, 3, 4, [5, [6, [7]]]];
flatplus(arr); //[2, 3, 4, 5, 6, 7]
const arr = [2, 3, 4, [5, [6, [7]]]]
flatplus(arr) // [2, 3, 4, 5, 6, 7]

//可控制扁平化深度：Array.prototype.concat.apply
function flatplus(arr, depth) {
let deep = 0;
let flag = arr.some((item) => item instanceof Array) && deep < depth;
// 可控制扁平化深度：Array.prototype.concat.apply
function flatplus2(arr, depth) {
let deep = 0
const flag = arr.some(item => Array.isArray(item)) && deep < depth
while (flag) {
arr = Array.prototype.concat.apply([], arr);
++deep;
arr = Array.prototype.concat.apply([], arr)
++deep
}
return arr;
return arr
}
//递归+concat
// 递归+concat
function flatten(arr) {
var result = [];
for (var i = 0; i < arr.length; i++) {
let result = []
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
result = result.concat(flatten(arr[i]));
} else {
result.push(arr[i]);
result = result.concat(flatten(arr[i]))
}
else {
result.push(arr[i])
}
}
return result;
return result
}
```

Expand Down Expand Up @@ -170,8 +174,9 @@ function reverseString(str) {

```js
function gcd(a, b) {
if (b ==== 0) return a;
return gcd(b, a % b);
if (b === 0)
return a
return gcd(b, a % b)
}
```

Expand Down
19 changes: 7 additions & 12 deletions docs/FrontEnd/JavaScript/手写Promise.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ if (this.status === Promise.REJECTED) {
const p1 = new Promise((resolve, reject) => {
// resolve('大功告成！')S
setTimeout(() => {
reject('一败涂地！')
reject(new Error('一败涂地！'))
console.log('反败为胜！')
}, 100)
})
Expand Down Expand Up @@ -285,10 +285,6 @@ then(onFulfilled, onRejected) {
}
```

**执行结果：**

<img src="https://gitee.com/GiteeFXJ/picstore/raw/master/codepic/20210708174000.png"/>

## 七、返回值的判断与处理

> 判断并分别处理返回值为Promise、普通值的情况
Expand Down Expand Up @@ -409,14 +405,13 @@ parse(result, resolve, reject) {

## 九、返回类型约束

> 当前Promise不能返回自己
>
> ```js
> let p = promise.then(value => return p) //原生的会报错:TypeError
> ```
```js
// 当前Promise不能返回自己 ，原生的会报错:TypeError
const p = promise.then(value => p)
```

```js
then(onFulfilled, onRejected) {
then(onFulfilled, onRejected){
if (typeof onFulfilled != "function") {
onFulfilled = value => value;
}
Expand Down Expand Up @@ -616,7 +611,7 @@ class Promise {
// 遍历回调函数数组，传值并执行onRejected函数
this.callbacks.map((callback) => {
callback.onRejected(value)
})
})
})
}
}
Expand Down
22 changes: 11 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,22 @@
"vite-plugin-vitepress-auto-sidebar": "^1.6.5"
},
"devDependencies": {
"@antfu/eslint-config": "^2.22.2",
"@iconify/json": "^2.2.227",
"@shikijs/vitepress-twoslash": "^1.10.3",
"eslint": "^9.7.0",
"@antfu/eslint-config": "^2.24.0",
"@iconify/json": "^2.2.232",
"@shikijs/vitepress-twoslash": "^1.12.0",
"eslint": "^9.8.0",
"eslint-plugin-format": "^0.1.2",
"lint-staged": "^15.2.7",
"puppeteer": "^22.13.0",
"puppeteer": "^22.14.0",
"sass": "^1.77.8",
"simple-git-hooks": "^2.11.1",
"unocss": "^0.61.3",
"unplugin-auto-import": "^0.18.0",
"unplugin-icons": "^0.19.0",
"unplugin-vue-components": "^0.27.2",
"vite": "^5.3.3",
"unocss": "^0.61.8",
"unplugin-auto-import": "^0.18.2",
"unplugin-icons": "^0.19.1",
"unplugin-vue-components": "^0.27.3",
"vite": "^5.3.5",
"vitepress": "1.2.3",
"vue": "^3.4.31"
"vue": "^3.4.34"
},
"simple-git-hooks": {},
"lint-staged": {
Expand Down
Loading

0 comments on commit edc7d74

Please sign in to comment.