2021年03月_abuanden

原创 js类型判读

判断是不是函数1. fun1 instanceOf Function2. fun1.__proto__== Function.prototype3. typeof4. Object.prototype.toString.call() =>// ‘[object Function]’5. constructor判断是不是数组1. arr1 instanceOf Array2. arr1.__proto__==Array.prototype3. Array.isArray（最好用的

2021-03-30 14:41:08 182

转载数组去重

文章目录一、利用ES6 Set去重（ES6中最常用）二、利用for嵌套for，然后splice去重（ES5中最常用）三、利用indexOf去重四、利用includes五、利用hasOwnProperty六、利用Map数据结构去重七、利用filter选自：JavaScript数组去重（12种方法，史上最全）一、利用ES6 Set去重（ES6中最常用）function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'t

2021-03-30 14:30:54 92

原创 JS判断属性和方法是否是自身的

一.hasOwnproperty所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。var test = function () {}test.func = function () { console.log(222);}test.prototype.wuwu = function () { console.log(333);

2021-03-28 15:06:11 622

原创 cookie、session、token

一、常见验证方式cookie：客户端使用 cookie直接认证，需要设置 cookie为 httpOnly，可以防止 xss攻击。但是无法防止 csrf攻击。需要设置伪随机数 X-XSRF-TOKEN。（推荐，不需要处理 xss，并且xsrf 随机数有完善的应用机制）自定义请求头token：客户端使用 auth授权头认证，token存储在 cookie中。这样可以防止 csrf攻击，但是需要防止xss攻击。，因为 csrf只能在请求中携带 cookie，而这里必须从 cookie中拿出相应的值并放到

2021-03-26 22:51:31 395

原创前端常见网络攻防问题

前端常见安全问题的十个方面：iframeopenerCSRF（跨站请求伪造）XSS（跨站脚本攻击）ClickJacking（点击劫持）HSTS（HTTP严格传输安全）CND劫持HTTPS中间人攻击SQL注入Dos服务拒绝攻击一、iframe1. 如何让自己的网站不被其他网站的 iframe 引用？// 检测当前网站是否被第三方iframe引用// 若相等证明没有被第三方引用，若不等证明被第三方引用。当发现被引用时强制跳转百度。if(top.location != self.

2021-03-25 22:37:06 718

原创构造函数方法与原型链方法的区别

ES5的解释在new一个实例之后，他的实例可以调用构造函数和prototype上面的方法。但是不同的是，定义在构造函数里面的方法，会在每一个实例里面创建一个函数，占用空间。每个实例的test方法指向不同内存。而prototype中的方法，只占用一块内存，所有实例指向他，节约空间。 function Cat(x,y) { this.test1 = () => { console.log("我是1"); } } Ca

2021-03-22 15:36:36 351

原创 2、虚拟内存和物理内存

虚拟内存和物理内存物理内存就是内存条的大小，一般来说4G、8G左右。代码，数据运行都要到这里来，cpu才能运行。（32位系统最高物理内存是2 32 = 4GB）虚拟内存是在磁盘空间（一般几TB）里面划分出和物理内存大小一样的空间出来（比如4GB），用来放置代码。物理内存和虚拟内存里面都以4KB（8KB也有）为基本单位划分区域。称作（页框）和（页）。然后通过页表建立映射关系。cpu工作时，先通过发送虚拟地址，MMU通过页表解析虚拟地址。如果在物理内存里面，则直接运行。如果不在的话，则参数缺页异常，

2021-03-16 10:05:07 1311

原创 1、进程和线程详解

文章目录一、什么是进程和线程二、深入理解2.1 进程(线程+内存+文件/网络句柄)2.2 线程(栈+PC+TLS)2.3 TLS:3. 进程之间的是怎么进行交互的呢？4. 线程之间又是怎样进行交互？5.小结：选自：一篇让你明白进程与线程之间的区别与联系结论提前讲：进程和线程的关系：（1）一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程。（2）资源分配给进程，同一进程的所有线程共享该进程的所有资源。（3）线程在执行过程中，需要协作同步。不同进程的线程间要利用消息通信（TCP

2021-03-14 12:59:48 288

原创 7、Vue双向绑定原理和实现

原理视图（view）变化更新数据（data）。这个很简单，通过事件监听就可以实现数据（data）变化更新视图（view）。通过数据劫持（即Object.defineProperty( )方法）结合发布者-订阅者模式下面重点介绍数据变化更新视图。总流程：全文浓缩为一句话：Vue是采用1.数据劫持结合发布/订阅模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter2. 在数据变动时发布消息给订阅者3. 触发相应的监听回调请看完再回

2021-03-14 11:31:13 212 1

原创 5、作用域链和原型链的区别

针对的对象不同作用域链：针对变量原型链：针对构造函数（对于对象的属性，方法）形式不同作用域链：作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域往上找。如：var a = 1;function b(){ var a = 2; function c(){ var a = 3; console.log(a); } c();}b();最后打印出来的是3，因为执行函数c（）的时候它在自己的范围内找到了

2021-03-14 10:35:41 554

转载 3、Vue组件通信的六种方式

选自：vue组件间通信六种方式（完整版）方法一、props/$emit（必掌握）父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现1.父组件向子组件传值（props）这是最最常用的父子组件通信方式，父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的方法：父组件 => 定义传参名字和数据 v-bind:name = ‘parameter’子组件 => props

2021-03-11 11:26:21 212

原创 2、Vue：虚拟Dom，Diff算法通俗易懂的解释

选自：vue之虚拟DOM、diff算法一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有

2021-03-10 16:26:35 249

原创 1、Vue的生命周期和钩子函数

选自：理解vue实例的生命周期和钩子函数vue生命周期钩子函数的正确使用方式一、vue实例的生命周期生命周期：二、结合生命周期理解钩子函数时间线：create => mounted => updated => destoryvue2.0提供了一系列钩子函数，这些函数和生命周期的各个阶段一一对应：也可以这么看：结合代码：<!DOCTYPE html><html><head> <title>钩子函数

2021-03-10 15:06:14 282

原创 5、Ajax原理以及Fetch

选自：Ajax原理一篇就够了fetch 如何请求常见数据格式文章目录一、什么是Ajax二、Ajax原理是什么三、Ajax的使用1.创建Ajax核心对象XMLHttpRequest(记得考虑兼容性)2.向服务器发送请求3.服务器响应处理（区分同步跟异步两种情况）**①同步处理****②异步处理**什么是readyState？什么是status？③GET和POST请求数据区别一、Fetch API:序言二、与Ajax对比三 Promise复习四请求常见数据格式1.fetch请求本地文本数据2.fetc

2021-03-09 11:20:13 181

原创 3、同源策略、跨域解决方案

选自：同源策略和跨域的解决方案前端常见跨域解决方案（全）什么是跨域 & 跨域的3种解决方案文章目录同源策略1. 什么是同源?2. 为什么制定同源策略?3. 同源策略有什么影响，哪些需要跨域操作?４. 跨域有风险吗?跨域的解决方案1. 降域 document.domain2. JSONPJSONP的简单实现过程：jsonp跨域存在的问题：3、CORS跨域资源共享(重点掌握）客户端需要做什么?两种请求简单请求非简单请求CORS怎么设置同源策略1. 什么是同源?所谓同源是指：协议、域名、端口

2021-03-09 09:40:24 172

原创 2、浏览器缓存策略

选自：面经汇总（三）——浏览器和HTTP协议文章目录缓存策略Doctype强缓存和协商缓存1.强缓存（Cache-control）2. 协商缓存（Last-Modifined）缓存：cookie、session、webStorage1. cookie，sessionStorage和localStorage2. cookie和session总结：多个标签页之间进行通信1.通过localStorage2.通过cookie+setInterval缓存策略Doctype< Doctype > 标

2021-03-08 19:55:21 175

原创 1、简述浏览器渲染机制

选自：简述浏览器渲染机制文章目录一：为什么要了解浏览器渲染页面的机制二：基本概念三：需要注意的是：四：浏览器渲染的整个流程浏览器的加载、解析时间线一：为什么要了解浏览器渲染页面的机制目的：主要还是性能的优化。了解浏览器如何进行加载，我们可以在引用外部样式文件，外部JS时，将它们放到合适的位置，是浏览器以最快的速度，将文件加载完毕。了解浏览器如何进行解析，我们可以在构建DOM结构，组织CSS选择器的时候，选择最优的写法，提高浏览器的解析速率。了解浏览器如何进行渲染，明白渲染的

2021-03-08 18:34:17 479

转载 8、this指向全解答

选自：文章目录this 是什么this 的四种绑定规则1. 默认绑定2. 隐式绑定**`多层调用链`**隐式丢失（函数别名）隐式丢失（回调函数）3. 显示绑定call和apply硬绑定4. new 绑定绑定规则的优先级绑定例外扩展：箭头函数case 1 (正常调用)this 是什么理解this之前，先纠正一个观点，this 既不指向函数自身，也不指函数的词法作用域。如果仅通过this的英文解释，太容易产生误导了。它实际是在函数被调用时才发生的绑定，也就是说this具体指向什么，取决于你是怎么调用的函

2021-03-08 00:50:56 149

原创 7、实现sleep函数

文章目录方法一：伪死循环阻塞主线程方法二：定时器方法三：es6异步处理(Promise)方法四：es7---- async/awaitsleep函数作用是让线程休眠，等到指定时间在重新唤起。方法一：伪死循环阻塞主线程这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。function sleep(delay) { var start = (new Date()).getTime(); while ((new Date()).g

2021-03-07 20:20:25 416

原创 6、根据promiseA+实现一个自己的promise

选自：Promise不会？？看这里！！！史上最通俗易懂的Promise！！！文章目录步骤一：实现成功和失败的回调方法步骤二：then方法链式调用最终代码和测试ES6.Class实现ES5实现步骤一：实现成功和失败的回调方法要实现上面代码中的功能，也是promise最基本的功能。首先，需要创建一个构造函数promise，创建一个promisel类，在使用的时候传入了一个执行器executor，executor会传入两个参数：成功(resolve)和失败(reject)。之前说过，只要成功，就不会失败，只

2021-03-07 19:59:02 133

原创 5、let、const、var的区别

文章目录一，window挂载二，变量提升;三，作用域四，重复声明一，window挂载var声明的变量会挂载在window上。而let和const声明的变量不会： let a = 2 var b = 3 console.log(window.a);//undefined console.log(window.b);//3var定义的变量，作用域是整个封闭函数，是全域的；let定义的变量，作用域是在块级或者字块中；二，变量提升;let和const不存在变量提

2021-03-07 13:01:12 82

原创 4、async和await详解

选自：理解 JavaScript 的 async/await文章目录1. async 和 await 在干什么1.1. async 起什么作用1.2. await 到底在等啥1.3. await 等到了要等的，然后呢2、async/await 帮我们干了啥2.1. 作个简单的比较2.2. async/await 的优势在于处理 then 链2.3. 依次执行多个请求2.4. 并发执行多个请求2.5. 如果结果是reject怎么办1. async 和 await 在干什么任意一个名称都是有意义的，先从字

2021-03-07 12:48:51 2138

原创 3、class类

选自：Javascript定义类（class）的三种方法es6中class类的全方面理解（一）文章目录Javascript定义"类"的四种方法一、构造函数法二、Object.create()法三、极简主义法（推荐）3.1 封装3.2 继承3.3 私有属性和私有方法3.4 数据共享四、Class方法constructor和class的特点1、constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法。2、constructor方法如果没有显式定义，会隐式生成一个co

2021-03-06 20:23:16 109

转载 1、什么是箭头函数

目录基础语法箭头函数与function的区别1、this的指向：2、构造函数3、变量提升什么时候不该使用箭头函数1、在对象上定义函数2、在原型上定义函数3、动态上下文中的回调函数4、构造函数中基础语法通常函数的定义方法var fn1 = function(a, b) { return a + b} function fn2(a, b) { return a + b}使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参

2021-03-06 17:34:15 13515 2

原创 2、Promise的用法

目录一、什么是Promise为什么要用Promise二、promise的优缺点三、怎么用Promiseresolve的用法reject的用法对resolve和reject的总结（特别重要）：其他用法catch的用法all的用法：谁跑的慢，以谁为准执行回调。race的用法：谁跑的快，以谁为准执行回调anytry一、什么是PromisePromise是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。prom

2021-03-06 16:46:52 184

原创 3、浏览器的Event loop(事件循环机制)

选自：带你彻底弄懂Event Loop什么是 Event Loop？Event Loop是什么“Event Loop是一个程序结构，用于等待和发送消息和事件。（a programming construct that waits for and dispatches events or messages in a program.）”简单说，就是在程序中设置两个线程：一个负责程序本身的运行，称为"主线程"；另一个负责主线程与其他进程（主要是各种I/O操作）的通信，被称为"Event Loop线

2021-03-05 11:38:48 203 1

转载 3、手撕快排算法和归并排序

快排算法思想：在数据集之中，选择一个元素作为"基准"（pivot）。所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。实现var quickSort = function(arr) {　　if (arr.length <= 1) { return arr; }　　var pivotIndex = Math.floor(arr.length / 2);　　

2021-03-05 01:11:18 122 1

原创 2、爬楼梯编代码

题目描述：假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？方法分析：这道题主要是要明白该爬楼梯的规律其实就是符合斐波那契数列（Fibonacci Sequence）规律的，问题就迎刃而解了。为什么说它是斐波那契数列呢？我们可以这样来思考：当我们从第 n-1 阶楼梯爬到第 n 阶楼梯时，需要1步；当我们从第 n-2 阶楼梯爬到第 n 阶楼梯时，需要2步.也就是说到达第 n 阶楼梯的方法数等于到达第 n-1 阶楼梯的方法数加上到达第

2021-03-05 01:05:04 913 1

原创 2、事件绑定、委托、阻止默认事件和阻止冒泡

目录事件绑定的三种方法一、直接在html标签里添加事件。二、把一个函数赋值给一个事件处理程序属性。三、事件监听：只可以在该元素的事件监听中看到委托什么是事件冒泡事件委托的优点【1】可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒【2】可以实现当新增子对象时无需再次对其绑定（动态绑定事件）基本实现【1】JavaScript原生实现事件委托阻止默认事件1、什么是默认事件2、“阻止事件冒泡”和“阻止默认事件”非IE浏览器IE浏览器事件绑定的三种方法一、直接在html标签里添

2021-03-04 22:06:50 462 1

原创闭包、内存泄漏、垃圾回收机制详解

目录内存泄漏和垃圾回收机制一、什么是内存泄漏？二、垃圾回收机制三、内存泄漏的识别方法3.1 浏览器四、WeakMap五、WeakMap 示例六、常见的内存泄漏1、闭包2、意外的全局变量3、被遗忘的计时器或回调函数4、脱离 DOM 的引用闭包详见：闭包的应用和常用的场景内存泄漏和垃圾回收机制选自：JavaScript 内存泄漏教程js常见的内存泄漏JavaScript内存泄露的4种方式及如何避免一、什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须

2021-03-04 19:51:15 450 5

原创剑指Offer：栈相关

栈1、用两个栈实现一个队列2、包含min函数的栈3、栈的压入和弹出序列leetcode解析4、二叉搜索树的后序遍历序列1、用两个栈实现一个队列用两个栈来实现一个队列，完成队列的Push和Pop操作。队列中的元素为int类型。let [stack1,stack2] = [[],[]]//Js中pop操作为删除最后一个元素，并将他返回出来function push(node){ stack1.push(node) return stack1.length}function pop

2021-03-04 18:28:42 50

原创 8、闭包的应用和常用的场景

文章目录什么是闭包举例注意点试题什么是闭包摘抄自：阮一峰的网络日志我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个：一个是前面提到的可以读取函数内部的变量另一个就是让这些变量的值始终保持在内存中。举例function f1(){　　　　var n=99

2021-03-04 00:25:05 294

原创 1、二叉树先序，中序，后序遍历的递归和非递归方法（JS实现）。

查找某个节点的路径的方法通常有两种，一种是递归算法,另一种是非递归算法定义树节点class TreeNode{ constructor(value){ this.value = value; this.left = null; this.right = null; }}构建树// 构建树let root = new TreeNode(1);root.left = new TreeNode(2);root.right = n.

2021-03-03 23:24:25 261 1

原创移动端布局详解

目录结论提前说：流式布局（Liquid Layout百分比布局）自适应布局（Adaptive Layout）（使用媒介查询）响应式布局（Responsive Layout）（流式+自适应）弹性布局（rem/em布局）常用于手机端总结自：1、Html5移动端布局及(rem布局)页面自适应布局详解（转）2、移动端布局总结常见的页面布局方式有，静态布局 px布局流式布局（Liquid Layout）主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用)自适应布局（Adaptiv

2021-03-03 22:27:32 289 1

原创清除浮动的方法

目录BFC父元素设置伪元素after（常用）父级div定义 overflow:auto父级div 也一起浮动这里放一个公用的html代码 <div class="div"> <div class="box1"></div> </div>BFC给父元素盒子 overflow:hidden属性的方式撑高，来清除浮动 .div { overflow:hidden }优点：代码简洁缺点：内容增多的时候

2021-03-03 16:09:46 51 1

原创 HTML5面试常见知识点

目录SVG和Canvas的区别客户端存储方案Web StoragelocalStorage和sessionStorage的区别Web SocketSVG和Canvas的区别SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏

2021-03-03 15:12:25 77 2

原创两栏布局、三栏布局常用方法详解

这里写目录标题两栏布局一栏固定宽度，一栏自适应一、左float，右margin-left二、左侧float:left; 右侧overflow:hidden；（推荐）三、利用绝对定位四、利用弹性布局（推荐）一栏不定宽，一栏自适应一、左侧float:left; 右侧overflow:hidden；（BFC）二、利用弹性布局（推荐）三栏布局一. 浮动布局二、绝对定位布局三、flex布局(推荐）四、网格布局（推荐）五、圣杯布局（float+负margin）六、双飞翼布局(推荐）两栏布局一栏固定宽度，一栏自适应

2021-03-03 10:01:27 716

abuanden的博客