- 博客(41)
- 收藏
- 关注
RSS订阅原创 笔试题：字符串中连续序列片段的处理
原题：输入一串字符串，经过解析，如果连续数字的话，就取连续的第一个数和最后一个数，中间用~连接，如果不连续就用，隔开如：输入'2,1,3,4,5,6,8,9' 输出'2,1,3~6,8~9'解题思路： 1.字符串 -> 数组 2.定义变量：结果变量newarr，临时变量temp（用作记录 连续序列的开头） 3.遍历数组，cur（当前元素值）+1 和 next(后面一个元素的值) cur + 1 === next 不作处理 ...
2022-03-22 16:08:29
212
原创 JavaScript中Array的常用方法
最近想着简单总结一下Array的方法中有哪些会改变原数组，顺便复习一下常用的方法。Array.fill(value, start, end)将数组中某一段连续的元素，每一个都替换为value。(如果未规定end值，则数组中start下标之后所有元素都会被替换，见下图二)Array.shift()从数组头部删除元素,并返回被删除的元素Array.unshift(value...)从数组头部添加若干元素，Array.pop()从数组尾部删除元素，并返回被删除的...
2022-02-15 12:06:04
573
原创 对象属性是否全为空
项目中遇到一个判断对象属性是否全为空的小问题。解决方法是，拷贝原对象，将指定属性赋值为空字符串，利用Object.values()结合every()遍历进行判断是否为空。...
2022-01-06 16:14:44
432
原创 框架列表中插槽slot的使用
一点点项目中的小笔记。用于需要对框架中表格数据做一些加工的情况，（如改变表格内容字体颜色、文字缩略等情况）。实现效果：
2022-01-04 11:31:40
286
原创 浅谈闭包的作用
函数执行后会自动销毁其中的数据（外界访问不到·），如果想要保存其中的数据或者变量，就可以使用闭包，闭包也可以隐藏数据，使其内的数据不会被外界轻易访问修改。 一般的做法是在函数中return另一个函数或者对象。 <script> function hideData(){ const data = {} return { set:function(key, v...
2021-09-25 22:44:14
75
原创 transition、animation和transform
transition，过渡。用于平滑改变css的属性，（如盒子的长宽等，鼠标移入悬浮的时候产生动效的情况。常用属性transition-property : 指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡transition-duration: 指定这个过渡的持续时间transition-delay: 延迟过渡时间transition-timing-function: 指定过渡类型，有ease | linear | eas
2021-09-25 00:57:37
253
原创 typeof、instanceof和hasOwnProperty
通俗的讲，instanceof，是从原型链上寻找是否有此实例，typeof，返回的是原型链最顶点的数据类型，hasOwnProperty，则是用来判断自身是否真的有此属性或方法（自身原有的，非继承的） <script> class Person{ constructor(name){ this.name = name } ...
2021-09-24 00:39:44
117
原创 class继承
class继承主要还是会用到原型链的知识。 <script> class Person { constructor(name){ this.name = name } say(){ console.log("say hi") } } class Student e...
2021-09-24 00:00:12
99
原创 浅谈深浅拷贝
<script> const oldObj = { name: 'susu', age: 18, colors: ['skyblue','lightpink','black'], friend: { name: 'chenchen' } } function deepClone (obj) { .
2021-09-23 00:56:04
66
原创 盒子模型（标准盒子模型和IE盒子模型）
最常遇到的就是box-sizing：content-box和border-box的区别content-box，即标准盒子模型，这个情况下设置的width不包括padding、border、margin。border-box，即IE盒子模型，这个情况下设置的width不包括margin，包括padding、border。...
2021-09-17 21:24:54
159
原创 字符串去重
<script> /* 字符串去除相邻的重复项 */ function change(str){ let arr = str.split('') let newStr = [arr[0]] for(let i = 0; i < arr.length; i++){ // let cur = arr[i] if(arr...
2021-09-17 21:02:04
106
原创 优先级队列（队列的应用）
<script> class Queue { constructor(){ this.items = [] } enqueue(item){ this.items.push(item) } dequeue(){ return this.items.shift() .
2021-09-16 23:59:56
103
原创 JS击鼓传花（队列的应用）
<script> class Queue { constructor(){ this.items = [] } //入队 enqueue(item){ this.items.push(item) } // 出队 dequeue(){ ...
2021-09-16 00:56:56
136
原创 JS进制转换（栈的应用）
<script> class Stack{ constructor(){ this.items = [] } // 进栈 push(item){ return this.items.push(item) } // 出栈 pop(){ ...
2021-09-15 22:37:10
96
原创 获取 url 参数
获取 url 中的参数1. 指定参数名称，返回该参数的值 或者 空字符串2. 不指定参数名称，返回全部的参数对象 或者 {}3. 如果存在多个同名参数，则返回数组4. 不支持URLSearchParams方法function getUrlParam(sUrl, sKey) {var paramArr = sUrl.split('?')[1].split('#')[0].split('&'); // 取出每个参数的键值对放入数组const obj = {};paramArr.
2021-09-15 00:04:45
217
原创 call、apply&bind
封装函数 f，使 f 的 this 指向指定的对象function bindThis(f, oTarget) { return function(){ return f.call(oTarget, ...arguments) }}function bindThis(f, oTarget) { return function(){ return f.apply(oTarget, arguments) }}function bindT
2021-09-15 00:01:22
76
原创 斐波那契数列
用 JavaScript 实现斐波那契数列函数,返回第n个斐波那契数。 f(1) = 1, f(2) = 1 等function fibonacci(n) { if(n==1 || n==2){ return 1 } else if(n>2){ return fibonacci(n-1) + fibonacci(n-2) }}
2021-09-14 16:39:57
54
原创 js数组求和
//常规循环function sum(arr) { var s = 0 for(var i=0; i<arr.length; i++){ s += arr[i] } return s}//不考虑算法复杂度，递归function sum(arr){ var len = arr.length if(len == 0){ return 0; } else if (len == 1){ retu.
2021-09-14 16:33:00
104
原创 SEO搜索引擎优化
一、合理的title、description、keywardstitle，就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到（搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要。）词语之间用英文“-”隔开，因为计算机只对英语敏感性高。<title>Document</title>description是对于一个网页的简要内容概况。description一般不超过150个字符，描述内容要和页面内容...
2021-09-14 00:50:38
155
原创 Axios解决跨域问题（Vue2版）
什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...
2021-09-13 23:52:33
65624
6
原创 浅谈JS的三个特性：封装、继承、多态
SSH是一种网络协议，用于计算机之间的加密登录。SSH之所以能够保证安全，原因在于它采用了公钥加密。整个过程是这样的：（1）远程主机收到用户的登录请求，把自己的公钥发给用户。（2）用户使用这个公钥，将登录密码加密后，发送回来。（3）远程主机用自己的私钥，解密登录密码，如果密码正确，就同意用户登录。这个过程本身是安全的，但是实施的时候存在一个风险：如果有人截获了登录请求，然后冒充远程主机，将伪造的公钥发给用户，那么用户很难辨别真伪。因为...
2021-09-12 01:25:58
516
原创 浅谈JSON
JSON是一种格式（数据交换格式），不属于任何一门程语言，主要是使用JSON进行数据的传输（前后端）。 可用JSON Validator验证内容是不是JSON格式规范的内容。 JSON和JS对象对比 JSON JS对象 键名、字符串 必须双引号 键名双引号，单引号或者无引号 字符串双引号，单引号或者反引号 数据类型 没有undefined、NaN。Infinity和函数 多种类型都有...
2021-09-11 22:33:52
87
原创 浅谈HTTP、HTTPS、TLS及SSH
HTTP请求中的内容： HTTP请求有三部分构成，分别为：请求行，首部，实体。 请求行形似GET /xxx/xxx.txtHTTP/1.1,基本由请求方法、URL、协议版本组成。 Get和Post的区别副作用指对服务器上的资源做改变，搜索是无副作用的，注册是副作用的。幂等指发送 M 和 N 次请求（两者不相同且都大于 1），服务器上资源的状态一致，比如注册 10 个和 11 个帐号是不幂等的，对文章进行更改 10...
2021-09-11 01:02:46
1222
原创 CSS等高布局
一、利用盒子padding-buttom：999px和margin-buttom：-999px互相抵消，之后用overflow：hidden开启BFC裁剪多余的部分。考虑兼容性会好用一点。 <style> html{ width: 100%; height: 100%; display: flex; justify-content: center;
2021-09-10 23:42:15
516
原创 浅谈输入URL之后发生了什么
DNS DNS的作用就是通过域名查询到具体的IP。因为IP地址不利于人们记忆就出现了域名。通过DNS查询可以找到域名对应的IP地址。找到IP地址之后就会请求连接，参考TCP三次握手。 举个经典的例子，当你想在浏览器中访问www.google.com,会有以下的过程： 以下DNS迭代查询，由客户端做请求 1、首先在本地缓存中查询IP（先看自己有没有） 2、没有的话就去系统配置的DNS服务器中查询（自己没...
2021-09-10 18:21:53
61
原创 浅谈浏览器渲染页面的流程
主要关于WebKit的渲染引擎内容一、浏览器接收到 HTML 文件并转换为 DOM 树 用户输入URL，三次握手，浏览器服务器建立连接后，浏览器请求对应的HTML文件。网络传输中的文件内容都是0/1组成的字节数据。浏览器接收到HMTL文件后将字节数据转换为字符、字符串的形式（也就是程序员写的代码）。在这之后，浏览器将字符串通过词法分析转换为Token（）标记，（可以把token理解为符号标签，是代码的最小单位，依据HTML的标签将代码拆分便于浏...
2021-09-10 01:49:04
386
原创 初识Ajax
一、什么是AjaxAjax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页。（类似热模替换？）二、Ajax的工作原理客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象...
2021-09-09 17:29:42
47
原创 响应式布局（初步了解）
初步理解，响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。（CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。）响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端...
2021-09-09 00:11:17
67
原创 var a=b=5
(function() { var a = b = 5;})(); console.log(b); //5console.log(a); // a is not defined函数内定义var a=b=5，拆开分析即var aa=bb=5首先a声明在函数作用域中，函数执行完毕后清空了局部作用域中的变量，即函数外面访问不到了，所以打印时出现 a is not defined其次是b， b在函数中未声明，此时会“跳出”函数的局部作用域，进入到全局作用域中并被自动声.
2021-09-07 00:09:07
929
原创 居中显示水平垂直居中
flex弹性布局 /* 给父元素设置css样式 利用flex布局实现子元素居中 */ html{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .box{ width
2021-09-05 23:55:09
39
原创 ([] + {}).length
是骡子是马，拉出来run一run。先上运行结果为什么会出现这种情况，拆开分析分析。其中，数组是有length属性的，空数组的长度为0。对象没有length属性，直接使用就会报错。([ ] + {}).length 使用 “ + ” 连接空数组和空对象， 实际是在内部调用了空数组和空对象的toString方法，如下之后再进行连接得到字符串“ [object Object] ” ，字符串的长度为15....
2021-09-05 22:26:14
248
原创 js隐式类型转换
值类型之间的数据类型转换:（1）数字和字符串使用+运算符:数字和字符串如果使用+运算符进行操作，那么会将数字先转换为字符串，然后进行字符串连接操作:（2）布尔值参与的+运算符操作:如果有布尔型参与，那么首先会将布尔值转换为对应的数字或者字符串，然后再进行相应的字符串连接或者算数运算。（3）Null和Undefined参与的+运算符操作如果和数字进行计算，null会转化为0，undefined会转化成NaN（4）减法操作:如果一个操作数为string、boolean、null、un...
2021-08-13 00:35:15
100
原创 Vue自定义格式化时间的全局过滤器
Vue.filter('dataFormat', function(originVal){ const dt = new Date(originVal) const y= dt.getFullYear() // padStart不足两位 前面补零 const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.get.
2021-08-11 23:16:45
179
原创 Vue项目报错 RangeError: Maximum call stack size exceeded
最近在学着写项目练手，在一个登录页用了到路由导航守卫，出现了路由死循环问题，记录如下。Maximum call stack size exceed：超过最大调用堆栈大小。出现这种问题一般都是出现了死循环。由于在之前项目运行都没出现问题，直到编写了路易导航守卫代码之后手动删除了sessionStorage里的数据（“token”），所以就直接判断出问题是出现在路由导航这方面，并且。我的源码如下经过分析，项目设置的是每次打开后的默认显示路由是'/login'，没有登陆也就没有token，经.
2021-07-30 22:37:42
4801
原创 [‘0‘,‘1‘,‘2‘].map(parseInt)
要想整清楚[0,1,2].map(parseInt)是咋回事呢就得先从map()和parseInt()开始map()，是数组的一个方法，使用map()会对数组里面的元素进行迭代，与此用时还会对这些元素进行处理（即原数组内每一个元素都会执行括号内的函数），处理完之后再返回一个数组。至于如何处理就看自己定义了，用法：[xxx].map(function(item，index，array){}),其中的function(){}会自动接收三个参数，即item，index，array（数组本身），之后map就会自
2021-07-29 00:41:02
287
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人