- 博客(40)
- 收藏
- 关注
RSS订阅原创 查找两个节点的公共父节点
function commonParentNode(oNode1,oNode2) { if(oNode1.contains(oNode2)) { return oNode1; } oNode1 = oNode1.parentNode;}//递归写法function commonParentNode(oNode1,oNode2) { if(oNode1.contains(oNode2)) { return oNode1; } return commonParentNode(oNod
2021-05-14 10:12:34
336
原创 斐波那契数列
//方法一：递归实现function fb(n) { if(n === 0) { return 0; } if(n===1 || n===2) { return 1; } return fb(n-1) + fb(n-2);}//方法二：迭代实现function fb(n) { if(n === 0) { return 0; } if(n === 1 || n === 2) { return 1; } let num1 = 1; let num2 = 1; l
2021-05-13 19:33:47
159
原创 字符串判断是否回文
function isHuiWen(str) { return str === str.split('').reverse().join('');}
2021-05-10 16:46:05
137
原创 理解async与await
1. async和await是什么async可以理解为generate的语法糖，async是异步的意思，用来声明一个函数是异步的。await是等待的意思，顾名思义，它是用来等待某个动作的完成。注：(1) await不是用来调用async函数的，async函数的调用与普通函数调用没有区别。(2)await只能写在async函数中，不能写在别处。2.async起什么作用(1)我们来看一段代码async function fun1() { return "hello";}let res
2021-05-07 20:37:37
6777
原创 vue项目打包后index.html显示空白
打开vue.config.js文件，找到publicPath: ‘/’,将其改为publicPath: ‘./’删除原来的dist文件，重新npm run xxx打包
2021-04-30 09:30:21
95
原创 浅析闭包
1. 什么是闭包闭包是指能够访问其他函数内部变量的函数。2. 闭包经典写法function fn() { var a = 10; return function(b) { console.log(a+b); }}var getVal = fn();getVal(5);//15//定时器与闭包for(var i=0; i<5; i++) { setTimeout(function(){ console.log(i);
2021-04-13 17:08:45
55
原创 cookie，session，sessionStorage和localstorage
1. 三者的操作1.1 Cookie的操作//设置cookiedocument.cookie = "key=value;expire=" + date;//删除cookie暂时没有方法直接删除，但是可以将cookie的Max-age设置为0//一般我们可以通过js-cookie这个库来操作cookieCookies.set(key, val, {expire:""等属性}) //创建cookieCookies.get(key) //获取cookie的key对应的属性值Cooki
2021-04-09 21:56:49
114
原创 常见的HTTP状态码
1xx：信息状态码100：继续。一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息2xx：成功状态码200：成功返回信息201：成功请求且服务器创建了新资源202：服务器以接收请求但尚未处理3xx：重定向301：请求的网页以永久重定向302：临时重定向303：临时重定向，且总是使用get请求新的url304：自从上次请求后，请求的网页未修改过4xx：客户端错误400：服务器无法理解请求的格式4.
2021-04-08 11:26:46
58
原创 JavaScript中call,apply和bind方法
1. 三者的区别call和apply都是为了解决函数调用的时候函数内部this指向的问题，默认第一参数是this指向，其余的都是函数的形参。call的形参用逗号隔开，apply的参数用一个数组接收。call和apply是改变this指向后立即执行函数，而bind是返回一个绑定上下文的新函数，后续可以通过新函数执行。bind函数返回的新函数不可以再通过apply call改变它的this指向。...
2021-04-07 17:13:02
72
原创 深入理解JavaScript-this
1. this的说明在绝大多数情况下，this值的确定与函数的调用方式有关。2. 全局执行上下文中的this在全局执行环境中（在任何函数体外部）this 都指向全局对象。在JS引擎运行global code之前，会创建一个全局执行上下文压入执行栈的栈底，这个全局执行上文的ThisBinding绑定的是全局对象，在浏览器里指的就是window。3. 函数执行上下文中的thisJavaScript是静态作用域，词法环境是由代码结构决定的，开发把代码写成什么样，词法环境就是怎么样，跟方法在哪里调用没有关
2021-04-06 19:07:09
125
原创 深入理解JavaScript函数
1. JavaScript定义函数的方式1.函数声明2.函数表达式3.立即执行函数4.new Funcion(arg1,arg2…,argn,body)创建函数。2. 函数声明首先看一个例子：var a = 2;function foo() { console.log(a); // 2}function bar() { var a = 3; foo();}bar();我们用词法作用域来表示：GlobalExecutionContext { ThisB
2021-04-06 11:23:32
96
原创 深入理解JavaScript执行上下文和词法环境
一、执行上下文与词法环境1. 什么是执行上下文执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。2. 执行上下文的类型全局执行上下文 任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。函数执行上下文每当一个函数被调用的时候，都会为该函数创建一个函数执行上下文。函数上下文可以由任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在
2021-04-03 21:24:53
336
原创 ES6中的数组方法
1. Array.from(arrLike,[mapFn],[this])描述：用于从类数组对象或可迭代对象(数组，有length属性的对象，字符串，ES6中的Map和Set)创建一个新的，浅复制的数组实例参数： arrLike:arrLike：可迭代对象或者任意拥有length属性和若干索引属性的对象 mapFn：在生成的数组实例基础上，对每一个元素执行的map方法 this：执行回调函数时的this对象返回值：一个新的数组实例。//由字符串生成数组let str = "hello"
2021-04-03 17:12:41
195
原创 ES6中的解构
解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。1. 数组解构//完全解构const [a,b,c] = [3,6,9];console.log(a,b,c); //输出3 6 9//嵌套解构let [a, [b,x], c] = [1, [2, 3], 4];console.log(a,b,x,c);//集合解构let [head,...tail] = [1,3,5,7];console.log(he.
2021-04-03 15:36:59
117
原创 ES6新增Object方法
1. Object.create(proto,[propertiesObject])描述：创建一个新对象，使用现有对象来提供新建对象的__proto__参数： proto:新建对象的__proto__指向的原型对象 [propertiesObject]：一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数返回值：一个新对象，带着指定的原型对象和属性。var o;// 创建一个原型为null的空对象o = Object.create(null);
2021-04-02 21:47:06
385
原创 作用域与作用域链
一、作用域1.1 什么是作用域作用域是在运行时代码中的变量，函数的可访问性。1.2 作用域分类全局作用域：在代码中任何地方都能访问到的对象拥有全局作用域，一般来说有以下三种情形拥有全局作用域。(1) 最外层函数和在最外层函数外面定义的变量拥有全局作用域var outVariable = "我是最外层变量"; //最外层变量function outFun() { //最外层函数 var inVariable = "内层变量"; function innerFun() { //
2021-04-02 10:16:06
338
原创 JS实现排序算法
一、前言这篇博客是转载的，但是为了加深理解和记忆，所以按自己的思路写了一遍代码。附上参考博客：十大经典排序算法，里面有动图，做的特别好！1.1算法分类
2021-03-30 20:55:02
98
原创 JS中的reduce()用法
1. 语法arr.reduce(callback, initialValue)callback:每个元素都要执行的回调函数initicalValue:作为第一次调用 callback 的第一个参数。2. 回调函数的参数1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）,这个值可以使引用数据类型）2、currentValue （数组中当前被处理的元素）3、index （当前元素在数组中的索引）4、array （调用 reduce函数的数组）
2021-03-25 11:34:01
369
原创 JS事件详细解析
事件捕获和事件冒泡都是解决页面中事件流(事件发生顺序)的问题1.事件冒泡与事件捕获事件冒泡：事件冒泡按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发，是从内向外的。事件捕获：事件会从最外层元素开始发生，直到最具体的元素。2.DOM0级事件事件绑定：dom.ontype = function(){}事件解绑：dom.ontype = null(基本数据类型也行，但不够让人理解)缺点：不能给同一个dom对象绑定多个相同类型的事件处理程序优点：兼容性好默认事件冒泡处
2021-03-22 10:22:04
163
原创 instanceof的实现原理
instanceof是我们经常用来判断一个实例是否属于个类型。其实现原理是，查找构造函数的原型对象是否在实例对象的原型链上，如果在返回true，如果不在返回falsefunction myinstanceof(L,R){ var LP = L.__proto__; var RP = R.prototype; while(true){ if(LP === null){ return false; } if(LP === RP){ return true; } LP .
2021-03-19 14:00:43
1137
原创 JS中的继承方式
1.原型继承//父类型function Person(name, age) { this.name = name; this.age = age;}Person.prototype.say = function() { connsole.log("hello");}Person.prototype.card = ['card1', 'card2', 'card3'];//子类型function Student(name, age, gender){ Person(name,age);
2021-03-19 11:00:36
168
原创 四种判断数据类型的方法
1.typeoftypeof undefined // 'undefined' typeof '10' // 'string' typeof 10 // 'number' typeof false // 'boolean' typeof Symbol() // 'symbol' typeof Function // ‘function' typeof null // ‘object’ typeof [] // 'object' typeof {} //
2021-03-17 19:13:58
5520
原创 深入理解执行上下文和执行栈
一、执行上下文1. 什么是执行上下文执行上下文简而言之，就是JavaScript代码解析和执行时所在的环境2.执行下文分类全局执行上下文(1) 不在任何函数中的代码都位于全局执行上下文中。(2) 在JavaScript代码执行时，会创建一个全局执行上下文，并将其压入执行栈中(3) 全局执行上下文做了两件事：1.创建一个全局对象，这个对象在浏览器中是window，在node.js中是global。2.将this指针指向这个全局对象。(4)一个程序只能有一个全局执行上下文函数执行上下文(1
2021-03-15 21:10:19
322
转载 JS中的原型与原型链
一、什么是原型原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。二、函数的原型对象创建一个函数A(就是就是声明一个函数)，那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象，( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。
2021-03-12 13:39:04
107
原创 var,let和const的理解
一、全局作用域与函数作用域在ES6之前，JS只有两个作用域，全局作用域和函数作用域。那么什么是作用域呢？作用域是指一个变量的作用范围。在ES6中新增了两个关键字，let和const
2021-03-07 14:32:30
257
1
转载 BFC讲解及其作用
原文地址：什么是BFC？看这一篇就够了，这里只是针对原文做了点修改。一、关于BFCBFC定义BFC(Block formatting context)：“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。什么是boxBox 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。
2021-03-06 12:30:06
168
原创 变量提升与函数提升
在写博客前，发现了一个有趣的东西，问了问朋友，也查了查博客和知乎，查了好久，终于看见了解答，不过当时的网站忘记了QAQ，凭着记忆再记录来吧。function fun(){ console.log(a); a = 10; console.log(a);}fun();console.log(a);Q：上面的代码会如何输出？我当时的理解：a作变量提升，声明在作用域的最前方，肯定是第一个输出undefined第二个输出10，第三个报错啦~。运行结果：第二行直接报错。报错后思考：a这样写是.
2021-03-05 11:11:26
323
2
原创 行内元素与块级元素居中方法
一、行内元素1. 水平居中方法一：text-algin:center父元素设置：text-align:center说明：text-align只能对行内元素起作用，对块级元素不起作用text-align会被后代元素继承<style> .outer{ width: 200px; height: 200px; background-color: #bfa; text-align:center; }</style><div class="
2021-03-02 21:20:59
5027
1
原创 css实现居中的方法
1.水平居中设置如下情景<div class="parent"> <div class="child"> 111 </div> <div class="child"> 222 </div></div>1.1 display:inline-block父元素设置text-align:center;子元素设置display:inline-block这种方式实现了
2021-02-23 11:06:03
187
1
原创 word-wrap和word-break,white-space的区别
默认情况下，也就是不添加word-break,word-wrap(或者两者属性值均为normal时)，浏览器对于一个单词比较长，以至于本行中剩余的空间已经放不下它时，浏览器会将这个单词移动到下一行。如果一个单词太长，以至于它一个单词的长度都超出元素宽度时，单词就会“冲出范围”，而不会对该单词截断并将截断部分下移。1.white-spacewhite-space是用来处理元素中的空白符的，有如下常用属性1.1 white-space: normal默认值。空白会被浏览器忽略代码片段：.
2021-02-10 17:07:16
619
原创 CSS实现呼吸灯(静态)
1.设置整体结构1.1代码片段<style> .article{ width: 200px; height: 300px; background-color: black; } .circle{ width: 200px; height: 200px; border: 1px solid orange; }</style><div class
2021-02-03 10:14:04
977
转载 CSS引入样式的三种方式
一、行内样式<div style="width:100px; height:200px"></div>注：行内样式一般用于测试，不用于实际开发二、内部样式表在style标签中写css样式，在head标签中写style标签<style> div{ width:100px; height:200px; }</style>三、外部样式表css代码写在外部css文件中，在HTML文件中引入css文件有两种方式：link，@im
2021-02-02 11:37:56
1061
原创 外边距合并
一、外边距合并出现的情况1.只有垂直方向的外边距会出现合并，水平方向上不会出现外边距合并。2.就是子元素设置上外边距二、兄弟元素间的外边距合并1.若两者都是正值，取值为两者间最大值2.若两个外边距一正一负，取值为两者之和3.若两个外边距都是负值，取值为绝对值较大的外边距解决方案：一般不需要处理，这一般是对开发有利的，如果要处理，可以将本应该设置给两个元素的外边距直接设置给其中一个元素。三、父子元素间的外边距合并<style> .box1{
2021-02-01 13:29:31
2805
1
原创 行内元素设置内边距和外边距的问题
试图给行内元素设置内边距的时候出现了点问题，给块级元素设置内外边距都有明显的效果，那么给行内元素设置内外边距是否有效果呢。一、行内元素设置内边距1.代码展示<style> *{ margin: 0px; padding: 0px; } span{ padding: 10px 20px 30px 40px; } div{ width: 50px; h.
2021-01-30 13:14:01
5590
原创 替换元素与非替换元素
最近在突然想到为什么img标签是行内元素还可以设置宽高，查阅了一点资料和参考了别人的博客，得出结论：img标签没有独占一行所以是行内元素，但是img标签属于替换元素，具有内置的宽高属性，可以直接设置宽高。下面做一些总结。一、替换元素什么是替换元素替换元素就是浏览器会根据元素的相关属性的属性值不同，有不同解析展现的一类元素。如：① img会根据src的不同属性值，有不同展现。 ② input会根据type的不同属性值，有不同展现。注：①这些元素一般都是空元素，没有实际内容。 ②这些替.
2021-01-26 11:54:50
175
原创 行内元素与块级元素
一、行内元素行内元素只占据其内容本身所占据的空间二、块级元素块级元素占据其父元素的整个空间，通常浏览器会在块级元素后加一个换行符。三、行内元素示例<span style="background-color: hotpink;">span2</span><span style="background-color: hotpink;">span3</span><span>span4</span>由于换行符的原因，span2
2021-01-26 02:15:50
255
原创 css中的选择器
css中的选择器标签选择器通过标签名称选择一类元素标签选择器：通过标签名称选择一类元素div{},id选择器：通过id属性选择一个元素#id{}类选择器：选中属于某类的元素（一个元素可能属于多个类）.class{}普遍选择器：选择当前页面中所有元素{}后代选择器： 先要选中前一个元素的位置元素1(空格)元素2{}：选择元素1的所有后代元素(元素2)子代选择器：元素1>元素2{}：选择元素1的直接子代元素(元素2）兄弟选择器：元素1+元素2：选择元素1之后的一个兄弟元素(
2021-01-18 11:50:14
86
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人