轻盈的风-CSDN博客

原创如何让子元素突破父元素padding的限制，变成和父元素一样的宽度？

我们在用UI库或者维护项目的时候，可能会遇到别人用div包裹了一层，并设置了padding，但是我们又想要让子元素突破padding的限制，让子元素和父元素一个宽度

2022-10-30 21:14:02 3044 1

原创 js数据结构与算法_18_删除排序数组中的重复项

给你一个升序排列的数组nums，请你原地删除重复出现的元素，使每个元素只出现一次，返回删除后数组的新长度。元素的相对顺序应该保持一致。

2022-10-23 23:42:42 254

原创一次性搞懂css中的clamp函数，max函数，min函数，vmax，vmin

一次性搞懂css中的clamp函数，max函数，min函数，vmax，vmin

2022-10-11 17:52:42 1806

原创 ts扩展声明vue全局属性

我们需要扩展一下vue中的模块，而vue正好暴露了一个帮助我们拓展模块ComponentCustomProperties。我们需要在src下创建.ts 或 .d.ts文件，然后在里面扩展类型ComponentCustomProperties，ts会合并其中的声明，就好像它们在与原始文件相同的文件中声明一样。

2022-09-21 12:45:49 2990

scoped的原理就算给当前作用域里的DOM节点加一个不重复data属性，编译后的样式里加一个当前组件的data属性选择器来实现组件间样式的互不干扰。**问题描述**我父组件中使用了一个和子组件根元素一样的class，然后在添加了scoped的前提下，子组件样式被父组件修改了，为此我自己研究并总结了一下，有问题欢迎指出。1.当父组件里的class中有和子组件的根元素上的class一样的时，可以在父组件里用那个class控制子组件根元素的样式。结果就算父组件上的用class定义的样式修改了子组件上的样式。..

2022-08-01 23:21:02 540

原创 vue从地址栏输入路径后path和导航按钮不匹配问题

解决vue从地址栏输入路径后path和导航按钮不匹配问题

2022-08-01 19:07:13 590

原创 vue动态路由刷新匹配错误问题以及解决办法

目录一、了解动态路由二、解决问题结论一、了解动态路由我这里说的动态路由指的是，由后端提供当前角色可以访问的所有路径，前端提前写好路径与组件之间的映射也就是route，然后根据后端返回的url进行匹配，将匹配到的route加入到router里面。后端返回的数据大概是这样：提前写好的route的path一定要和上面的url对应：export default { path: '/main/analysis/overview', name: 'overview', component:

2022-05-24 21:13:27 4751

原创 js数据结构与算法_17_贪心算法

贪心算法认识贪心算法使用贪心算法解决背包问题认识贪心算法贪心算法就是一种比较简单的算法。贪心算法总是会选择当下的最优解，而不去考虑这一次的选择会不会对未来的选择造成影响。使用贪心算法通常表明，实现者希望做出的这一系列局部“最优”选择能够带来最终的整体“最优”选择。如果是这样的话，该算法将会产生一个最优解，否则，则会得到一个次优解。然而，对很多问题来说，寻找最优解很麻烦，这么做不值得，所以使用贪心算法就足够了。这段话来自《数据结构与算法：JavaScript描述》。我的理解就是在对问题求解时，选择当前最

2022-04-22 19:35:12 866

原创 js数据结构与算法_16_动态规划

动态规划认识动态规划动态规划案例计算斐波那契数列寻找最长公共子串认识动态规划动态规划，听起来高大上，其实并不难，在你看完这篇博客后还可能感叹，这么简单呀！在了解动态规划之前，我们得先谈谈递归，在我们的js里递归的本质就是在函数执行栈中调用函数，一层一层的深入，直到小问题被解决，开始回溯，最后大问题被解决；递归虽然代码简洁，但是执行效率低下，使用动态规划设计的算法从它能解决的最简单的子问题开始，继而通过得到的解，去解决其他更复杂的子问题，直到整个问题都被解决。所有子问题的解通常被存储在一个数组里以便于

2022-04-21 17:26:36 1431 1

原创 js数据结构与算法_15_基于快排的二分查找

二分查找加快速排序了解二分查找实现二分查找了解二分查找二分查找大家应该都比较熟悉，每次去除一半的的查找范围，平均时间复杂度O(log n);搜索过程从数组的中间元素开始，如果中间元素正好是要查找的元素，则搜索过程结束；如果某一特定元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半中查找，而且跟开始一样从中间元素开始比较。如果在某一步骤数组为空，则代表找不到。这种搜索算法每一次比较都使搜索范围缩小一半；二分查找的数组一定得是有序的，所以这次我的标题是基于快排的二分查找，当然你也可以基于插入排

2022-04-18 16:14:55 764

原创 js数据结构与算法_14_基数排序

文章目录认识基数排序实现基数排序认识基数排序基数排序是桶排序的扩展，桶排序是将序列里面的元素尽可能均匀的放置到桶内，在对桶内元素排序，最后依次把桶中元素拿出来。而基数排序也会用到桶，桶的数量与序列元素的基数有关，如果是10进制那么就有10个桶，将所有待比较数值（正整数）统一为同样的数位长度，数位较短的数前面补零。然后，从最低位开始，依次进行一次排序。。这样从最低位排序一直到最高位排序完成以后，数列就变成一个有序序列。比如我们试试排序[72,66],72的个位是2，我们就将72放到第三个桶（下标为2），

2022-04-17 16:48:08 574

原创 js数据结构与算法_13_桶排序

桶排序认识桶排序桶排序实现认识桶排序桶排序和上次实现的计数排序一样不是比较比较排序，所以平均时间复杂度比O(n logn )要小点；桶排序的时间复杂度与怎样对每个桶中的元素进行排序有关，可以采用快排甚至是递归调用桶排序进行排序；所以最坏时间复杂度为O(n**2),最好时间复杂度接近O(n),这里就不具体探究时间复杂度了，我们主要学习思想；桶排序的核心思想就是将序列中的元素尽可能均匀分布到有序的桶中，在对桶中元素排序，最后依次把桶中元素放入序列中即可；在写具体代码之前我们来思考一下，如何尽可能均匀

2022-04-17 09:53:59 189

原创 js数据结构与算法_12_堆排序

一、了解堆结构这个排序算法是我花费时间比较多的一个，核心思路就是将序列转化成大顶堆，然后每次将大顶堆的根节点和最后一个子节点（在数组中最后一个元素),所以我们得先了解堆这个结构；堆是一个完全二叉树（除了倒数第二层，其他层每个父节点都有两个子节点，最后一层的节点都靠左排列）；当一个堆里面的父节点值恒大于子节点的值，这个堆我们称为最大堆或大顶堆；当一个堆里面的父节点值恒小于子节点的值，这个堆我们称为最小堆或小顶堆；而我们堆排序要用的就是大顶堆了，顾名思义，大顶堆的根节点就是堆中最大的值了；

2022-04-14 14:11:19 201

原创 js数据结构与算法_11_计数排序

一、认识计数排序这个排序我是真心喜欢，它帮助我打破了我的思维禁锢，以前我认为给序列排序是一定要在元素之间比较的，而且排序算法的时间复杂度的下限就是O(nlogn)，比如我们熟知的快排、希尔、堆排序等等；计数排序在某些情况下是快过上面说的比较排序算法的，比如0-100排序，计数排序是最好的；当输入的元素是n个0~k之间的整数时，它的运行时间是O(n+k);计数排序的核心思想就是用统计数组的下标来表示原始数组的值，而统计数组对应下标的值就是原始数组中值出现的次数；排序就只需要遍历统计数组，按照值

2022-04-13 20:20:33 228

原创 js数据结构与算法_10_归并排序

一、实现希尔排序归并排序和快数排序一样采用”分治法“，也就是分而治之；分割：递归地把当前序列平均分割成两半。集成：在保持元素顺序的同时将上一步得到的子序列集成到一起（归并）。简单来说就是利用递归每次将数组从中间分成两部分，直到数组的长度小于2后，开始回溯，将分好的两个数组排好序并合成一个新数组，继续回溯直到完成整个算法；我觉得归并排序的实现没快排难，或者说会快排，写归并就简单很多,这里简单谈一下这两个排序：归并排序的平均时间复杂度为O(nlogn),快排平均时间复杂度也为O(nlogn

2022-04-12 18:30:48 583

原创 js数据结构与算法_09_快速排序

一、实现快排排序20世纪十大算法之一的快速排序，在大部分情况下都是好于其他排序算法的；维基百科上对快排的描述：快速排序（英语：Quicksort），又称分区交换排序（partition-exchange sort），简称快排，一种排序算法，最早由东尼.霍尔提出。在平均状况下，排序n个项目要O(nlogn)次比较。在最坏状况下则需要O(n^2）次比较，但这种状况并不常见。事实上，快速排序O(nlogn)通常明显比其他算法更快，因为它的内部循环（inner loop）可以在大部分的架构上很有效率地.

2022-04-12 09:42:04 152

原创 js数据结构与算法_08_希尔排序

一、实现希尔排序希尔排序可以说是排序算法中的一个里程碑了，打破人们对排序算法的时间复杂度只能是O（n**2）的思维禁锢；上一节我们知道了效率比冒泡和选择高的插入排序，那有没有思考过当标记位是一个很小的元素，那岂不是要从有序队列的最后一位一直比较到最前面吗，这样效率不是很高；可不可以，减少比较次数呢？比如大的往后面靠靠，小的往前面靠靠，可以的，希尔排序就是依次为核心：希尔排序通过将比较的全部元素分为几个区域来提升插入排序的性能。这样可以让一个元素可以一次性地朝最终位置前进一大步。然后算法再取越来越

2022-04-10 17:14:07 486

原创 js数据结构与算法_07_插入排序

一、实现插入排序插入排序很重要，是高级排序的基础，如希尔排序、快排等等；选择排序的核心：局部有序，标记并取出一个元素，其左边部分是局部有序，然后从排好队的元素序列中从后向前比较，比标记元素大的，向后移动一个位置，比标记元素小，则标记元素插入其后面；这里就不用for循环了，因为你不知道要循环多少次，我们使用while循环；比如这是一个要排序的无规则数组：let arr = [4, 8, 1, 9, 6, 7];第一次循环时，第一个元素可以看成是局部有序，那么标记元素为8（index=1）

2022-04-10 11:54:53 1403

原创 js数据结构与算法_06_选择排序

一、实现选则排序选则排序和冒泡排序一样时间复杂度都是O(n**2);选择排序的核心是每次循环从剩下的元素里选择最小的一个，然后和前面对应的位置交换位置；比如这是一个要排序的无规则数组：let arr = [4, 8, 1, 9, 6, 7];第一次循环时，剩下的元素就是数组本身，那么最小的元素是谁？可以看出是1，当然，这是我们用肉眼看的，等下用js来实现；拿到最小元素1后，就和第一个元素4（index=0）交换位置：let arr = [1, 8, 4, 9, 6, 7];第

2022-04-10 10:43:08 1142

原创 js数据结构与算法_05_冒泡排序

一、实现冒泡排序冒泡排序就像鱼儿吐泡泡一样，从小到大，也暗示着排列的顺序是从小到大；核心思想是依次比较前后位置元素的大小，哪个大哪个就放后面，这样一轮下来，最后一个位置一定是最大的；这里的最后一位不用继续比较了，因为倒数第二位就是与它比较；比如这是一个要排序的无规则数组：let arr = [4, 8, 1, 9, 6, 7];那我们安照上面的来一轮前后比较试试：function demo(array) { let N = array.length; for (let

2022-04-09 23:26:15 298

原创 js封装数据结构_11_封装图结构

说到图，不得不想到数学中“图”，让我们来看看维基百科怎么描述的吧：在li'san'shu'x中，图（Graph）是用于表示物体与物体之间存在某种关系的结构。数学抽象后的“物体”称作节点或顶点（英语：Vertex，node或point），节点间的相关关系则称作边。在描绘一张图的时候，通常用一组点或小圆圈表示节点，其间的边则使用直线或曲线。...

2022-04-08 22:54:17 692

原创 js封装数据结构_10_字典

字典主要讲究一一对应关系，我们的JavaScript将Map（也就是映射也可以叫字典）已经封装的很好了，对象、symbol、字符串等等都可以作为key；这里就简单用对象来封装一个字典吧：function Dictionay() { // 字典属性 this.items = {}; // 方法 Dictionay.prototype.set = function (key, value) { this.items[key] = value; }; Dictiona

2022-04-08 16:05:36 561

原创 js封装数据结构_09_二叉搜索树

一、什么是二叉搜索树二叉查找树（英语：Binary Search Tree），也称为二叉查找树、有序二叉树（ordered binary tree）或排序二叉树（sorted binary tree），是指一棵空树或者具有下列性质的二叉树：若任意节点的左子树不空，则左子树上所有节点的值均小于它的根节点的值；若任意节点的右子树不空，则右子树上所有节点的值均大于它的根节点的值；任意节点的左、右子树也分别为二叉查找树；二、二叉搜索树的有缺点优点：二叉查找树相比于其他数据结构的优势在于查找、插

2022-04-05 16:23:51 1012

原创 js封装数据结构_08_哈希表

一、哈希函数哈希函数：函数里面封装了将字符串转化为对应的index的具体实现；我们要将字符串转化为对应的index，首先得知道如何区分字符串，一般我们采用编码方案，也就是每一个字符都有自己对应的唯一的编码：现成的就是unicode(万国码)，unicode是字符集没有规定如何存储对应的编码。unicode的实现有UTF-16、UTF-8、UTF-32，这里我们采用UTF-16；而js也给我们封装了对应的API：charCodeAt() //返回0·65535之间的整数，表示给定索引处的UTF

2022-03-26 13:33:52 630

原创 js_判断一个数是否是质数的两种思路

一、什么是质数质数（Prime number，又称素数），指在大于1的自然数中，除了1和该数自身外，无法被其他自然数整除的数（也可定义为只有1与该数本身两个正因数的数）。二、实现判断质数大于1，且只能被1和自身整除,也就是 2到~num-1不能整除;那我们先做个边界判断:if (typeof num !== "number" || num <= 1) return false;然后依次遍历2~num-2，如果能被num整除则表示不是质数，返回false；循环结束都没有re

2022-03-26 11:39:31 2541

原创 js数据结构与算法_04_反转链表

题来自leetcode《剑指offer》题目：定义一个函数，输入一个链表的头节点，反转该链表并输出反转后链表的头节点。摘要：我们js是没有链表这种数据结构的，需要自己封装。简单说一下，链表以节点为单位，每个元素都是一个独立对象，在内存空间的存储是非连续的。链表的节点对象具有两个成员变量：「值 val」，「后继节点引用 next」。链表属性有head、length，一个指向头节点，一个表示链表节点的个数；这是题目给的节点类：/** * Definition for singly-link

2022-03-21 13:39:42 97

原创 js封装数据结构_06_集合

一、集合的特点：由一组无序的，不能重复的元素构成；不能通过下标进行访问；二、这里我实现了：增：add，添加项删：remove，移除指定项，成功返回true，失败返回false clear，移除所有项查：has，集合中存在此元素则返回true其他：size，包含元素个数 values，返回包含所有集合元素的数组集合间的操作：union，交集 intersection，并集 difference，差集 isSubsetTo，子集三、问题或不足边

2022-03-20 23:06:43 167

原创 js封装数据结构_05_双向链表

一、双向链表的特点：双向链表不同于单向链表，它既可以从头遍历到尾，又可以从尾遍历到头；链表一般有head、tail、length等属性，head指向头节点，length表示链表节点的个数,tail指向尾部节点；链表无法通过下标直接访问元素，需要从head指向的头节点或tail指向的尾节点开始一个一个的访问，直到找到对应的元素；二、这里我实现了：增：append，向链尾添加节点 insert,向特定位置插入新节点删：removeAt，指定位置删除节点，成功返回删除节点.

2022-03-19 23:23:39 395

原创 js封装数据结构_04_单向链表

一、要想自己封装链表得先知道链表的特点：链表的每个元素有一个存储元素本身的节点和一个指向下一个节点的引用（有些语言是指针）;链表一般有head、length等属性，一个指向头节点，一个表示链表节点的个数；链表无法通过下标直接访问元素，需要从head指向的头节点开始一个一个的访问，直到找到对应的元素；二、这里我实现了：增：append，向链尾添加节点 insert,向特定位置插入新节点删：remove_identical，链表去重 removeAt，指定位置删除节点

2022-03-18 13:24:25 186

原创 js封装数据结构_03_优先级队列

优先级队列是不同于”先进先出“的队列，可以查看和取出优先级最高的元素;优先级是数字越小优先级越高；这里实现了：enqueue，插入元素； dequeue，删除优先级最高的元素； front，查看优先级最高的元素； isEmpty，是否为空； toString，重写toString()；这里讲一下最难的enqueue的实现：先封装一个类中类，用于存放元素以及对应的优先级 // 类中类 function QueueElement(elemen

2022-03-18 13:02:29 691

原创 js封装数据结构_02_队列

队列比较简单，这里实现了enqueue、dequeue、front、isEmpty、size、toString等方法；function Queue() { // 属性 this.items = []; // 方法 // 1.将元素加入队列 Queue.prototype.enqueue = function (element) { this.items.push(element); }; // 2.从队列中删除前端元素 Queue.prototype.dequ

2022-03-18 12:44:23 775

原创 js封装数据结构_01_栈

最基本是数据结构，没什么难的；实现了push、pop、peek（查看栈顶元素）、isEmpty、size、toString等方法；function Stack() { // 栈中的属性 this.items = []; // 栈相关的操作 // 1.将元素压入栈 Stack.prototype.push = function (element) { this.items.push(element); }; // 2.从栈中取出元素 Stack.protot

2022-03-18 12:38:54 1088

原创 js数据结构与算法_03_从尾到头打印链表

题来自leetcode《剑指offer》题目：输入一个链表的头节点，从尾到头反过来返回每个节点的值（用数组返回）。摘要：我们js是没有链表这种数据结构的，需要自己封装。简单说一下，链表以节点为单位，每个元素都是一个独立对象，在内存空间的存储是非连续的。链表的节点对象具有两个成员变量：「值 val」，「后继节点引用 next」。链表属性有head、length，一个指向头节点，一个表示链表节点的个数；这是题目给的节点类：/** * Definition for singly-linked

2022-03-17 20:51:19 487

原创 js数据结构与算法_02_包含min函数的栈

题来自leetcode的《剑指Offer》题目：定义栈的数据结构，请在该类型中实现一个能够得到栈的最小元素的 min 函数在该栈中，调用 min、push 及 pop 的时间复杂度都是 O(1)。摘要：时间复杂度O(1)意思是在调用min等方法时，运行次数和数据量N成常数关系，就是不会随数据量N的变化而变化：那么我们就不能用循环，递归之类的；一开始我打算用sort排序解决min，但还是不太符合题意：let copyArr = [...this.stackArr]; copyArr.

2022-03-15 20:11:03 702

原创 js数据结构与算法_01_用两个栈实现队列

题来自leetcode的《剑指Offer》题目要求是：// 用两个栈实现一个队列。队列的声明如下，请实现它的两个函数 appendTail 和 deleteHead ，// 分别完成在队列尾部插入整数和在队列头部删除整数的功能。// (若队列中没有元素，deleteHead 操作返回 - 1 )摘要：队列是先进先出，而栈是先进后出；那么我们就可以用一个栈来作为队列，一个栈用来辅助队列删除；将satckOne中的元素弹出压入到stackTwo中，再在stackTwo中弹出，是不

2022-03-14 23:03:23 765

原创记录一道关于作用域的面试题

var x= 0;function foo(x, y = function () { x = 3;console.log(x)}) { console.log(x) var x = 2; y(); console.log(x)}foo()console.log(x)题目就是上面这个，小伙伴们可以先自己猜测一下打印结果；首先结果是：undefined 3 2 0解析：上面一共出现了三层作用域，全局作用域、参数作用域、函数作用域。其中参数作用域是只有函数参数.

2022-02-24 20:16:59 185

原创手写promise，包括类方法

2022-01-21 22:12:08 414

原创 js添加css样式的另一种方式-创建样式规则【2021.12.10】

1.利用document.createElement("style")创建style标签2.利用innerHtml加入样式3.利用document.head.appendChild(style)将style元素放入head标签里面例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib

2021-12-15 17:04:50 1740

原创构造函数的显性返回的记录【2021.12.9】

// 1 function Name(name){ this.name = name; return new_name={ name:'彭大', } } let MyName=new Name("pfq"); console.log(MyName.name)//彭大 console.log(new_name.name)//彭大// 2 function Age(age){ ...

2021-12-14 11:53:41 725

原创 FiveFox对于click事件和DOMMouseScroll事件中detail属性【2021.12.8】

本来是想做一个兼容火狐和谷歌浏览器的基于滚轮事件的轮播，然后遇到了点问题，特意记录一下：首先click事件的事件对象有个detail属性，这是用来记录给定位置发生了多少次单价的，在同一个元素上相继发生一次mousedown和mouseup事件做为一次单价，简单来说发生一点击值就为1，两次为2。但是对于火狐浏览器中，DOMMouseScroll事件的事件对象里，detail属性是用来记录滚轮的，往上为-3的倍数，往下为3的倍数。.而谷歌是不支持DOMMouseScroll事件，它支持mousewh

2021-12-12 11:11:07 505

空空如也

空空如也