- 博客(44)
- 收藏
- 关注
RSS订阅原创 mac上安装node和n
这三个链接说的很清楚： 1.Mac 安装 homebrew 流程 以及 停在 Updating Homebrew等 错误解决方法 https://zhuanlan.zhihu.com/p/84923833 2.在mac上安装node.js https://www.jianshu.com/p/3b30c4c846d1 个人比较喜欢使用安装包的形式安装 3.n的安装，用来控制node版本 https://www.jianshu.com/p/c641dcc47b48 ...
2021-06-16 20:55:40
585
原创 常用git命令
切换分支，在自己分支上开发： git checkout origin/master -b feat-checkbox //切换分支 创建并且切换到分支里: git checkout -b 分支名
2021-06-16 20:47:25
191
转载 JS的垃圾回收机制
JS拥有垃圾回收机制：对于C、C++来说，程序员需要自己跟踪内存。JS就省事多了，执行环境会自动管理内存，也就是会自动的负责分配内存和回收闲置资源。所以需要知道某个内存是否还在用并且在不用的时候如何清理，有两种标记策略：标记清理和引用计数。 标记清理（常用） 步骤： 垃圾回收器找到根并标记 再标记根直接引用的对象 再标记引用对象的引用 将不可访问的（不可达）的对象删除 具体算法：几种垃圾回收算法 这篇文章来源：前端面试：谈谈 JS 垃圾回收机制 引用计数 思路是：对每个值都记录它
2021-03-26 13:44:10
189
原创 类的静态属性和静态方法（待补充...)
静态属性有什么用？ 对比来说：一般属性，他的值是隶属于该类的具体某个对象（虽然定义在类中），或者说，每个对象的同样的属性的值，有可能不一样。 静态属性就是：只隶属于类本身——也可以看做是所有对象的“共有数据”。 ...
2021-03-26 11:39:17
151
原创 如何判断一个数组
方法一： 用 InstanceOf var arr=[1,2,3]; console.log(arr instanceOf Array) 方法二： 用 constructor 属性 var arr=[1,2,3]; console.log(arr.constructor==Array) 方法三： 用Object.prototype.toString.call() arr=[1,2,3] console.log(Object.prototype.toString.call(arr)); 方法四：isAr
2021-03-17 10:50:23
265
原创 数组去重
方法一：常规方法 思想是新创建一个数组，这个数组有的元素不添加，没有的则添加 function quchong(arr1){ var arr2=[]; for(let i=0;i<arr1.length;i++){ if(arr2.indexOf(arr1[i])===-1){ arr2.push(arr[i]); } } return arr2; } var arr=[2,1,1,1,3,3,4,5,6,6]; console
2021-03-16 13:52:25
150
原创 快速排序
中心思想：找一个基准（一般是最中间的数），将大于基准的数排在基准右边，小于基准的数排在基准左边。 function quickSort(arr,left,right){ var index; if(arr.length>1){ index=partition(arr,left,right); if(left<index-1){ quickSort
2021-03-14 18:40:06
109
原创 字节2018前端笔试
题目如： 读题读了挺长时间的… 意思是在第二行的数组中找从第四行第一个数和第二个数之间存不存在第三个数 我刚开始的思路就是进行遍历嘛，直接暴力解法，上代码： 得了15分，满分25分，原因是对于一部分case超时啦 于是看了下评论部分的讲解，掌握了一种新方法，虽然以前也用过，类似于map（存键值对的数据结构）但是很多面试不支持用ES6。所以只能用数组模拟map 讲解：将喜好值作为数组的下标，把具有相同喜好值位置的下标加到数组中 自己实现了一遍： var userNums = parseI
2021-03-14 16:51:54
306
原创 总结数组易混淆却常用的方法
splice() 1.A.splice(n,num)用于截取数组，从第n个起截取num个元素返回到新数组，且原数组变化。 可以理解为删除数组中任意位置的元素 //从第二个起删两个 var a=[1,2,3,4,5]; console.log(a.splice(2,2));//[3,4] console.log(a)//[1,2,5] var b=[1,2,3,4,5,6]; a.splice(2,2,1,1) console.log(a)//[1,
2021-03-14 13:05:12
166
转载 迭代器函数
every(判断函数) 作用：数组中每一项都会去执行every里的函数，但是只有每一项返回true最终才会返回true var a = [1, 2, 3, 4, 5, 6]; var b=a.every((n) => { console.log(n);//1（迭代结束） return (n%2==0); }) console.log(b)//false some(判断函数) 作用：数组中每一项都会去执行some里的函数，但是只有一项返回
2021-03-13 21:18:00
436
原创 归并排序
归并排序使用了分治思想。将数组分成一个一个的小数组，一个数组只有一个元素。再合并。 function mergeSort(arr){ var length=arr.length; if(length==1){ return arr; } var mid=Math.floor(length/2); var leftarr=arr.slice(0,mid); var rightarr=arr.slice(mid,length); return merge(mergeSor
2021-03-11 21:53:38
102
原创 堆排序
构建大顶堆或者小顶堆----将堆头和堆尾交换----继续构建剩下元素的大顶堆或者小顶堆----再交换----再构建… function heapsort(arr){ var heapSize=arr.length; buildHeap(arr);//构建大顶堆 while(heapSize>0){ heapSize--; [arr[0],arr[heapSize]]=[arr[heapSize],arr[0]];//交换 heap
2021-03-11 21:19:17
97
原创 插入排序
核心思想： 先假设第一个已经排好了，从第二个起，开始和前面的比较，如果比前面的大，就将前面的往后移动，直到前面某个比这个数小。 这张图片贼棒此图说明一切 function insertsort(arr){ for(let i=1;i<arr.length;i++){ var temp=arr[i]; var j=i; while(j>0&&temp<arr[j-1]){ arr[j]=arr[j
2021-03-11 19:11:34
99
原创 选择查找
核心思想：找到一组数中的最小值，将其与第一个交换。再找从第二个开始的数组中的最小值，再与第二个交换… 比如[5,4,3,2,1]，最小值为1，第一次交换完为[1,4,3,2,5]，最小值为2，2和4交换为[1,2,3,4,5] 代码为： function selectionSort(arr){ for(let i=0;i<arr.length;i++){ var index; var min=arr[i]; for(let j=i;j
2021-03-11 17:04:30
274
原创 二分查找
上代码： //折半查找,也叫二分查找 function binerySearch(arr,num){ var left=0; var right=arr.length-1; while(left<=right){ var mid=Math.floor(left+(right-left)/2); if(arr[mid]<num){ left=mid+1; }else if(arr[mid]>num
2021-03-11 16:44:05
105
转载 sass/scss和less的区别
Sass/Scss、Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。 Sass与Scss是什么关系? Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}
2021-03-11 10:17:42
183
原创 输入一个URL会发生什么？
全当自己理解写的： 1.当用户输入了一个URL地址，首先浏览器要发送http请求报文，且发送这个报文是需要开一个网络线程的。 2.这时候会进行DNS查询，获得IP地址（浏览器—本地—DNS域名服务器），这个过程很慢，可以进行dns-prefetch优化。 3.在传输层会建立tcp连接，三次握手。 4.再往下，网络层会IP寻址。数据链路层封装成帧，物理层再进行传输。 5.服务器收到请求报文，会根据负载均衡分配到合适的服务器进行处理 6.如果是短连接就会返回响应。如果是长连接的话会继续往返发送，涉及到了一系列h
2021-03-10 12:48:20
452
原创 重排和重绘
重绘 重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重排 也叫重构/回流/reflow，当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。 重排和重绘的关系 当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。完成重排后，要将重新构建的渲染
2021-03-09 21:27:03
176
原创 面试题：画一条0.5px的线
思路：将盒子的高度定为1px，再利用css3中的2D变换变为0.5px div{ width: 1000px; height: 1px; background-color: rgb(10, 10, 10); transform: scale(1,0.5); //或者 // transform:scaleY(0.5); }
2021-03-09 18:59:25
605
原创 数组乱序
数组乱序是将一个数组如：[1,4,2,5,6,3]打乱顺序，如[4,1,5,3,6,2] 方法一：利用sort() var values = [1, 2, 3, 4, 5]; values.sort(function(a,b){ return Math.random() - 0.5; }); console.log(value); 方法二 从原数组（假如长度为n）中，随机生成一个索引 random 从原数组中删除第 random 个元素并将其push到新数组 重复第2步直到所有元素取完 最终得到一
2021-03-09 17:03:01
1371
原创 cookie session token
为什么会发明cookie session token？ 因为http协议是无状态的，每次客户端访问服务器端，服务器都不知道是谁来访问了它。这在过去也不需要知道是谁，用户向服务器请求想看的页面，服务器响应返回。但是现在交互式网页的产生，使得服务器需要知道是哪个用户访问了，比如购物网站。这时就必须搞清楚谁是谁的问题了。 Cookie （1）什么是cookie? Cookie是服务器用来辨认客户端身份的文本信息。由于HTTP是无状态的，也就是服务端并不知道发来请求的客户端是谁。但在某些时候需要知道客户端身份，这时
2021-03-09 14:58:35
108
转载 浏览器的工作原理
参考https://segmentfault.com/a/1190000017019877这篇好文进行整理 浏览器的组成 用户界面：除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。 用户界面后台：用于绘制基本的窗口小部件。 浏览器引擎：在用户界面和渲染引擎之间传递指令。 渲染引擎：负责显示请求的内容。 网络：用于网络调用。 JavaScript解释器：用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8。 数据存储：浏览器需要在硬盘上保存各种
2021-03-09 10:43:12
101
原创 防抖和节流
为什么要防抖和节流？ 防止高频次的事件触发造成回调函数来不及执行(也就是回调函数的执行跟不上频繁的事件触发）。 例如当实现一个函数：当鼠标经过div时就会输出对应的坐标。这仅仅是输出坐标可能还能跟得上，但是我们可以把此回调函数想成复杂函数，来想下防抖和节流… 防抖 可能更想要的功能是当鼠标停留在某个地方时才会输出坐标。那么怎么知道鼠标停下了呢？可以认为当过一段时间（比如10ms)仍然没有触发事件（鼠标没有移动）就可以认为在停留了。一段时间需要依赖setTimeout这个函数：setTimeout(fn,10
2021-03-08 20:02:06
73
原创 new运算符
new运算符的执行原理 new操作符实现原理： function news(func) { var target = {};//生成新对象 target.__proto__ = func.prototype;//实例的__proto__指向原型，构造函数的prototype也指向原型（链接到原型） var res = func.call(target);//把函数的this绑定在了新生成的对象中 if (ty
2021-03-08 17:18:44
317
原创 对象的深拷贝与浅拷贝
1. 浅拷贝 （1）什么是浅拷贝 浅拷贝是将对象复制了一份，如果原对象中的引用类型改变，则浅拷贝出来的引用类型也改变。因为浅拷贝只是拷贝了引用类型的指针（保存在栈内存），而没有拷贝其实质值。 （2）实现 简单实现 var obj={ name:'lxt', family:{ father:'lzj', mother:'wyl' }, colorlike:['red','black'] } function shallowCopy(temp)
2021-03-08 16:41:37
314
转载 instanceof 原理以及与typeof的区别
一. typeof 1.typeof的作用：用来判断数据类型。可以用来判断string,number,boolean,function,object,symbol,undefined这些数据类型。但是并不能判断到底是什么类型的Object。例如： var a=[1,2,3]; console.log(typeof a);//object 2.typeof的原理： js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息： 对象：000 浮点数：010 字符串：100 布尔：110
2021-03-08 13:26:40
454
原创 数组扁平化
数组扁平化就是将一个多维数组转化为一维度数组，如：[1,2,[[3,4],5,[6,7]]]——>[1,2,3,4,5,6,7] 把这个问题可以看作一个算法题…第一时间想到遍历数组，如果遍历到的这一元素是数组就递归遍历这个元素，如果不是则将该元素添加到结果数组。 方法一 ：递归 var arr=[1,2,[[3,4],5,[6,7]]]; var res=[]; function test(arr){ for(let i=0;i<arr.length;i++){ if(Array
2021-03-08 11:41:47
197
原创 箭头函数
ES6新增了箭头函数，任何可以使用函数表达式的地方都可以使用箭头函数 格式 var test1 = function (a, b) { return a + b; } //等价于 var test2 = (a, b) => { return a + b }; //调用 test1(1, 2); test2(2, 3); 省略小括号 如果只有一个参数时，可以省略括号。 var test3 = a => { return a }; 省略大括号 如果省略大括号，那么箭头后面只能包含一行代码
2021-03-08 10:09:16
131
原创 JavaScript的执行上下文和作用域链
我觉得作用域和执行上下文是两个不可分开的概念。在ES6之前，JavaScript不同于C/C++这些语言，其作用域只有全局作用域和函数作用域。 执行上下文 变量或函数的上下文决定了他们可以访问哪些数据。下面根据一段代码来解释： var a=10； function test1(){ let b=20; function test2(){ let c=b; b=a; a=c; } test2() } test1();
2021-03-07 21:55:20
92
原创 Javacript中的变量提升
我认为在搞清楚变量提升这个问题之前先弄清楚JS引擎执行和域这两个东西 JS引擎执行 分为两个阶段：预处理阶段（编译），执行阶段 （1）预处理阶段 一共完成四件事情：（以 var a=10;进行解释） 词法分析：将var a=10;分解为var/a/=/10/;五个代码块 语法分析：将词法单元流（数组）转化成抽象语法树AST（Abstract Syntax Tree） 生成可执行代码：相当于是再把AST转换成浏览器可执行的代码，或者是各种语言引擎可执行的代码。 在编译阶段，会创建变量对象（VO)，变量对象
2021-03-07 21:02:31
277
原创 原型和原型链
之前看《JavaScript高级设计程序》对原型和原型链有了一定的了解，也觉得自己掌握了，但是今天回顾起来，发现很多都忘记了…今天就来总结下吧 原型 任何函数都有显式原型prototype 任何引用（对象/数组/函数）都有隐式原型proto 实例对象的隐式原型和其构造函数的显示原型相同 function Person(name) { this.name = name; } Object.prototype.zhiye = 'student'; var l
2021-03-07 19:07:56
94
原创 for...in和for...of的区别
今天终于弄懂了！ 1. for…in （1）for…in只能遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性 （2）for…in循环，只能获得对象的键名，不能直接获取键值 （3）遍历顺序有可能不是按照实际数组的内部顺序 （4）for in更适合遍历对象 Object.prototype.shuxing='person'; var obj={ name:'lxt', sex:'nv', age:18 } for(
2021-03-07 16:38:20
265
原创 用css画三角形
一步一步来 1.画一个宽高为80px，边框宽度为30px的正方形 div{ width: 80px; height: 80px; border: 30px solid; border-color: rgb(214, 102, 120) rgb(55, 15, 167) rgb(19, 18, 18) rgb(141, 212, 27) ; } 没想到是这样的… 2.继续…将宽高设为0px div{ width: 0px;
2021-03-07 15:19:33
193
原创 跨域理解
在了解跨域这个概念之前，先了解下浏览器的同源策略吧！ 什么是同源策略？ 1.同源策略是浏览器设置的一种安全策略，限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互 2.什么是同源呢？ 答：同源是两个URL具有相同的协议/端口号/域名 3.如果没有同源策略会怎么样呢？ 最主要就是安全问题 没有同源策略就意味着一个网页可以随意访问另一个网页。会造成CSRF攻击和钓鱼网站可以直接拿到别的网站的Dom。 用户访问www.mybank.com ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览
2021-03-06 16:31:52
178
原创 剑指 Offer 12. 矩阵中的路径
剑指 Offer 12. 矩阵中的路径 考察回溯法 回溯其实就是纯暴力枚举，把所有情况列举下，如果列举到一半发现已经不符合要求了及时剪枝，并且把之前做出的选择撤销，比如本题如果列举的一条路径不符合要求，把之前访问过的位置全部改回原来的值。也就是先试着走着，不对就撤回去，再重走（枚举的搜索尝试过程）。 第一步：先在二维数组中找到字符串的第一个字符 第二步：找到后将该位置置为’-’，防止重复访问 第三步：向该位置的周围遍历，看哪个符合下个字符的内容 第四步：若符合继续找下去，否则还原置为’-'的元素，返回去重
2021-03-05 12:50:54
81
原创 剑指 Offer 11. 旋转数组的最小数字
题目： 最开始解法： 对于[3,4,5,1,2]，我的想法是找到一个边界，当一个元素比它前一个元素小的时候。那么这个数就是最小值。但是如果这个数组是[1,2,3,4,5]呢？即没有进行旋转，此时上面的做法就不成立了，需要比较第一个和最后一个元素，如果小于等于最后一个元素的话，就说明最小的是第一个元素。 这样的复杂度是O(n)。 其实后面想了下，最后不用经过判断再返回第一个元素了，可以直接返回numbers[0] 看了官网之后的解答： 因为旋转数组是由两个有序数组组合而成，因此适合用二分法来查找 1.一个
2021-03-05 11:08:37
220
1
原创 Ajax（三）：XMLHttpRequest对象
Ajax（三）：XMLHttpRequest对象 参考：https://blog.youkuaiyun.com/weixin_37580235/article/details/81459282 一.实例化一个XMLHttpRequest对象（XMLHttpRequest 其实是一个构造函数） var xmlReq=new XMLHttpRequest(); 如果是IE5或者IE6浏览器: var xmlReq=new ActiveXObject("Microsoft.XMLHTTP"); 所以总的代码为： var
2021-03-04 22:16:56
249
1
原创 Ajax（二）：技术实现
Ajax（二）：技术实现 一.若没有Ajax时，一般的表单提交代码为： 客户端代码 <form id="form1" action="Test.ashx" method="get"> 您的姓名1：<input type="text" name="fname" size="20" /> <input type="submit" name="submit" value="Sumbit"> </form> 服务端代码 public void Proce
2021-03-04 21:01:18
302
1
原创 Ajax（一）：工作原理
什么是Ajax? 1.Ajax是 Asynchronoous JavaScript and XML（异步JavaScript 和 XML）的缩写。 2.Ajax是一种创建交互式、快速动态网页应用的网页开发技术。 3.一种无需重新加载整个网页的情况下，就能够更新部分网页的技术。 为什么使用Ajax? 1.由于JavaScript是单线程，这就使得JS引擎只能完成一个任务才能接着完成下面的任务，如果当前任务的执行时间较长，就会发生阻塞（后面的任务无法继续执行，只能卡在此处）。试想一下，如果用户正要加载一个信息（
2021-03-04 20:16:30
364
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人