自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(41)
  • 收藏
  • 关注

原创 笔试题:字符串中连续序列片段的处理

原题:输入一串字符串,经过解析,如果连续数字的话,就取连续的第一个数和最后一个数,中间用~连接,如果不连续就用,隔开如:输入'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 257

原创 JavaScript中Array的常用方法

最近想着简单总结一下Array的方法中有哪些会改变原数组,顺便复习一下常用的方法。Array.fill(value, start, end)将数组中某一段连续的元素,每一个都替换为value。(如果未规定end值,则数组中start下标之后所有元素都会被替换,见下图二)Array.shift()从数组头部删除元素,并返回被删除的元素Array.unshift(value...)从数组头部添加若干元素,Array.pop()从数组尾部删除元素,并返回被删除的...

2022-02-15 12:06:04 611

原创 对象属性是否全为空

项目中遇到一个判断对象属性是否全为空的小问题。解决方法是,拷贝原对象,将指定属性赋值为空字符串,利用Object.values()结合every()遍历进行判断是否为空。...

2022-01-06 16:14:44 476

原创 框架列表中插槽slot的使用

一点点项目中的小笔记。用于需要对框架中表格数据做一些加工的情况,(如改变表格内容字体颜色、文字缩略等情况)。实现效果:

2022-01-04 11:31:40 325

原创 解决表格Table宽度设置无效的问题

Table表格单元格宽度无效

2021-12-10 15:00:45 13139 1

原创 浅谈闭包的作用

函数执行后会自动销毁其中的数据(外界访问不到·),如果想要保存其中的数据或者变量,就可以使用闭包,闭包也可以隐藏数据,使其内的数据不会被外界轻易访问修改。 一般的做法是在函数中return另一个函数或者对象。 <script> function hideData(){ const data = {} return { set:function(key, v...

2021-09-25 22:44:14 92

原创 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 271

原创 typeof、instanceof和hasOwnProperty

通俗的讲,instanceof,是从原型链上寻找是否有此实例,typeof,返回的是原型链最顶点的数据类型,hasOwnProperty,则是用来判断自身是否真的有此属性或方法(自身原有的,非继承的) <script> class Person{ constructor(name){ this.name = name } ...

2021-09-24 00:39:44 129

原创 class继承

class继承主要还是会用到原型链的知识。 <script> class Person { constructor(name){ this.name = name } say(){ console.log("say hi") } } class Student e...

2021-09-24 00:00:12 127

原创 浅谈深浅拷贝

<script> const oldObj = { name: 'susu', age: 18, colors: ['skyblue','lightpink','black'], friend: { name: 'chenchen' } } function deepClone (obj) { .

2021-09-23 00:56:04 139

原创 html文字溢出

文本框输入的文本溢出,结尾用省略号替换隐藏溢出部分怎么做。一种是单行隐藏,一种是多行隐藏。

2021-09-23 00:54:55 838

原创 盒子模型(标准盒子模型和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 194

原创 字符串去重

<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 125

原创 优先级队列(队列的应用)

<script> class Queue { constructor(){ this.items = [] } enqueue(item){ this.items.push(item) } dequeue(){ return this.items.shift() .

2021-09-16 23:59:56 139

原创 JS击鼓传花(队列的应用)

<script> class Queue { constructor(){ this.items = [] } //入队 enqueue(item){ this.items.push(item) } // 出队 dequeue(){ ...

2021-09-16 00:56:56 176

原创 JS进制转换(栈的应用)

<script> class Stack{ constructor(){ this.items = [] } // 进栈 push(item){ return this.items.push(item) } // 出栈 pop(){ ...

2021-09-15 22:37:10 127

原创 获取 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 394

原创 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 111

原创 斐波那契数列

用 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 123

原创 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 146

原创 SEO搜索引擎优化

一、合理的title、description、keywardstitle,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要。)词语之间用英文“-”隔开,因为计算机只对英语敏感性高。<title>Document</title>description是对于一个网页的简要内容概况。description一般不超过150个字符,描述内容要和页面内容...

2021-09-14 00:50:38 169

原创 Axios解决跨域问题(Vue2版)

什么是跨域 首先需要了解到浏览器的同源策略,同源策略是最核心也是最基本的安全功能,缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源(即指在同一个域)就是两个页面具有相同的协议(protocol)、主机(host)和端口号(port)。当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...

2021-09-13 23:52:33 69821 6

原创 浅谈JS的三个特性:封装、继承、多态

SSH是一种网络协议,用于计算机之间的加密登录。SSH之所以能够保证安全,原因在于它采用了公钥加密。整个过程是这样的:(1)远程主机收到用户的登录请求,把自己的公钥发给用户。(2)用户使用这个公钥,将登录密码加密后,发送回来。(3)远程主机用自己的私钥,解密登录密码,如果密码正确,就同意用户登录。这个过程本身是安全的,但是实施的时候存在一个风险:如果有人截获了登录请求,然后冒充远程主机,将伪造的公钥发给用户,那么用户很难辨别真伪。因为...

2021-09-12 01:25:58 565

原创 浅谈JSON

JSON是一种格式(数据交换格式),不属于任何一门程语言,主要是使用JSON进行数据的传输(前后端)。 可用JSON Validator验证内容是不是JSON格式规范的内容。 JSON和JS对象对比 JSON JS对象 键名、字符串 必须双引号 键名双引号,单引号或者无引号 字符串双引号,单引号或者反引号 数据类型 没有undefined、NaN。Infinity和函数 多种类型都有...

2021-09-11 22:33:52 105

原创 浅谈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 1351

原创 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 580

原创 浅谈输入URL之后发生了什么

DNS DNS的作用就是通过域名查询到具体的IP。因为IP地址不利于人们记忆就出现了域名。通过DNS查询可以找到域名对应的IP地址。找到IP地址之后就会请求连接,参考TCP三次握手。 举个经典的例子,当你想在浏览器中访问www.google.com,会有以下的过程: 以下DNS迭代查询,由客户端做请求 1、首先在本地缓存中查询IP(先看自己有没有) 2、没有的话就去系统配置的DNS服务器中查询(自己没...

2021-09-10 18:21:53 77

原创 浅谈浏览器渲染页面的流程

主要关于WebKit的渲染引擎内容一、浏览器接收到 HTML 文件并转换为 DOM 树 用户输入URL,三次握手,浏览器服务器建立连接后,浏览器请求对应的HTML文件。网络传输中的文件内容都是0/1组成的字节数据。浏览器接收到HMTL文件后将字节数据转换为字符、字符串的形式(也就是程序员写的代码)。在这之后,浏览器将字符串通过词法分析转换为Token()标记,(可以把token理解为符号标签,是代码的最小单位,依据HTML的标签将代码拆分便于浏...

2021-09-10 01:49:04 404

原创 初识Ajax

一、什么是AjaxAjax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页。(类似热模替换?)二、Ajax的工作原理客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象...

2021-09-09 17:29:42 76

原创 响应式布局(初步了解)

初步理解,响应式网站设计是一个网站能够兼容多个终端,而不是为每一个终端做一个特定版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。(CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。)响应式设计与自适应设计的区别:响应式开发一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容;自适应需要开发多套界面,通过检测视口分辨率,来判断当前访问的设备是pc端...

2021-09-09 00:11:17 87

原创 Flex弹性布局

练习网站常用技巧

2021-09-08 00:28:26 104

原创 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 1039

原创 排序(快速排序,插入排序,冒泡排序)

可视网站基本排序算法

2021-09-06 23:52:30 53

原创 居中显示水平垂直居中

flex弹性布局 /* 给父元素设置css样式 利用flex布局实现子元素居中 */ html{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .box{ width

2021-09-05 23:55:09 46

原创 (() => {}).length

箭头函数的length属性是函数的length属性,表示传入的形参的个数。

2021-09-05 22:30:59 149

原创 ([] + {}).length

是骡子是马,拉出来run一run。先上运行结果为什么会出现这种情况,拆开分析分析。其中,数组是有length属性的,空数组的长度为0。对象没有length属性,直接使用就会报错。([ ] + {}).length 使用 “ + ” 连接空数组和空对象, 实际是在内部调用了空数组和空对象的toString方法,如下之后再进行连接得到字符串“ [object Object] ” ,字符串的长度为15....

2021-09-05 22:26:14 277

原创 js隐式类型转换

值类型之间的数据类型转换:(1)数字和字符串使用+运算符:数字和字符串如果使用+运算符进行操作,那么会将数字先转换为字符串,然后进行字符串连接操作:(2)布尔值参与的+运算符操作:如果有布尔型参与,那么首先会将布尔值转换为对应的数字或者字符串,然后再进行相应的字符串连接或者算数运算。(3)Null和Undefined参与的+运算符操作如果和数字进行计算,null会转化为0,undefined会转化成NaN(4)减法操作:如果一个操作数为string、boolean、null、un...

2021-08-13 00:35:15 111

原创 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 212

原创 Vue项目报错 RangeError: Maximum call stack size exceeded

最近在学着写项目练手,在一个登录页用了到路由导航守卫,出现了路由死循环问题,记录如下。Maximum call stack size exceed:超过最大调用堆栈大小。出现这种问题一般都是出现了死循环。由于在之前项目运行都没出现问题,直到编写了路易导航守卫代码之后手动删除了sessionStorage里的数据(“token”),所以就直接判断出问题是出现在路由导航这方面,并且。我的源码如下经过分析,项目设置的是每次打开后的默认显示路由是'/login',没有登陆也就没有token,经.

2021-07-30 22:37:42 4898

原创 [‘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 296

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除