![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 62
Jackshijin
多做少说
展开
-
Leetcode 482:密钥格式化
密钥格式化题目描述:有一个密钥字符串 S ,只包含字母,数字以及 ‘-’(破折号)。其中, N 个 ‘-’ 将字符串分成了 N+1 组。给你一个数字 K,请你重新格式化字符串,使每个分组恰好包含 K 个字符。特别地,第一个分组包含的字符个数必须小于等于 K,但至少要包含 1 个字符。两个分组之间需要用 ‘-’(破折号)隔开,并且将所有的小写字母转换为大写字母。给定非空字符串 S 和数字 K,按照上面描述的规则进行格式化来源:力扣(LeetCode)链接:https://leetcode-原创 2020-12-25 18:17:58 · 172 阅读 · 0 评论 -
Javascript 的浮点计算精度问题和数字转科学计数法问题
Javascript 在以下情景下会自动将数值转换为科学计数法:1、当整数的位数超过22位时,js会自动将整数数值转化为科学记数法。 js中的科学记数法:10000000000000000000(21个0)在js中的科学记数法表示为:1e+21; 2、小数点前边是0,小数点后十分位(包含十分位)之后的0的个数超过6个数值就会自动转化为科学计数法; 0.0000004 会转换为: 4e-7, 而0.10000004 则不会被转换,1.000000004也不会被转...原创 2020-12-04 18:24:34 · 2778 阅读 · 0 评论 -
input 上传图片并预览&图片转base64格式
页面结构:函数方法:图片上传:图片预览:删除图片:转换为base64图片:css样式:.upload-imgs { overflow: hidden; font-size: 0; padding: 0; margin-left: 4px;li { position: relative; width: 86px; height: 86px; font-size: 1...原创 2020-12-04 18:13:50 · 520 阅读 · 0 评论 -
导航锚点小试牛刀
Offsettop 属性&导航锚点的实现记录一些视窗高度和滚动的一些属性以及导航菜单跟随内容变动以及点击锚点展示内容offsetParent 介绍:偏移量属性scrollHeight 和 scrollWidth ,可滚动的绝对高度,包括隐藏不可见的部分;scrollTop 和 scrollLeft :可滑动的元素,即元素出现滚动条时,内部在xy轴上滑动的距离,并且可以为其赋值,如果一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop值为0。Vue组件简单实现导航栏原创 2020-12-04 17:30:22 · 172 阅读 · 0 评论 -
两个有趣的ES2020操作符
?. : Optional Chaining — 可选链式操作符,在查询具有多个层级的对象时,不再需要进行冗余的前置校验旧:let nestedProp = obj && obj.first && obj.first.second;新:let nestedProp = obj?.first?.second;??空位合并操作符: 如果表达式在??的左侧运算符求值为 undefined 或 null,就返回其右侧默认值。let c = a ?? b;// 等价于..原创 2020-12-04 17:01:13 · 109 阅读 · 0 评论 -
Node.js中的包及npm包管理工具
在node.js中,可以通过包来对一组具有相互依赖关系的模块进行统一管理,通过包的使用,可以将某个独立的功能封装起来。在一个包中,通常包含以下一些内容:(1)、在包的根目录中存放package.json文件(2)、在bin子目录中存放二进制文件(3)、在lib子目录中存放Javascript文件(4)、在doc子目录存放对包或包的使用方法进行说明的文档文件(5)、在test...原创 2019-12-06 23:59:57 · 329 阅读 · 0 评论 -
数组的深浅复制
// 数组的浅复制let nums = [];for(let i = 0; i < 10; i++){ nums[i] = i + 1;}let samenums = [12,13,14,18,19];samenums = nums;nums[0] = 200;console.log(samenums[0]);console.log(samenums.length)...原创 2019-04-08 23:10:02 · 197 阅读 · 0 评论 -
一个bug看一天,写代码像cxk
以上第一幅图的代码是模拟触摸的事件,在浏览器控制台输出touchstart 的具体构成,在火狐浏览器可以正确触发,但是在chrome下没有反应,也没有报错,不知道什么原因。一开始我以为是浏览器支持,但是试了下用原生在chrome下是可以触发的,但是在这个项目下是不可以触发。Firefox 的输出如下:用原生也是可以在chrome得到结果,对应的结果:...原创 2019-04-27 19:12:14 · 879 阅读 · 0 评论 -
js归并排序的实现
归并排序的时间复杂度O(N*logN),额外空间复杂度O(N)master公式的使用,形如 T(N) = a*T(N/b) + O(N^d)这样的时间复杂度公式,其复杂度可以化简为:1) log(b,a) > d -> 复杂度为O(N^log(b,a))2) log(b,a) = d -> 复杂度为O(N^d * logN)3) log(b,a) < d...原创 2019-08-15 20:00:46 · 1255 阅读 · 0 评论 -
.webp 图片格式 转为其他常见的格式
昨日在控制台“盗取”某电商的图片素材时,发现下载下来的全是.webp 格式的图片,而不是常见的.jpg , .png , .gif 等的格式,所以用电脑的看图软件没法打开,只有在浏览器中才可以打开,自己自行嵌入到页面中也会报错。虽然WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源,WebP格式图像的体积要比JPEG格式图像小40%。谷...原创 2019-03-28 09:47:35 · 1771 阅读 · 0 评论 -
高大上名词解析
紧耦合: 检测匹配条件的代码需要了解条件的代码细节松耦合: 当代码触发匹配条件时,不需要指定关于条件的细节代码。可以通过内置的CustomEvent 构造函数 和 dispatchEvent 方法,创建和分发自定义事件,减少应用程序不同部分之间的耦合。贪婪ID问题: 在处理表单元素时,浏览器将表单内的元素添加到表单的属性上,以每个子元素的ID作为索引,这样我们很容易地通过表单访问其子元...原创 2019-04-06 15:47:10 · 621 阅读 · 0 评论 -
javascript 中的常见坑
各种数值类型转换成 布尔值:undefined 和 null 转换成 布尔值都是 false布尔值: true 是 true ,false 是 false;数字: +0, -0 和NaN 都是转换成 false,其他的数字都是true字符串: 空字符串转换成 false,其他的字符串都是true对象: 转换成布尔值都是 true例子:function testTrue(val){ ...原创 2019-04-06 15:46:12 · 508 阅读 · 0 评论 -
JavaScript优先级汇总表
优先级汇总表所有运算符按照优先级的不同从高到低排列。优先级 运算类型 关联性 运算符 20 圆括号 n/a ( … ) 19 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new (带参数列表) n/a new … ( … ) 函数调用 从左到右 … ...原创 2019-03-27 17:38:55 · 341 阅读 · 0 评论 -
Maximum call stack size exceeded( 超出最大调用堆栈大小)
真系要命咯,一杯茶一包烟一个bug 改一天。在做vue的一个实际的小项目时,出现了以下的Maximum call stack size exceeded( 超出最大调用堆栈大小),大概意思是递归太深,导致栈溢出我一看也没写什么递归函数,就一些vue 的路由组件及node 和webpack 的相关配置文件,找了好久,以为是引用了github上的一个开源组件导致的错误,马不停蹄去看文档,改函数...原创 2019-03-26 22:54:01 · 40029 阅读 · 6 评论 -
Vue 项目中 封装h5 的localStorage 方法实现本地缓存
在localStorage.js 文件下创建下列的封装函数,然后就可以在对应的vue 组件中按需import 引入;也可以封装成一个对象,最后再将这个对象export 出去,然后在vue组件中import 进来该对象,两者均可。这里采用的是封装各个函数,在需要的组件中引入,这样可以做到哪个方法错就去修改哪个方法。export function setLocalStorage (key, va...原创 2019-05-05 22:59:34 · 1207 阅读 · 0 评论 -
树状结构转换成二维和一维数组
在项目中遇到树状结构的目录要变成一维的数组,就是多级的嵌套目录转化为列表,在JavaScript中列表的数据就是以数组的形式来实现的。假定现在有如下的树状结构的数据:const tree = [ { id: 1, items: [ { id: 2, it...原创 2019-05-12 16:30:26 · 2882 阅读 · 0 评论 -
Vue 源码目录学习笔记
Vue.js 的源码都在 src 目录下,其目录结构如下。src├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持├── server # 服务端渲染├── sfc # .vue 文件解析├── sh...原创 2019-08-05 15:04:28 · 100 阅读 · 0 评论 -
Javascript 基础编程练习记录
/*** 合并数组arr1和数组arr2,不能直接修改数组arr,结果返回新的数组*/function myConcat(arr1,arr2) { return arr1.concat(arr2);}function concatTwo(arr1, arr2) { let temp = arr1.slice(0); [].push.apply(temp, ar...原创 2019-09-02 14:16:12 · 370 阅读 · 0 评论 -
一些奇淫技巧整理
函数节流的代码实现:let throttle = function (fn, interval) { let _self = fn, //保存需要被延迟执行的函数引用 timer, //定时器 firstTime = true; //是否第一次调用 return function () {...原创 2019-08-29 16:15:17 · 1769 阅读 · 0 评论 -
非比较排序使用的例子
给定一个数组,求如果排序之后,相邻两数的最大差值,要求时 间复杂度O(N),且要求不能用非基于比较的排序。使用桶排序的思想解决如下:/** * 给定一个数组,求如果排序之后,相邻两数的最大差值,要求时 间复杂度O(N),且要求不能用非基于比较的排序。 * @param nums * @returns {number} */function maxGap(nums) { ...原创 2019-08-22 22:27:49 · 129 阅读 · 0 评论 -
javascript 高级程序设计第三版 中值得借鉴的代码摘抄
1、/*** 在浏览器环境下测试任何对象的某个特性是否存在* 使用函数isHostMethod()*/function isHostMethos(object, property) { let t = typeof object[property]; return t === 'function' || (!!(t==='object' && obj...原创 2019-08-16 23:39:39 · 116 阅读 · 0 评论 -
javascript 去除字符串首尾空格
1、substring()截取从第一个非空格字符的索引到最后一个非空格字符索引之间的所有字符,返回截取后的字符串String.prototype.trimOne = function () { return this.substring(Math.max(this.search(/\S/), 0), this.search(/\S\s*$/)+1)};2、 replace()方...原创 2019-08-21 23:50:50 · 3037 阅读 · 0 评论 -
javascript 旋转打印矩阵 及90度旋转矩阵
/** * 转圈打印矩阵 要求额外空间复杂度为O(1) * 1 2 3 4 * 5 6 7 8 * 9 10 11 12 矩阵转圈打印为: 1 2 3 4 8 12 11 10 9 5 6 7 * */function spiralOrderPrint(martix) { let tR = 0; let tC =...原创 2019-08-23 08:32:18 · 2097 阅读 · 0 评论 -
以简单排序算法尝试javascript对数器的使用
对数器的概念:(1)有一个你想要测的方法a,(2)实现一个绝对正确但是复杂度不好的方法b,(3)实现一个随机样本产生器(4)实现比对的方法(5)把方法a和方法b比对很多次来验证方法a是否正确。(6)如果有一个样本使得比对出错,打印样本分析是哪个方法出 错(7)当样本数量很多时比对测试依然正确,可以确定方法a已经 正确。说白了对数器就是用来快速检验自己写的算法或者函数...原创 2019-08-14 17:00:32 · 135 阅读 · 0 评论 -
超级长的JavaScript学习笔记(包含fcc题目答案)
今天又从尘封的电脑角落文件夹看到了曾经写的长长的JavaScript学习笔记,用的word记录的,然而当自己上手框架后就没再更新过,也没再翻过。果然还是写博客靠谱,想不起来了就到博客看看。今天整理文件夹发现,先把资料mark在博客上,包含JavaScript的基础和相关的坑,还有当时刷的fcc的题目答案,立个flag,等忙完了,再分类整理:object类型constructor:保存着用于创...原创 2019-03-22 17:46:26 · 726 阅读 · 0 评论 -
排序和搜索算法
冒泡排序:比较任何两个相邻的项,如果左边比右边大,则交换它们(从小到大排序)。function ArrayList(){ let array = []; this.insert = function (item) { array.push(item); }; this.toString = function () { retur...原创 2019-03-17 23:07:13 · 194 阅读 · 0 评论 -
图
图是网络结构的抽象模型,其是一组由边连接的节点。由一条边连接在一起的顶点称为相邻顶点; 一个顶点的度是其相邻顶点的数量路径是顶点v1,v2,v3,...vk的一个连续序列简单路径要求不包含重复的顶点如果一个图中不存在环,则称该图是无环的,如果图中每两个顶点间都存在路径,则该图是连通的。有向图:边有方向;无向图:边没有方向 如果图中每两个顶点间在双向上都存...原创 2019-03-17 21:39:24 · 238 阅读 · 0 评论 -
es6 学习细节2
1、Reflect.getPrototypeOf() 方法与 Object.getPrototypeOf() 方法 都要求传入的参数为对象。 如果传入的参数不是对象,则Reflect.getPrototypeOf() 方法会抛出错误,而 Object.getPrototypeOf() 方法则会在执行前将参数强制转换为一个对象。 Reflect.setPrototypeOf() ...原创 2019-02-13 14:06:41 · 157 阅读 · 0 评论 -
instanceof 的用法
function Person() { } function Animal() { } Person.prototype = new Animal(); var person = new Person(); console.log(person instanceof Animal);instanceof 操作符用于检测对象是否是某...原创 2019-02-13 13:57:37 · 141 阅读 · 0 评论 -
事件冒泡与捕获
一个事件的处理方式有两种:捕获——首先被顶部元素捕获,并依次向下传递 冒泡——目标元素捕获后,事件转向冒泡,从目标元素向顶部元素冒泡。可以通过向addEventListener 传递参数,自行选择事件的处理顺序。第三个参数若传入 true ,将采用事件捕获;若传入 false ,则采用事件冒泡,但是...原创 2019-02-27 22:05:58 · 127 阅读 · 0 评论 -
计时器的实际运用
在复杂应用开发中JavaScript 的单线程特性会造成很大的困扰,浏览器上的用户交互会变得迟钝,卡顿甚至无响应,为了提高用户体验,就可能需要将计算量大、复杂度高可能会导致卡顿的任务分割成小片段,这时候计时器的作用就显示出来了。假如有一个很大量的数据需要即时显示在用户的页面上,需要创建大量的表格诸如此类的操作,可以使用一个计时器来中断需要长时间运行的任务。这样比起直接在页面创建DOM节...原创 2019-02-27 20:07:19 · 406 阅读 · 0 评论 -
每天了解一点JavaScript——作用域和闭包
1、闭包允许函数访问并操作函数外部的变量。只要变量或函数存在于声明函数时的作用域内,闭包就可使函数能够访问这些函数或变量。每一个通过闭包访问变量的函数都具有一个作用域链,作用域链包含闭包的全部信息。闭包是javascript 作用域规则的副作用。当函数创建时所在的作用域消失后,仍然能够调用函数。2、回调函数指的是在将来不确定的某一时刻异步调用的函数,在回调函数中经常需要访问外部的数据。3、...原创 2019-01-21 16:25:32 · 115 阅读 · 0 评论 -
每天学点JavaScript 细节之函数相关
1、Js 中实参会以形参在函数中定义的顺序被赋值到形参上,第一个实参赋值到第一个形参,依次对应。实参数量大于形参,额外的实参不会赋值给任何形参;如果形参数量大于实参,没有对应实参的形参会被设为 undefined。2、如果构造函数返回一个对象,该对象将作为将作为整个表达式的值返回,而传入构造函数的this 将被抛弃 如果构造函数返回的是非对象类型,则会忽略返回值,返回的将是新创建...原创 2019-01-18 09:36:26 · 195 阅读 · 0 评论 -
移动端兼容ie 及相关注意问题
以上的css样式代码是透明度的兼容各种浏览器的写法,这里我的透明度设置为0.9 ; filter:alpha(opacity=90); 这个样式 兼容IE8及以下的IE浏览器, 而在支持CSS3 opacity 的浏览器中,可以 opacity:0.9; 就是说 IE8及以下的filter:alpha(opacity=n) ,就是相当于现代的浏览器中的 opacity: n/100 ;...原创 2019-01-17 11:52:01 · 377 阅读 · 0 评论 -
javascript 继承的几种方法
假如我这里有以下两个构造函数:苹果是果蔬的一种,如何能让apple继承果蔬的属性呢,因为每次都重复创建新的属性效率不高,于是想到了继承,在es6之前,继承要花不少功夫。一、使用构造函数的call和apply方法:在一个子构造函数中,可以通过调用父构造函数的call方法或appaly方法来实现继承,类似于Java中的写法。但是call()方法接受的是若干个参数的列表,而appl...原创 2018-11-18 14:30:47 · 3076 阅读 · 2 评论 -
es6 入坑 细节整理
在比较两个值时,一般用全等 === 运算符,但是es5和之前的版本比较鸡肋,比如 +0 和 -0 在Js引擎中表示为两种完全不一样的实体,但是用=== 比较的时候,得到的结果却不一样。而es6 引入了 Object.is() 方法来弥补这个缺陷,主要是针对 -0 和 +0 , 以及NaN === NaN 的处理。该方法只有在两个参数值和类型一样,才会返回true。比如 5 =...原创 2018-11-04 22:32:15 · 299 阅读 · 0 评论 -
javascript 中的立即调用函数模式、闭包及es6中的块级作用域
先来看一个在牛客上看到的面试题:这里一开始会以为是不就是隔1秒输出i的值吗,最后结果就是输出0~9 的十个数字呀,真的是太young了。但是真是撸了一遍代码,控制台输出刺眼的10个10,what?这个查了资料是说因为这个函数为每一个i都设置了一个计时器,那么就设置了10个计时器,但是它们被存放在队列中,for循环结束后setTimeout()函数才得以执行,而这时i的值为10,...原创 2018-10-28 15:40:33 · 490 阅读 · 0 评论 -
Vue项目中引入iconfont 图标库 和 图标显示成小方块的问题解决
这两天弄了个vue的小demo ,引入了iconfont 的图标,没想到是噩耗的开始,一直显示的是小方块,一步步排查踩坑把问题解决。首先看看官方对项目引入iconfont 的介绍。unicode引用unicode是字体在网页端最原始的应用方式,特点是:兼容性最好,支持ie6+,及所有现代浏览器。 支持按字体的方式去动态调整图标大小,颜色等等。 但是因为是字体,所以不支持多色。只...原创 2018-10-15 12:54:20 · 34493 阅读 · 5 评论 -
正则表达式进阶
常用术语和操作符1、精确匹配:除了非特殊 字符或操作符外,字符必须准确出现在表达式中。2、匹配字符集:匹配一组有限的字符集中的字符——[ ].比如[abc] 表示匹配 a、b、c 中的任一字符。[^abc]表示匹配a、b、c 以外的任意字符。限定范围: [a-m] 表示匹配按字母顺序从a到m之间的所有字符的集合3、转义: 用反斜线/ 表示转义;// 匹配一个反斜线4、起止符号:尖角...原创 2019-02-25 09:39:46 · 213 阅读 · 0 评论 -
样式属性命名——一种访问样式的简单方法
CSS样式名称和脚本中使用的名称之间存在差异,并且有些样式在不同的浏览器的表现是不一样的。CSS特性将多于一个单词的样式用连字符进行分割。JavaScript中可以使用带有连字符的样式名称,但是使用连字符就不能使用点运算符来访问样式:element.style.font-size ——这样是不被允许的。因此多个单词CSS样式名称作为属性名时,会转换为驼峰形式。 font-size 会转换为 fon...原创 2019-02-26 09:28:35 · 224 阅读 · 0 评论