yangxinxiang84-优快云博客

原创 Vue3 + TS4.8踩坑之配置husky问题env: sh\r: No such file or directory

mac下，保存husky的钩子命令文件commit-msg之后，git commit的时候提示：env: sh\r: No such file or directory。原因是.editorconfig配置中的end_of_line = crlf强制将文件转为了dos编码格式的。需要注释掉end_of_line = crlf，将commit-msg修改为unix编码的。

2023-04-22 21:52:08 2171

原创 Vue3 + TS4.8其他踩坑记录

Vue3 Module has no default export.Vetur(1192)，Vue3不要和Vetur搭配是用，而是是用Volar

2023-04-21 11:46:22 1510

原创 Vue3 + TS4.8的一些类型标注踩坑记录

Vue3 + TS4.8的一些类型标注踩坑记录：'PiniaPluginContext' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled.ts(1444)

2023-04-20 19:34:11 4294

原创 Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘

今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误（能正常编译），错误提示是：Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set t

2023-04-13 21:02:52 5222

原创很有意思的Generator function函数做参数的调用问题

Generator function 生成函数的调用和启动不一样，调用之后，函数不没有启动，只有再调用gen.next()的时候，才进入函数体，函数才启动。

2023-03-18 12:39:09 214

转载 nestjs[一例看懂中间件、守卫、管道、异常过滤器、拦截器]

本文转自网络，这里mark记录一下，自己学习用：nestjs[一例看懂中间件、守卫、管道、异常过滤器、拦截器]_墨水白云的博客-优快云博客_nestjs 拦截器

2021-12-24 16:19:56 638

原创图解推导爬楼梯（跳台阶）问题详细过程

1，题目：假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？注意：给定 n 是一个正整数。,2，递推公式（状态转移方程）推导分析，需求比较简单。拿到这个题目的第一想法就是递归，但是这个递推公式是怎么得来的？我居然陷入了逻辑死胡同，花了很长时间才彻底绕出来了。不多说，先上图：图片链接：上楼梯（1次上1台或者2台）问题 | ProcessOn免费在线作图,在线流程图,在线思维导图 |认真的看上图，可以看出：上到

2021-11-11 23:06:32 4783

原创动态规划思想解决找零问题，最精炼的实现（JavaScript版）

1，背景：十一节前练习了使用动态规划、回溯、贪心等算法实现找零问题：动态规划、回溯、贪心算法解找零问题（最小张数付款问题）（JavaScript实现）_yangxinxiang84的专栏-优快云博客是实现出来了，也没有问题，但是总感觉使用动态规划实现的时候状态转移部分有点奇怪，有点复杂，理解上有一些困难。遂向大神川哥请教，大神就是大神，咔咔咔一会给我发了一个Java版本过来，当看到川哥的实现的代码的时候，我以为他理解错了（怀疑实现错了），因为代码确实太精炼了，居然没有用除法，没有用取模。。。

2021-10-11 15:41:28 1080

原创动态规划、回溯、贪心算法解找零问题（最小张数付款问题）（JavaScript实现）

1，背景需求：我们有 3 种不同面值的硬币，11 元、5 元、1 元（一定会有），我们要支付 15 元（整数），最少需要多少个硬币？最少要3 个硬币（3 个 5 元的硬币）。2，动态规划实现这个问题应该是满适合用动态规划解的：多阶段决策求最优解。思路：A），用硬币的面值划分阶段，每一个阶段（每种硬币值）都有两种情况：使用或者不使用该面值硬币。B），每决策完一次之后，都会产生一组状态：本次决策用了多少个硬币、一共现在用了多少个硬币、每种状态下还剩余多少钱。C），将各个阶段

2021-09-30 21:04:19 1803

原创贪心、回溯、动态规划算法求“变形”杨辉三角的最短路径

1、背景需求：“杨辉三角”不知道你听说过吗？我们现在对它进行一些改造。每个位置的数字可以随意填写，经过某个数字只能到达下面一层相邻的两个数字。假设你站在第一层，往下移动，我们把移动到最底层所经过的所有数字之和，定义为路径的长度。请你编程求出从最高层移动到最底层的最短路径长度。咱们今天通过三种算法思想来解这个题：分别是回溯、动态回归、贪心等算法。这三种算法思想各有自己适应的场景，简要的说：贪心：一条路走到黑，就一次机会，只能哪边看着顺眼走哪边。不一定能求得满足要求的值。回溯：一.

2021-09-27 22:15:22 1041

原创 JavaScript实现归并排序算法并详解

归并排序是非常经典的基础排序之一，使用分治的思想，分而治之。先将待排序数组分拆为更小的数组，一直拆分到只有一个元素（只有一个元素的数组就是有序的），然后对分拆的数组按顺序进行合并。这个思想就是分而治之的思想，变成实现的时候，常用递归编程技巧来实现。直接上图来说这个过程（图是拷贝网上的）：这里重点详细讲一下合并过程，合并被分解好的左右两部分的时候，左右两部分分别已经排好了，因此可以按如下图策略合并：比如需要合并left [1,5,6]的数组和right [2,3,4]数组的过程图：..

2021-08-30 20:16:00 970

原创图解JavaScript单向循环链表及其反转实现

上一篇讲解分析了一下单向链表的反转实现。再看一下单向循环链表的反转。（高清图地址： https://www.processon.com/view/link/6121c41363768958e5302f6e）1，直观的看一下区别：先直观的看一下【单向链表】和【单向循环链表】的区别反转之后的指针（引用）指向:2，实现策略：2.1，从头节点开始遍历整个链表，直到找到尾节点。循环尾节点的判断是【尾节点】等于【头节点】，之前单向非循环链表的尾节点判断是节点的n...

2021-08-22 11:31:41 678

原创图解ES6实现单向链表（添加）和反转功能

这几天在看算法基础，链表部分再练练手，单向链表的反转是一个比较考验思维缜密的技巧点。先在纸上画一下单向链表的结构，分析一下指向问题，基本得出解决思路（解决思路不复杂，但是要小心处理各个指针（引用）的指向关系）：1，基本得出解决思路1，通过while循环遍历链表。2，每次遍历都要分析出三层节点关系：父节点、子节点，孙节点。每次遍历都将子节点的next指针（引用）指向父节点。3，遍历结束之后，获得当前链表的尾节点。4，修正头节点head的next指针为null，变为尾节点用。5，将头节点

2021-08-21 18:07:56 267

转载 JavaScript正则表达式的分组匹配详解

1，分组下面的正则表达式可以匹配kidkidkid：const reg = /kidkidkid/而另一种更优雅的写法是：const reg = /(kid){3}/这里由圆括号包裹的一个小整体称为分组。2，候选一个分组中，可以有多个候选表达式，用|分隔：这里的|相当于“或”的意思。var reg = /I love (him|her|it)/; reg.test('I love him') // true reg.test('I love her') /

2021-08-11 17:48:18 2305

原创 TypeScript中的模块解析原理

图形化的方式总结一下TypeScript中的模块解析原理。1，模块解析原理：https://www.processon.com/view/link/61128f195653bb6d0a7310b02，TS模块解析--一些核心解析参数https://www.processon.com/view/link/61128ee507912940a96566bc...

2021-08-10 22:43:50 225

原创 Typescript类型检查中的协变、逆变和不变

我个人理解，协变、逆变是针对于复杂类（集合）函数之间的类型兼容性关系。主要考虑数组和函数。先看一些比较权威的定义：https://baike.baidu.com/item/%E5%8D%8F%E5%8F%98/10963814?fr=aladdin 协变（covariant），如果它保持了子类型序关系≦。该序关系是：子类型≦基类型。逆变（contravariant），如果它逆转了子类型序关系。不变（invariant），如果上述两种均不适用。首先考虑数组类型构

2021-08-08 15:57:02 266

原创深入理解Typescript中的类型和构造器签名new

这两天重看ts基础部分的interface和泛型，涉及到构造器签名部分，看得还是比较模糊，仔细再整理一下，这次应该是清晰了。变量类型限定，主要用在以下场景：限定普通变量类型，限定函数类型（也属于限定变量类型），限定函数返回值类型，限定类类型。这里从限定普通变量类型开始，重点讲下限定类类型，即函数构造器签名。1，限定普通变量类型这是最简单和常用的类型限定用法，比如：（这部分代码也是后续演示代码的基础部分，后续用到这三个类的地方，定义都在这里）// 这部分代码也是后续演示代码的基础部分，后

2021-08-07 19:16:46 10436 2

原创 ES6的三个点（... 扩展运算符）应用场景小结

https://www.processon.com/view/link/610a94ca1e0853337b1bd06f1，解构赋值1.1，解构数组将数组中未解构的内容全部赋值合并在一个数组中给...后面的参数function test1(){ const[a,b,...c]=[1,5,7,12,15,18]; console.log(c); // [ 7, 12, 15, 18 ]}此时剩余参数必须是最后的元素，比如下面这个会报错：funct...

2021-08-04 22:00:02 390

原创 ES6中super关键字小结

小结参考：https://www.processon.com/view/link/61081304e0b34d3e35b7d0f6#map一、在类class中实行super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。class A {}class B e

2021-08-02 23:49:04 299

原创 ES6新特性在较低版本node或者浏览器环境下的支持问题

这里持续的记录一些在较低版本的node环境或者浏览器下，ES6新特性的兼容问题。处理也很简单，用webpack编译一下，或者升级运行环境。1，类实例属性的新写法class Logger { // 类实例属性的新写法在我的机器node v10.16.0下会报错，高版本node v14不会报错 level = "debug"; // 类实例属性的新写法在我的机器node v10.16.0下会报错，高版本node v14不会报错 outoutPath = "../l

2021-08-01 10:32:52 618

原创小技巧：前端用不同的方式实现斐波那契 fibonacci数列

斐波那契fibonacci数列是经典的入门算法题，定义是：从第3项开始，前面相邻两项之和，构成了后一项。也就是，从第3项开始，每一项等于前面两项之和。从定义看，最直观的就是递归，走一版：版本1：/** * 计算斐波那契数列第n项的值 * @param {*} n * @returns 第n项的值 */function fibonacci(n){ if(n<=1) { return 1; } return fibonacci(n-...

2021-07-30 15:58:01 532

原创小技巧：用ES6的方式获取URL链接中的参数

直接撸代码：function getURLParams() { const searchURL = location.search; // 获取到URL中的参数串 const params = new URLSearchParams(searchURL); const valueObj = Object.fromEntries(params); // 转换为普通对象 return valueObj;}...

2021-07-24 16:21:51 2788

原创深入理解JavaScript的执行流程，执行上下文EC、变量对象VO、活动对象AO、作用域Scope（链）

这几天在梳理JS基础，花了两天的时间重新完整的梳理了JS的执行机制，参考了很多网文、ECMAScript规范、MDN的文章，在此做一个总结。感觉这次梳理的应该比较清晰了。（本文中一部分示例代码和图片是copy来的哈）。一、名词解释：执行上下文环境：也叫执行上下文，Execution Context，下文中简写为EC。（没找到一个官方的定义）个人理解是JS在运行时候记录JS运行的时候需要用到的各种属性等信息的一个对象，主要供JS引擎解析执行代码用。执行上下文中记录了Scope，VO|AO，this

2021-01-23 23:08:33 1519 7

原创用流程图详解插入排序原理和流程（JavaScript实现）

插入排序是一个基础排序算法，网上都说比较简单。但是我在彻底去理解它的过程和原理的时候，还是着实花了一些精力。把这个过程用一个流程图记录下来，方便自己和需要的伙伴阅读。一、核心思想插入排序的核心思想是，将待排数组抽象划分成两个区域，一个是有序区域，一个是无序区域。通过两层循环，逐一的将无序区域的内容，按顺序插入到有序区域。1，初始区域划分：第一个元素（index = 0）初始为有序区域，因为只有一个元素，不存在有序无序一说；从第二个元素（index = 1）往后算初始的无序区域2，外层循环作用

2020-12-28 09:57:14 5641

原创强大的shelljs以及其中的rsync

shelljs着实强大，已经基本跟原生shell差不多了。以下内容整理自网络：一、使用ShellJS提升你的开发效率（一）直接看连接：https://juejin.im/post/5cdb76166fb9a032196ef1ff或者：https://blog.youkuaiyun.com/weixin_33980459/article/details/91422235或者看官网：http://documentup.com/shelljs/shelljs二、rsync基本命令和..

2020-11-23 16:37:23 519

原创小技巧：查看pm2启动的nodejs的日志

一般情况下，pm2启动的nodejs中console.log出来的内容都会以标准流的方式输出到屏幕上。查看方式：1，直接运行 pm2 logs，此时屏幕上会同时输出error log和实时log，同时会打印出日志文件的路径，类似：root@xxxxxxx:~# pm2 logs[TAILING] Tailing last 15 lines for [all] processes (change the value with --lines option)/root/.pm2/pm2.

2020-11-11 15:58:12 15646

原创 Object.defineProperty和Reflect.defineProperty的区别

Object.defineProperty和Reflect.defineProperty都是可以从底层修改一个对象的元属性的，Reflect.defineProperty将逐步的会取代Object.defineProperty，二者的基本用法是一致的。其中很大的一个区别是：Object.defineProperty的返回值是设置的对象；而Reflect.defineProperty的返回值是boolean，表示设置属性是否成功。撸代码看看：// 测试一下definePropertyfun

2020-07-08 13:36:16 1081

原创图解JavaScript中的async generator函数执行顺序

ES6中的async generator函数很好用，在处理一些列的异步调用管理上很方便。可以方便的处理异步函数，可以用来管理异步的、序列的异步工作流。但是执行的顺序确实有点绕，脑子不太好使，端午节期间花了一天的时间来彻底梳理了一下。注意，看这篇文章前，最好要先了解generator函数的运行机制和基本的使用。这篇文章不做阐述。直接撸代码一、generator函数中，直接使用yield返回// 模拟一个异步函数function mockFetch(url, ms){ log(

2020-06-26 20:59:50 514

原创 ES6中的generator函数的应用简介

ES6中的generator函数的应用简介这里先留一个坑哈，方便其他文档链接过来。该文章计划主要写generator函数的使用场景。

2020-06-26 11:55:11 247

原创 JavaScript中的函数分类和讲解：普通函数（含对象的方法）、generator函数、async函数、async generator函数使用讲解

在ES6之前，JS中主要只有一种函数，ES6之后，加入了其他的一些函数，方便了很多其他场景的处理，尤其是异步场景的处理，用的合适，能大大的简化异步代码的处理。一、普通函数：这里所说的普通函数，包含普通函数、函数表达式定义的函数、对象中的方法，箭头函数等。普通函数是比较常见、常用的，这里描述一下涉及的调用方式：// 1.1，直接函数调用方式:Person("迪丽热巴", 18, "直接函数调用");// 1.2，方法调用obj.doSomeThing()// 2，构造函数方式

2020-06-26 11:51:10 429

原创用ES6的新特性实现斐波那契数列

斐波那契数列是每一门语言必讲的一个简单又经典的算法题，用ES6的新特性来实现，简单、清晰数列从第3项开始，每一项都等于前两项之和，比如：1、1、2、3、5、8、13、21、34直接撸代码：方案1，解构赋值的方式：function fib1(num){ let rst = []; let [pre, current] = [0,1]; if(num>=3){ for(let i=0; i<num; i++){ rs.

2020-06-01 22:47:30 476

原创 JavaScript中函数调用方式小结

新冠疫情的五一假期，没有出去浪，在家把JS基础温故一下，小结一下目前我遇到的JS函数的调用方式。可能有遗漏的，但是应该比较全了。我进行了一下分类，一共分了约几大类：1，构造函数调用（2种）2，直接调用（1种）3，通过call， apply等方式调用(4种)4，通过bind调用（1种）5，自执行函数直接调用（严格上说，不算一种调用方式），这个不举例了老样子，直接撸代码...

2020-05-05 16:25:23 246

原创用流程图详细解释JavaScript冒泡排序原理和流程

冒泡排序很简单，两重循环即可。用一个图详细解释其冒泡原理。核心原理是：把每一个元素和数组中的每一个元素进行位置比较，如果满足移动的条件，相比较的两个元素交换位置（冒泡）先撸代码，代码简短：/** * 数组的冒泡排序 * @param {array} arr * @author xinxiang84@126.com */function bubbleSort(arr) {...

2020-05-03 00:32:38 2122 1

原创一图解析JavaScript快速排序原理，看了就不会忘~~

今天有个朋友问快速排序的原理，用processon给他画了一个图，也顺手贴上来，给需要的朋友使用。快排的核心原理是：1，选数组中的中间数据为比较的基数（其实选哪个都可以，选第一个或者最后一个都行）2，从头开始遍历数组，跟选出来的中间数进行比较，比中间数小的放左边数组，大的放右边数组3，此时得到leftArr数组、中间元素、右边数组4，分别对左边数组执行步骤1~3，直到拆不出数...

2020-05-02 22:32:37 880

原创 redux学习之有点贱的combineReducers爬坑

这几天在看react、redux，在试用redux的combineReducers，准备动手敲一敲代码，按照书上的讲解背着敲一遍示例，结果刚到使用combineReducers创建store就无情的抛出错误，先分享个错误描述和截图：醒目的报错：Error: Reducer "todos" returned undefined during initialization. If the state ...

2018-05-22 16:12:14 5047 1

原创在win7上使用wamp搭建PHP实战问题小结

今年要开始全力学习PHP，今天晚上在win7机器上搭建PHP，虽然简单，还是遇到了几个小问题。步骤：1，到官网下载wampserver： http://www.wampserver.com/ 官网很卡通，然后跳转到了这里真正下载： http://sourceforge.net/projects/wampserver/?source=typ_redirect 文

2015-03-25 23:46:12 355

yangxinxiang84的专栏