- 博客(162)
- 收藏
- 关注
RSS订阅原创 数据过多/DOM操作导致页面卡顿和请求突增导致页面崩溃
数据过多导致页面卡顿采用懒加载+分页(前端维护懒加载的数据分发和分页) 使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表)请求突增导致页面崩溃
2021-06-11 21:41:26
7578
1
原创 js实现trim方法
trim()：去除字符串左右两端的空格方法一：正则表达式^:从头匹配$:从尾匹配\s:s匹配空字符(空格,tab,\n,换页,回车)*:匹配前面的表达式0次或多次|:指明两项之间的一个选择g:执行全局匹配,而不是找到第一个匹配就停止...
2021-06-05 16:59:09
10590
原创 v-if 与 v-show的区别及对生命周期的影响
两者的区别(1) v-if 的原理是根据判断条件来动态的进行增删DOM元素，只有v-if的值为true时,元素才会存在于html页面中； v-show是根据判断条件来动态的进行显示和隐藏元素，是通过修改DOM元素的display属性来实现的，无论v-show的值为true或者false,元素都会存在于html页面中。(2) 只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断(3) 如果需要非常频...
2021-05-23 09:44:46
1743
原创 如何在页面上实现一个圆形的可点击区域？
方法一：通过map加area<img>标签中的 usemap 属性将图像定义为客户端图像映射。图像映射指的是带有可点击区域的图像。usemap 属性与<map>元素的 name 或 id 属性相关联。这里通过 usemap 映射到 <map> 的circle形 <area>。<area>标签类似<img>，是无法有子元素或其他子内容的。shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形po..
2021-05-11 09:17:05
1807
转载 牛客网ACM模式下JavaScript(V8)常见输入输出练习
每一次调用readline()就会识别一行输入数据，多行输入其实就是写多个readline()即可。固定行数输入：任意行数输入：注意：readline得到的是字符串，计算需要转化为数字输出牛客网输出函数用print()和console.log()都可以。多行输入会根据你的print个数来自动折行；或者利用print(lines + ‘\n’);来折行。例一：while(line = readline()){ // readline 得到的是字符串 ...
2021-05-08 00:44:32
13358
5
原创 模拟实现函数的apply.call.bind函数
apply.call.bind 的作用：都是为了改变函数运行时上下文(this指向)。三兄弟的区别：三兄弟接收的第一个参数都是 要绑定的this指向. apply的第二个参数是一个参数数组,call和bind的第二个及之后的参数作为函数实参按顺序传入。 bind不会立即调用,其他两个会立即调用。模拟实现函数的call方法函数定义：call是可以被所有方法调用的，所以需要定义在 Function的原型上。函数接收参数：绑定函数被调用时只传入第二个参数及之后的参数。首先contex.
2021-04-09 17:47:13
121
原创 模拟实现Promise.all方法
模拟实现 Promise.all 方法function myall(proArr) { // 返回一个promise实例 return new Promise((resolve, reject) => { // 判断参数是否是数组 if (!Array.isArray(proArr)) { return reject(new TypeError('arguments must be Array')) } let count = 0 l
2021-04-08 19:54:10
452
原创 javascript中的 for...in, for...of, for 和 forEach 循环的区别
for…in和for…of的区别for … in 获取的是对象的键名key；for … of遍历获取的是对象的键值value 如果要通过for…of循环，获取数组的索引，可以借助数组实例的 entries() 方法和 keys() 方法 for … in 会遍历对象的整个原型链,性能非常差不推荐使用；而 for … of 只遍历当前对象，不会遍历原型链 对于数组的遍历：for … in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for … of只返回数组的下标对应的属性值
2021-03-04 14:05:32
478
5
原创 事件冒泡和事件捕获区别及设置
事件冒泡：从下至上(是指子元素向父元素传递的过程)， bool=false冒泡(默认)事件捕获：从上至下(是指父元素向子元素传递的过程)， bool=true 捕获 一般不会用到事件委托利用冒泡阶段运行的机制实现的，使用事件代理的方法少了遍历所有li节点的操作，性能上肯定更加优化，而且如果后期又动态的增加li节点，不使用事件代理的话还需要再重新给新增的li节点绑定事件，但是使用事件代理的话则不需要了。例子：假设一个元素div，它有一个下级元素p。<div> <p.
2021-03-01 17:22:18
1604
2
原创 Vue 中的 ref 和 $refs 的使用
在vue中一般很少直接操作DOM，如果需要操作DOM，我们可以通过ref 和$ref来实现。refref被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的$refs对象上，如果是在普通的 DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。当在子组件或者DOM元素上写 ref="xxx" 时，vm 实例上就有了一个 $refs 属性，包含了所有注册过 ref 的 DOM对象$refs$refs是一个对象，持有已注册过ref的所有...
2021-01-19 21:48:09
837
转载 Vue之父子组件间通信实例讲解(props、$ref、$emit)
在说如何实现通信之前，我们先来建两个组件 father.vue 和 child.vue 作为示例的基础。父组件：<template> <div> <h1>我是父组件！</h1> <child></child> </div></template><script>import Child from '../components/child.vue'export ...
2021-01-19 21:47:35
4512
9
转载 export与export default的区别
ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。1.export与export default均可用于导出常量、函数、文件、模块等2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3.在一个文件或模块中，export、import可以有多个（export 可以导出多个命名模块），export default仅有一个输出单个值，使用export default 输出多个值，使用
2021-01-04 19:47:10
3039
1
原创 实现jsonp js
JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件，利用这一特性实现数据传输。用原生JS实现JSONP非常简单，无非几点：1）定义一个函数，用于处理接收到的跨域数据。2）生成一个dom节点(script节点)，然后src属性上面记入发送的目的URL以及参数。3）在跨域服务器端接收GET请求，返回数据（返回之前定义函数的调用的字符串）。4）删除之前生成的script节点。...
2020-12-02 19:04:00
373
原创 模拟实现instanceof的功能 js
typeof返回值为6个字符串typeof是用来判断数据类型的，就一个参数 ,使用方式像这样：typeof num, 就是判断num是什么类型typeof 一般只能返回如下几个结果："number"、"string"、"boolean"、"object"、"function" 和 "undefined"；着重看这几个：typeof 不存在的变量 = “undefined” typeof 对象 = “object” typeof null = "object" typeof...
2020-11-29 22:18:37
207
原创 模拟实现构造函数new的过程 js
用new操作符创建对象时发生的事情：（1）创建一个新对象；（2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；（3）执行构造函数中的代码（为这个新对象添加属性和方法）；（4）返回新对象；function myNew(constructor, params) { var args = [].slice.call(arguments); //将具有length属性的arguments转换为数组 var constructor = args.shift()
2020-11-27 18:13:02
405
原创 使用原生的JavaScript实现ajax请求（ajax实现原理)
Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。XMLHttpRequest 对象XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。var xhr = new XMLHttpRequest()
2020-11-27 16:10:08
399
原创 嵌套数组指定层次展开 flat扁平化 js
数组的扁平化即为将一个嵌套多层的数组转换为只有一层的数组。[1, [2]] => [1,2][[1, 2], [3, 4]] => [1, 2, 3, 4][1, 2, [3, 4, [5, 6]]] => [1, 2, 3, 4, 5, 6]方法一：递归思路：通过遍历最外层数组的每一个元素，看看是否还是数组，如果是的话，继续递归执行，不是的话，放到最后的结果数组当中。// 1. 普通方法 递归function flattenMd1() { let.
2020-11-23 21:59:37
1103
原创 模拟实现函数节流(throttling)、防抖(debounce) js
防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。效果：如果短时间内大量触发同一事件，只会执行一次函数。实现：既然前面都提到了计时，那实现的关键就在于这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：function debounce(fn, delay) {//防抖 // 定义一个定时器timer，用来记录当前执行函数状态（借助闭包） let timer = null
2020-11-23 15:09:20
272
原创 DP 斐波那契数列js NC68
斐波那契数指的是这样一个数列：0、1、1、2、3、5、8、13、21、…… 用数学公式表示为：简单的来说就是 后一项是前两项之和。方法一：递归时间复杂度：O(n^2)，空间复杂度：O(n)// 递归法function Fibonacci(n) { if (n < 2) { return n; } else { return Fibonacci(n - 1) + Fibonacci(n - 2); }}由.
2020-11-20 09:54:37
215
原创 二叉树中是否存在节点和为指定值的路径 NC9
给定一个二叉树和一个值\ sumsum，判断是否有从根节点到叶子节点的节点值之和等于\ sumsum的路径，例如：给出如下的二叉树，sum=22返回true，因为存在一条路径5→4→11→2 的节点值之和为 22。思路分成三种情况，（1）节点不存在，返回false（2）节点只有一个的时候，判定是否左子和右子均为空，且sum值等于该节点值（3）递归的具体操作，递归左子和右子，同时更新sum的值，且结果为或的关系var hasPathSum = function (root, s...
2020-11-18 16:07:59
329
原创 二叉树（最大）深度js NC13
最大深度是指树的根结点到最远叶子结点的最长路径上结点的数量。树的深度 = 左子树的深度和右子树深度中最大者 + 1function TreeDepth(pRoot) { //树的深度=左子树的深度和右子树深度中最大者+1 if (pRoot === null) return 0; var leftDep = TreeDepth(pRoot.left); var rightDep = TreeDepth(pRoot.right); return
2020-11-18 14:58:42
445
原创 二叉树各种遍历（前中后序遍历，递归非递归，DFS,BFS）js
树的中序遍历（非递归）思路：先将p入栈，遍历左子树；遍历完左子树返回时，栈顶元素应为p，出栈，访问p.val，再中序遍历p的右子树。
2020-11-18 14:26:14
501
原创 两个链表的第一个公共节点 NC66
方法一：双指针假设两个链表公共长度为C,不公共的长度分别为A、B。则两个链表长度分别为A+C，B+C。设两个指针，让第一个链表走完之后，跳到第二个链表开始走，共A+C+X1距离；同理第二个链表走完后调到第一个链表开始走，走B+C+X2距离。那么两个指针相遇时，由 A+C+X1 = B+C+X2，距离不为负，得X1=B，X2=A，所以最后两个指针走的距离都是A+B+C，刚好在第一个公共点相遇。复杂度分析时间复杂度 : O(m+n)空间复杂度 : O(1)//双指针var ge..
2020-11-11 17:02:29
229
原创 环形链表第一个入环节点 NC3
思路：1）首先判断是否有环,有环时，返回相遇的节点，无环，返回null2）有环的情况下， 求链表的入环节点 fast再次从头出发，每次走一步， slow从相遇点出发，每次走一步， 再次相遇即为环入口点。证明：快指针与慢指针均从X出发，在Z相遇。此时，慢指针行使距离为a+b，快指针为a+b+n(b+c）。所以2*(a+b)=a+b+n*(b+c),推出a=(n-1)*b+n*c=(n-1)(b+c)+c;得到，将此时两指针分别放在起始位置和相遇位置，...
2020-11-10 20:06:09
428
原创 判断链表是否有环 NC4
思路：快慢指针用一快一慢指针，开始两个指针都指向链表头部。慢指针每次向前走一步，快指针每次向前走两步。如果有环，则两个指针最终一定会相遇。这种方法无须额外的空间。//给定一个链表，判断链表中是否有环。var hasCycle = function(head) { if(!head || !head.next) return false let slow = head let fast = head.next while(slow != fas
2020-11-10 10:44:25
117
原创 判断链表是否为回文链表 NC96
方法一：利用数组（栈）遍历链表，用数组把数据存下来，然后再进行一次遍历，同时用数组反向地与之比较，这样就可以判断是否回文。这个方法时间复杂度是O(n)pop() 移除数组的最后一项，返回移除的项 shift() 移除数组的第一项，返回移除项var isPalindrome = function (head) { let nums = []; while (head) { nums.push(head.val); head = head.ne...
2020-11-09 13:56:38
322
原创 寻找链表倒数第K个节点 (NC69)/ 删除链表倒数第N个节点(NC53)
第一种方法是先循环一遍链表确定结点个数n，则倒数第k个结点就是就是正数的第n+1-k个，然后在遍历一次链表就可以找到指定结点了，但显然需要遍历两遍链表。第二种方法可以使用两个指针，第一个指针先走k-1步，然后第二个指针开始走。当第一个指针移动到最后时，第二个指针正好指向倒数第k个结点，只需要遍历一遍链表，显然更高效。...
2020-11-08 14:25:14
254
原创 划分链表（Partition List）
对于一个链表，我们需要用一个特定阈值完成对它的分化，使得小于等于这个值的结点移到前面，大于该值的结点在后面，同时保证两类结点内部的位置关系不变。思路：采用双指针思想，维护node1指针作为前面的插入指针，node2作为后面的删除指针。此时分为两种情况：若链表首节点值大于或等于给定值，首先找到其后第一个小于给定值的节点删除并插入到 node2 之前作为头节点，并令 node1 指向它，然后将 node2 指向原删除节点的下一个节点 若链表首节点值小于给定值，那么首先找到从左往右第一个大于或等于给
2020-11-07 16:10:04
478
原创 链表去重（删除重复元素）
未排序链表去重 O（n^2）思路：第一重循环从链表的头节点开始，枚举一个保留的节点，这是因为我们保留的是「最开始出现的节点」。第二重循环是枚举「最开始出现的节点」的下一个结点，到链表的末尾结束，将所有与保留节点相同的节点全部移除。//移除未排序链表中的重复节点。保留最开始出现的节点。（两层循环）//输入：[1, 2, 3, 3, 2, 1]//输出：[1, 2, 3]var removeDuplicateNodes = function (head) { var slow =
2020-11-03 18:26:23
3574
转载 反转单链表
现在有一个单向链表如下图所示：反转后如下所示：/** * Definition for singly-linked list. * function ListNode(val) { * this.val = val; * this.next = null; * } *//** * @param {ListNode} head * @return {ListNode} */var reverseList = function(head) { //le
2020-11-03 13:48:16
183
原创 数组去重（至少两种方法）js
方法1：普通版，利用indexOf去重新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中。indexOf() 方法：返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。//方法1：普通版，利用indexOf去重function arrayUnique(arr){ var len = arr.length; var res = []; for(var i = 0; i < len
2020-11-02 22:37:11
1443
原创 数组乱序（打乱数组，至少两种方法）js
数组随机排序（shuffle）方法1：时间复杂度 O(n^2)// 方法2：随机抽取法, 时间复杂度 O(n^2)function randomSortArray(arr) { let backArr = []; while (arr.length) { //Math.random()：返回 [0,1) 之间的一个随机数 let index = parseInt(Math.random() * arr.length); // 利用数组长度生成随机
2020-11-02 13:47:27
14967
1
原创 二分查找（非递归/递归）js
二分查找（折半查找），是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤：（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。（3）如果某一步数组为空，则表示找不到目标元素。非递归算法：// 非递归算法function binary_search1(nums, target) { var
2020-11-01 22:03:28
270
原创 js排序算法：冒泡、选择、插入、快排★★★ 归并★
一、冒泡排序算法描述如下: 1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。2.第一轮的时候最后一个元素应该是最大的一个。3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。算法实现:/*** @Author spring* @DateTime 2020-10-29* @param {arr} 待数组* @return {arr} 排好序的数组* @description 这是一个冒泡排序算..
2020-11-01 12:15:51
327
原创 圣杯布局和双飞翼布局
圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯布局</title> <style> body {
2020-10-01 16:20:23
123
转载 Vue的样式绑定
一、绑定class1. 第一种:样式和数据的绑定，通过对象方式{ }v-bind:class设置一个对象。当isActivated为true的时候，div上会增加一个class属性，属性名称为activated，如果再在css里加上activated类的样式，则会有CSS效果了；如果isActivated为false，则没有class属性。在函数中使当前状态取反做到来回切换。2.第二种方式：通过数组方式，v-bind:class设置一个数组。class里面存放的是一个数组，我们最开始在da.
2020-09-22 19:36:46
862
1
原创 Vue中watch、computed和methods的区别
watch和computed的区别watch和computed都是对数据的监听只有数据发生变化时才会触发，但是他们擅长的领域不一样watch更擅长一对多：就是主要监听一个可以影响多个数据的数据computed擅长多对一：主要监听多个数据影响一个数据的数据，一定要return组合出的那个数据会自动定义不用在data中再次定义，当然也可以使用watch来监听组成computed所监听数据的每一个数据，但是这样代码的重复率过高### watchvar vm = new Vue({ el: '
2020-09-22 15:51:30
165
转载 将Vue页面导出为pdf格式并进行下载
1.使用npm下载两个插件a.将html页面转换成图片npm install --save html2canvas b.将图片生成pdfnpm install jspdf --save2.在utils文件夹中创建一个名字叫个htmlToPdf.js的文件，内容如下：// 导出页面为PDF格式import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default{ install (Vue, o
2020-08-19 17:01:15
2934
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人