
JS
前端小峰
本人热爱编程,以前端为端口完善自己的技术栈,一起成长,一起见证。
展开
-
【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面
最近在做官网,首先想到用这个EJS,有句话怎么说的,万物都可以ejs,是吧!1、ejs特点:快速编译和渲染简单的模板标签自定义标记分隔符支持文本包含支持浏览器端和服务器端模板静态缓存支持express视图系统2、ejs常用标签:写ejs基本上都要用 <% %>包起来,这是语言规则<% %> 流程控制标签 ,for循环,if else等<%= %> 输出内容标签 text文本内容,像v-text的能力<%- %>输出.原创 2021-11-17 18:29:33 · 1040 阅读 · 0 评论 -
【多个文件引入】手写一个require.context的方法
这个方法并不是require,js上面的一个方法,而是v也在node的环境自己封装了一层,那么我们也可以自己实现一下,常常用来多文件引入directory:要搜索的文件夹目录useSubdirectories:是否还应该搜索它的子目录regExp:一个匹配文件的正则表达式if (typeof require.context === 'undefined') { const fs = require('fs'); const path = require('path'); req.原创 2021-11-08 15:16:51 · 470 阅读 · 0 评论 -
【git指令】git删除本地分支和远程分支,*学会了这个你就是git大牛*
分支多了,我们就要删除了,对吧,如果大家需要创建,那我给你一个传送门吧,写的特别好快速新建分支删除本地、远程分支1、切换一个非删除的分支git checkout otherBranch2、删除本地分支git branch -d deleteBranch3、删除远程分支git push --delete origin deleteBranch4、查看有没有删除git brnach -a这个可以了解下,不要求背下来,下课...原创 2021-07-22 11:12:06 · 205 阅读 · 0 评论 -
【git指令】git快速创建本地分支和远程分支并关联,*学会了这个你就是git大牛*
最近我一直探索怎么样两行命令创建新分支,并且同步到远程分支一、创建本地、远程分支并关联1、本地切一个新分支git checkout -b newBranch2、创建 远程分支并关联git push --set-upstream origin newBranch:newBranch之前我们需要执行两行命令git branch --set-upstream-to=origin/newBranch newBranchgit push --set-upstream origin newBra.原创 2021-07-22 11:05:42 · 242 阅读 · 0 评论 -
【前端JS】promise多任务高并发处理
代码class PromisePool { constructor(max, fn) { this.max = max; //最大并发量 this.fn = fn; //自定义的请求函数 this.pool = []; //并发池 this.urls = []; //剩余的请求地址 this.callback = callback; } start(urls) { this.urls.原创 2021-07-14 20:21:49 · 1803 阅读 · 3 评论 -
【前端JS】生成 PDF并写入到文件夹,最后压缩下载
背景: 因为后端的同学比较忙,没时间接这个需求,但是这个又急的用,哎呀,还是想到我们前端,所以我们前端还是牛plus。这个实现呢,我之前也只是听过,没有自己去做,今天我们一起探讨下这个一长串的需求拆封任务需要生成的PDF页面编写 --> 生成多个PDF 并写入到文件夹 -->压缩并下载实现步骤1、需要生成的PDF页面编写上图页面左侧是操作区域 ,右侧是展示区域。在展示区域的跟标签加一个id标识(便于后期生成PDF)2、生成多个PDF ,并写入到文件夹在promise多..原创 2021-07-14 20:03:16 · 1508 阅读 · 6 评论 -
【前端js】xlsx插件时间转换‘xxxx-xx-xx’给我转成了五位数,咋整,我来帮你转回来吧~
背景: 最近做xlsx文件读取的时候,时间给我转成了五位数,我懵懂了,最后还是解决了,下面分享下我的方法根据度娘得知Excel存储的日期是从1900年1月1日开始按天数来计算的,也就是说1900年1月1日在Excel中是1。所以我们用new Date(xxx)的时候一直是1970年什么的。如果我们算出这边的一个差值就可以把这个问题处理了export function formatePDFData(date) { let d = new Date(); d.setTime(Math.round.原创 2021-07-14 18:08:53 · 923 阅读 · 0 评论 -
js算法 找到字符串中的最长连续字符串长度
这样的算法不陌生吧,但是有没有更好的方式呢,可以一起交流下,这个好像是滴滴的一个简单算法题题目:给出一个字符串,找出最长不连续字符串的长度是多少解体思路:上来就是遍历,然后就是把数组没有的数据放进去,如果有的,就把之前的一个数据到第一个都去掉,最后找最大值var lengthOfLongestSubstring = function(s) {let arr = [], max = 0for(let i = 0; i < s.length; i++) {let index = arr..原创 2021-03-18 09:49:47 · 1469 阅读 · 0 评论 -
js对象diff判断
function deepEqual(object1, object2) { const keys1 = Object.keys(object1); const keys2 = Object.keys(object2); if (keys1.length !== keys2.length) { return false; } for (const key of keys1) { const val1 = object1[key]; const val2 = o原创 2020-12-10 10:50:54 · 1379 阅读 · 0 评论 -
js 替换数组对象的属性名
我们第一时间就想到用JSON.parse的形式,但是这种不是很合理法一:用基础的遍历办法(针对已知的替换)const jobList = [ { name: 'Tom', work: 'FE engineer' }, { name: 'Tiny', work: 'Accounting' }, { name: 'Bob', work: 'Chief' }]function changeKeys(list){ list.forEach(elem => {.原创 2020-10-29 11:24:43 · 3417 阅读 · 0 评论 -
js之数组降维且flat源码(百度面试)
我们待会些flat源码,先分析下数据降维我们怎么去处理?法一 用flat方法let ary = [1, [2, [3, [4, 5]]], 6,{name:1}];console.log(ary.flat(Infinity)) // flat不会改变原来数组法二: 用join+splite方法 (只针对基本数据类型)let ary = [1, [2, [3, [4, 5]]], 6, 'sss'];console.log(ary.join(',').splite(',')) // fla原创 2020-09-12 20:16:44 · 668 阅读 · 0 评论 -
js 求数组中出现最多的一个元素(字节面试)
function findMost(arr) { if (!arr.length) return if (arr.length === 1) return arr[0] var res = {} // 遍历数组 for (var i=0,l=arr.length;i<l;i++) { if (!res[arr[i]]) { res[arr[i]] = 1 } else { res[原创 2020-08-27 18:23:01 · 465 阅读 · 0 评论 -
js 把烤串命名转换为驼峰命名(快手面试题)
1、用普通的方法function transformStr ( str ) { if(str == '') { throw new Error('不符合规范') } var arr = str.split('-');//split是分隔字符串 var newStr = arr[0]; for(var i = 1; i<arr.length; i++){ newStr += (arr[i].substr(0,1).toLo.原创 2020-08-26 19:46:13 · 2854 阅读 · 0 评论 -
js 数字转换为金钱格式(快手面试)
法一:用toLocalString()function toMoney(num, decimal){ num = num.toFixed(decimal); num = parseFloat(num) num = num.toLocaleString(); return num;//返回的是字符串23,245.12保留2位小数}console.log(toMoney(-98654.3))用正则匹配function transMoney(num, decimal) { var n原创 2020-08-26 11:03:16 · 2669 阅读 · 1 评论 -
JSON.parse(JSON.stringify(obj))实现深拷贝的坑
说到JSON.parse(JSON.stringify(obj)),真的是太多的坑了,主要是这个坑你不知道你就完了,这个面试经常被问到,除了把深拷贝的源码写出来就是问JSON.parse(JSON.stringify(obj))的坑了,今天就谈一谈这个该死的坑其实JSON.parse(JSON.stringify(obj))简而言之就是stringify部分把它冰冻起来,然后pasrse部分给他解冻罢了,但是有些精华的部分就被丢失了。那今天主要找一下那些东西容易被丢失,是蛋白质还是脂肪还是无机盐???.原创 2020-08-24 19:45:38 · 820 阅读 · 0 评论 -
JS 防抖、节流
为什么需要防抖节流?如果你了解了,那么你就会经常用,不了解,你就基本上不会用,这个在前端还是很普遍的。针对一些会频繁触发的事件如scroll、resize,按钮点击、输入框监听实时刷新,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能,所以我们可以通过防抖和节流去控制其频率1、防抖(debounce)防抖动:将几次操作合并为一此操作进行。原理:维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样原创 2020-08-12 17:23:55 · 174 阅读 · 0 评论 -
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
面试题:static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?面对突如其来的三联问,真的一口老血喷出来,快收回去,这个很好理解1、static全局变量与普通的全局变量有什么区别?存储方式:两个声明变量的存储都一样,静态存储方式作用域非静态的全局变量作用于整个程序,当一个源程序由多个源文件组成时,非静态的全局变量在每个文件都有效,但是静态的全局变量在本文件有效,其他文件无效2、static局部变量和普通局部.原创 2020-08-10 15:49:59 · 338 阅读 · 0 评论 -
js将粘贴复制的纯文本(去掉样式标签)
在我们操作富文本的内容是,标签是div,设置可编辑的状态,我们需要取粘贴的纯文本内容,那我们怎么处理?别怕,一起整起来<div class='paste_content' contenteditable=='true'></div> $(".paste_content").on("paste", function (event) { textPaste(event)}); function textPaste(event) { event.preven.原创 2020-08-10 14:47:22 · 5134 阅读 · 2 评论 -
js数据类型(基本数据类型 | 引用数据类型)
一、数据类型JS分两种数据类型:基本数据类型:**Number、String、Boolean、Null、 Undefined、Symbol(ES6),**这些类型可以直接操作保存在变量中的实际值。引用数据类型:Object(在JS中除了基本数据类型以外的都是对象,数据是对象,函数是对象,正则表达式是对象)1、基本数据类型(六种)存放在栈中基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,它们是直接按值存放的,所以可以直接按值访问1、Number数值类型Num原创 2020-08-06 16:46:45 · 13271 阅读 · 5 评论 -
js 变量提升与函数声明提升
js中变量的处理机制,你是否想了解下,想的话上车!!!在聊到变量提升的时候,我们先聊下LHS和RHS1、LHS、RHSjavascript中两种查找类型,含义是赋值操作的左侧和右侧LHS: 对那个赋值对那个进行LHS引用,可以理解为赋值操作的目标 如:a = 2,如果找不到在非严格模式会声明一个全局变量RHS: 需要获取那个变量的值,就对哪个变量进行RHS引用,理解为赋值操作的源头,如果找不到对应的标识符,就会抛出异常:ReferenceError简单的讲:赋值就是LHS,找值就是RH原创 2020-08-06 16:37:36 · 241 阅读 · 0 评论 -
堆栈和队列的运用
1、 栈栈是一种 LIFO(Last-In-First-Out, 后进先出)的数据结构,也就是先进后出的理念,而栈中项插入(叫做堆入)和移除(叫做弹出),只发生在一个位置 --栈的顶部,我们可以把栈想象为一个开口向上的容器,如图所示:存入数据,栈的变化:最开始的时候栈中不含有任何数据,叫做空栈,此时栈顶就是栈底,然后数据从栈顶进入,栈顶和栈底分离,整个栈的当前容量变大;数据出栈时,数据从栈顶弹出,栈顶下移,整个栈的容量变小push和pop实现栈的行为:push 操作实现了在栈顶原创 2020-07-22 14:31:52 · 617 阅读 · 0 评论 -
js 声明对象5大方法
1、内置函数var obj=new Object(); obj.name="Mark"; obj.age= 12; obj.say = function(){ console.log(this.name + this.age); } console.log(obj); obj.say();2、字面量var obj = { name: "Mark", age: 12, say:function(){ console.log(thi原创 2020-07-20 22:53:14 · 1683 阅读 · 0 评论 -
js 七大继承--史上最全最易懂
js是面向对象的一门语言,对象的特性就是封装,继承和多态,那么我们聊聊继承。继承有很多的方法。法一:原型链继承原理:JS是基于原型的语言,利用原型让一个引用类型继承另一个引用类型的属性和方法。让新实例的原型等于父类的实例var Animal = function(name) { this.name = name this.say =function() { console.log('哇哇哇哇!') }} var Dog = function() {}Dog.prototype原创 2020-07-20 22:24:57 · 273 阅读 · 0 评论 -
HTML和JS处理打开窗口
1、在当前窗口打开:可后退html:<a href="url" target="_self"></a>js:window.open("url","_self")2、在当前窗口打开,禁止后退js:location.replace("新url");3、在新窗口打开,只能打开一个html:<a href="url" targrt="自定义窗口名"></a>js:window.open("url","自定义窗口名")4、在新窗口打开,.原创 2020-07-14 22:34:56 · 245 阅读 · 0 评论 -
js 给电话号码加密,用****
在很多的开发情况中,我们需要保护用户的电话信息,需要对用户的电话号码进行加密,那么我们就需要操作字符串1、用普通api做下面的任何一个方法都行function getPhone(phone){ // return (phone.slice(0,3) + '****' + phone.slice(-5,-1)) // return (phone.slice(0,3) + '****' + phone.slice(7,11)) // return (phone.slice(0,3) +.原创 2020-07-12 21:46:50 · 3094 阅读 · 0 评论 -
js slice、splice、substr、substring看这个就全明白了
处于初级的小伙伴是不是这个有点摸棱两可的,处于中级的小伙伴是不是有点忘记了这些方法呢,今天我们一起梳理一下1、 slice操作对象:string和array特点:截取数组或者对象,但是不改变原来的内容,返回的为截取的内容语法:str.slice(start, [end])start:必选参数,截取的初始位置(包含此位置),从零开始计数end:非必选参数,截取的结束位置(不包含此位置)注意:!!!没有选择end时,默认从start位置截取到尾部,还有就是参数可以为负数,-1表示在操作.原创 2020-07-12 21:39:20 · 425 阅读 · 0 评论 -
js的client系列、offset系列、scroll系列详细分析
一、 client系列1、clientWidth和clientHeight表示可视区域的高度(其中只有padding包含在里面,其他的border、margin、滚动条都不包含)存在垂直滚动条:contentWidth + padding - scollbarWidth不存在滚动条:contentWidth + padding2、clientTop和clientLeft表示边框的宽度,指的是border,有滚动条就包含滚动条scrollbarWidth = (co原创 2020-06-30 11:37:45 · 581 阅读 · 0 评论 -
JQuery实现电梯导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>电梯导原创 2020-06-30 11:25:44 · 519 阅读 · 0 评论 -
js 去重的6大类方法(史上最全、简单、适用)
在工作中对于去重的例子真的太多了,面试也会经常被问到,这个真的频繁了,我整理了这些方法分享给大家,希望大家根据自己的实际场景运用。1、ES6的Set(这个最简单)var list = [ 1,2,1,{name:1},{name:1},null, NaN,0,0,{},'','',[1],[1],null, undefined, false,9, undefined,'true','false','true']console.log(Array.from(new Set(list))).原创 2020-06-23 15:32:44 · 1571 阅读 · 0 评论 -
二维数组数据变成一维数组
在处理多数组组合时,经常要拼接成一个数组,今天我们一起聊聊数组的转变,主要聊聊二维变一维吧1、用es5的reduce和concat组合var list = [ [111,222,3333,444], [555,666,777], [888], [999,1213]]var lists = list.reduce((a,b) => a.concat(b))console.log(lists)输出结果:2、用ES6的flat扁平处理var list = [.原创 2020-06-18 16:18:35 · 7743 阅读 · 1 评论 -
js new会经历那些
(1)创建一个空的对象;(2)把空对象的__proto__指向构造函数的prototype(this指向新对象)(3)执行构造函数中的代码(为这个新对象添加属性)(4)return出新对象this指向改变:Base.call(obj)...原创 2020-06-15 18:02:22 · 158 阅读 · 0 评论 -
js 伪数组转真数组的方法全集
什么是伪数组?故名思意,长得像数组,但是没有数组的方法,也叫类数组。具有length属性;按照索引方式存储数据;不能调用数组的push,pop等方法比如在document.getElementsByTagname、document.getElementsByClassName、document.childNodes、document.querySelectorAll、argument存在这种数组如何转换成真数组?1、原型的方式Array.prototype.slice.call(原创 2020-06-15 11:21:43 · 375 阅读 · 0 评论 -
js Array.map的用法
在js中,上次聊到了Map的语法结构,今天聊聊Array.map,这个用法我们在框架react用到的特别多,当然我们在vue中合理的用到也是一个很好的‘利器’,因为这个支持返回值,可以利用这个对我们的数据进行新的生成,会把你操作的内容进行重新的添加到指定数组中操作结果当然我们在开发过程中,后台给到的数据特别多,我们需要对某些数据进行转化,比如:状态、时间戳等结果为:...原创 2020-06-12 10:00:47 · 1686 阅读 · 0 评论 -
js Map 类型转换
map的类型转换 (map是键控集合keyed collections)1、Map类型转换为数组类型法一:用...rest运输符const map = new Map([['name','Tom'],['age':18]])const arr = [...map] 输出结果:法二:用Array.formconst map = new Map([['name','Tom'],['age':18]])const arr = Array.form(map)输出结果:注意.原创 2020-06-01 11:21:33 · 2323 阅读 · 0 评论 -
Javascript的Map的基本用法
JS中Map的用法1、声明一个空的Mapvar map = new Map()我们看一下这样的一个新的js知识点会有那些东西,一般会选中在控制台打印出来。我已经帮大家打印好了直接求这个map的长度,直接可以通过size就可以拿得到了,要用方法在__proto__这个原型里面2、声明一个自定义的Mapvar map = new Map([['name','Tom'],['age',18]])注意:这里定义的[]中都是用,的形式存入3、插入值到mapmap.set('key'原创 2020-06-01 10:28:52 · 4705 阅读 · 0 评论