javascript
关注
分享
扫一扫
文章平均质量分 59
张培跃吧
拥有十余年实际开发经验的骨灰级程序员！
资深IT培训讲师！
目前专注于web前端领域知识分享。
卫信工粽号:张培跃。
展开
-
JavaScript中的“??“: 空值合并运算符
在ECMAScript 2021 (ES12)中，引入了一个新的运算符：空值合并运算符（Nullish Coalescing Operator）。原创 2024-02-02 20:54:44 · 638 阅读 · 0 评论 -
总结：GET与POST请求方法有什么区别
发现很多前端小伙伴的简历当中都写有这么一句：了解http协议。其实大可不必，因为http是前端基础中的基础。这就相当于一位厨师的简历中写着：熟练使用炊具。原创 2022-12-15 14:54:01 · 1199 阅读 · 0 评论 -
记一道前端面试逻辑题：给定任意JSON数据，请实现方法提取数据字典，即将树状多级字段压缩为一级字段并提取其类型
给定任意JSON数据，请实现方法提取数据字典，即将树状多级字段压缩为一级字段(xx.yy.zz…)并提取其类型。要求：1.可上网查资料，但不要直接粘贴。（查也白查）2.代码结构清晰，执行结果正确const testData1 = { a:1, b:{ c:"test", d:{ userName:"xixi" } }, e:{ f:12, g:13, .原创 2022-05-13 20:26:18 · 958 阅读 · 1 评论 -
面试题：如何防止双击触发单击
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <button>点我</button></body><script> var btn = document.querySelector原创 2022-04-27 20:17:52 · 1036 阅读 · 0 评论 -
DOM案例-键盘控制人物行走
查看效果：https://qianduanmao.com/demo/dom/event/5.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>键盘事件控制人物行走-前端猫</title> <style> * { padding: 0; ...原创 2022-04-19 19:08:48 · 347 阅读 · 0 评论 -
JavaScript介绍及其特点
- 语言介绍在众多编程语言中，JavaScript绝对是一个极其特殊的存在！它的孕育期仅为10天，一出生就被冠以不正经语言的“美名”，并长期生活在大哥JAVA的阴影之下。后惨遭浏览器大战，亲爹网景战败，险些被遗忘！幸得ECMA团伙收养，自此开启了开挂的人生。不仅在语言排行榜上常年霸榜 ，更是获粉无数！随着Node.js的出现，以及Vue.js、Angular.js、React.js的蓬勃发展，JavaScript有了更大的舞台！若非命运多舛，谁愿意把自己弄得一身才华！自此感悟：孤独、寂寞、求败原创 2022-04-17 11:15:20 · 2566 阅读 · 0 评论 -
DOM案例-触壁反弹及多个小球的躁动
一、触壁反弹预览效果：https://qianduanmao.com/demo/dom/chicun/1.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>案例-触壁反弹-前端猫</title> <style> *{ padding:0;原创 2022-04-16 22:32:44 · 545 阅读 · 0 评论 -
DOM案例-省市区三级联动
省市区三级联动原创 2022-04-14 19:17:01 · 566 阅读 · 0 评论 -
DOM案例-结合CSS绘制钟表
DOM结合CSS绘制钟表原创 2022-04-13 18:21:02 · 421 阅读 · 0 评论 -
DOM案例-锅打灰太郎
类似于打地鼠的一个小游戏。原创 2022-04-12 19:31:08 · 769 阅读 · 0 评论 -
DOM综合案例-飞翔的小鸟
通过jsDOM完成的一个小游戏原创 2022-04-11 19:36:08 · 3643 阅读 · 0 评论 -
JSDOM案例：猜字游戏
通过JSDOM完成的猜字游戏，游戏规则：文字的颜色选择正确的文字原创 2022-04-10 18:05:53 · 3608 阅读 · 1 评论 -
前端如何实现token的无感刷新
> 大家都知道，用户初次打开客户端时，只是一介平民，毫无身份特权可言。当用户将正确的账号以及密码，呈递给服务端进行检验，待检验成功之后，服务器端便会亲手打造一个名为Token的令牌，并给予客户端。客户端自此便拥有了身份，也拥有了符合身份的资源请求权限……但，Token是有时间限制的！关于时间的设置不宜过长，这样不够安全。更不宜过短，这样会让用户频繁登陆，遭受吐槽！那有没有什么比较好的解决方案？有，通过无感刷新token！即token在更新时用户无感知，从而避免用户的频繁登陆。##### 关原创 2021-08-15 07:30:31 · 1827 阅读 · 1 评论 -
解析Axios原理之二：如何实现请求与响应的拦截
Axios拦截器在项目中所扮演的角色是非常重要的，它可以拦截每一次的请求和响应，然后进行相应的处理。经阅读其源码，不禁被作者的神级思维所折服！简直是将Promise用到了极致！1、声明一个用于拦截器管理的构造函数// 声明拦截器管理构造函数function InterceptorManager(){ // 用于存放Axios拦截行为及数据请求的Promise链条 this.handlers = [];}// 增加拦截器InterceptorManager.prototype.us原创 2020-11-08 14:54:06 · 1739 阅读 · 0 评论 -
助你解析Axios原理之一：如何实现多种请求方式
自从Axios成功打入Vue全家桶之后，便开始火的一塌糊涂！截止到目前，其在github上的star即将突破80k！可以说Axios是当下前端界最流行的ajax请求库，可（jue）能（dui）没有之一！即然Axios人气如此之高，那么阅读并研究它的源码也是非常有必要的，因为这样不仅可以让自己少走很多弯路，还会对作者多年的编程思想以及经验进行猎取，从中抽象出一些架构及模式性的高级内容，最终提高自己的实现能力和技巧，让自己变得更加强大！(啰嗦句：阅读源码的换确确可以提升自身的编码水平，但需要你拥有一定相关经原创 2020-10-22 10:07:24 · 1018 阅读 · 2 评论 -
前端javascript面试题：给定一个不重复集合，编写代码，能够输出其所有子集合
问题：给定一个不重复集合，编写代码，能够输出其所有子集合。例如对于输入集合[1,2,3]，返回以下集合，顺序不限：[ [], [ 1 ], [ 2 ], [ 2, 1 ], [ 3 ], [ 3, 1 ], [ 3, 2 ], [ 3, 2, 1 ]]答案：// function test(arr){// return arr.reduce(function (prev,next) {// return prev.concat..原创 2020-10-19 00:08:47 · 715 阅读 · 0 评论 -
json-server全攻略-前端必备技能
在项目的初始阶段，后端提供的接口或数据可能是不完整的，作为一名前端开发工程师，不可避免的要使用mock的数据。如果此时的你不想使用简单的静态数据，而是想自己在本地启动一个server来模拟请求相关的操作，那么json-server是一个不错的选择。json-serve可以帮助我们快速搭建一个mock-server本地服务，可以根据不同的后缀获取到不同的数据。一、准备工作1、安装Node由于json-server需要通过Node对其进行启动，所以首先要安装Node。Node可自行安装，在此不再进行.原创 2020-09-03 22:05:24 · 4382 阅读 · 1 评论 -
记录一道前端面试算法题
题目如下：解：const arr = [ {id: 1, pid: 0, title: "首页"}, {id: 2, pid: 1, title: "订单列表"}, {id: 3, pid: 1, title: "刊登管理"}, {id: 4, pid: 3, title: "刊登列表"}, {id: 5, pid: 3, title: "刊登设置"}, {id: 6, pid: 0, title: "登陆"},]// 1、修改数组：functio原创 2020-09-03 20:52:15 · 520 阅读 · 0 评论 -
[已解决]webpack异常：Uncaught ReferenceError: regeneratorRuntime is not defined
错误如下：原因分析：在程序中使用了 async/await ，经过@babel/preset-env 解析后会将代码转换为一个名为regeneratorRuntime的函数，但是转换后的代码仅仅存在这个函数的调用，并没有具体的定义体现。解决方案：1、安装@babel/polyfillcnpm install @babel/polyfill -D2、入口文件引入@babel/polyfillimport '@babel/polyfill';—————END—————分享结束！喜欢本文的朋原创 2020-08-24 10:48:42 · 3175 阅读 · 1 评论 -
通过jsonp解决跨域的源码实现及其特点
一、Jsonp的特点1、Jsonp是解决跨域的方式之一。2、Jsonp的核心则是动态添加3、Jsonp只支持get请求。4、Jsonp在调用失败的时候不会返回各种HTTP状态码。5、在请求完毕后通过调用callback的方式回传结果，将回调方法的权限给了调用方。所以在调用jsonp接口时，需要与被调用方协商好用于callback的参数名字，参数的值为函数名。例如cb=_jsonp1234。cb为双方约定好的参数名，_jsonp1234指定被调用方所要执行的函数名。所以调用方在调用前要保证已方拥有该函原创 2020-08-19 18:39:13 · 520 阅读 · 0 评论 -
javaScript代码飘红报错看不懂？读完这篇文章再试试！
天下武功唯快不破！若要快速解决项目开发过程中遇到的各种刁钻Error，首先要快速识破它的本质！而不是一味的依赖第六感去猜测，更不该盲目凭借自身的幸运值去不断尝试解决！本文虽不会帮你去逐一识破各种Error，但会给你一大体方向，希望对你当前的工作会有所帮助！一、本文将会出现以下英语词汇assignment[əˈsaɪnmənt] 赋值;分配assignment [əˈsaɪnmənt] 分配;任务call [kɔːl] 调用caught [kɔːt] 捕获;接住;截住;拦住;constru.原创 2020-08-13 21:09:11 · 677 阅读 · 0 评论 -
javascript的装逼优化技巧之惰性加载函数
天下武功唯快不破！编程也是同理！程序的优化，其实最终优化的是代码执行速度。而执行速度的提升往往是从很多代码细节当中不断堆砌出来的。相反，垃圾代码也是同理。程序优化的过程往往也是提升编程效率的一个有效捷径。今天为大家分享的是JavaScript当中的惰性函数。所谓惰性函数的重点就在这个惰字上，它是函数式编程应用的一种。由于它很惰，所以其只会在函数第一次调用时执行。如果在字面上不好理解，那么请细...原创 2020-03-07 17:03:50 · 424 阅读 · 1 评论 -
javascript总结：new操作符的本质
new 构造函数的执行流程：创建对象，并给予属性名为__proto__，值为构造函数原型（prototype）的属性。将构造函数的this指向为刚创建的对象。执行构造函数的语句。将创建的对象进行返回。function myNew (fun) { return function () { // 创建一个新对象且将其隐式原型指向构造函数原型 let...原创 2019-10-24 13:53:48 · 500 阅读 · 0 评论 -
2019前端必用正则表达式汇总整理——亲自验证，请放心使用！
医生的药方，道士的画符以及程序的正则表达式被尊誉为人世间的三大装逼神器！作为优秀前端的你，出门时怎能不拎几个正则？所以我在这里为大家精心准备了大把的正则，并亲自验证，放心拿去，不谢！1、 手机号：mobile/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/2、国内座...原创 2019-09-01 11:17:55 · 1172 阅读 · 0 评论 -
web前端知识点归纳笔记：关于浏览器内核的多线程机制
一、什么是浏览器内核浏览器内核即浏览器底层最核心和最基础的那一部分，它主要负责对网页当中的html、css、JavaScript进行解释然后在浏览器当中进行渲染最终呈现给用户，也就是说内核的工作就是渲染，所以我们常常把浏览器内核称为渲染引擎（Rendering Engine）也称为布局引擎（Layout Engine）、排版引擎。另外，由于不同浏览器的渲染内核不同，对 html、css、 J...原创 2019-03-12 14:18:29 · 291 阅读 · 0 评论 -
原生js模仿jQuery实现对Ajax的封装
老铁们，还记得如何对原生ajax进行封装吗？注释较少，看看是否还能看的明白？封装如下：function ajax(obj){ //指定提交方式的默认值 obj.type = obj.type || "get"; //设置是否异步，默认为true(异步) obj.async = obj.async || true; //设置数据的默认值...原创 2018-06-24 17:52:21 · 1230 阅读 · 0 评论 -
javascript总结：setTimeout模拟setInterval
setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔。setInterval(()=>{}, 1000);setTimeout(()=>{}, 1000);区别：setInterval在执行完一次代码之后，经过指定的时间间隔，执行代码，而setTimeout只执行一次那段代码。注意：假设s...原创 2019-08-14 22:31:45 · 705 阅读 · 0 评论 -
javascript总结：深拷贝与浅拷贝的实现
浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。我们希望在改变新的数组（对象）的时候，不改变原数组（对象）时需要使用深拷贝。1、浅拷贝实现原对象const obj = { siteName:"张培跃", i...原创 2019-08-08 18:50:29 · 618 阅读 · 0 评论 -
javascript中call()、apply()与bind()的区别及实现原理解析
由于call()、apply()与bind()都是属于Function.prototype对象下的方法，所以每个function实例都拥有有call、apply与bind属性。相同点：都是为改变this指向而存在的。异同点：使用call()方法时，传递给函数的参数必须逐个列举出来，使用apply()方法时，传递给函数的是参数数组。bind()和call()很相似，第一个参数是this的指向，...原创 2019-08-01 11:47:01 · 1752 阅读 · 0 评论 -
通过jsonp完美模拟百度搜索
话不多说，直接上代码！相信老铁们，都能看明白！注释就不加啦！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&原创 2018-07-04 21:01:27 · 515 阅读 · 0 评论 -
FormData使用方法详解
FormData的主要用途有两个：1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件一、创建formData对象1、创建一个空对象：//通过FormData构造函数创建一个空对象var formdata=new FormData();//可以通过append()方法来追加数据...原创 2018-07-16 21:41:35 · 2764 阅读 · 0 评论 -
JavaScript当中的this究竟是个啥？
对于JS的初学者而言，JS当中的this指向很难让人摸准其脉络，经常会给你一种模糊美、朦胧美的感脚！因为this并不是固定不变的，它会根据自身所执行的环境的不同而不同。而且在开发的过程中，经常因为对this的不了解出现这样或那样的错误！所以搞定this的指向是非常非常有必要的！与其它语言当中的this不同的是，我们JS当中的this总是指向一个对象。而具体是指向哪一个对象，则要看其运行...原创 2018-06-18 13:42:47 · 353 阅读 · 0 评论 -
JavaScript的变量及作用域(清晰版)
假如你没去过天安门、故宫、长城相当于你没到过北京。假如你搞不懂JS变量的作用域，相当于你没学过JS。关于JS变量作用域的重要性自己好好悟吧！提示：查看本文章记得看注释哦！JS是一门弱类型（松散型）的语言，这也就是说其天生就与众不同，独领风骚！ 在讲解变量作用域之前，我们先来了解一下JS中的变量。JS中的变量与其它语言有很大的不同，由于JS变量拥有松散(不强制)的本质，从而决定了其只是...原创 2020-02-18 19:30:26 · 395 阅读 · 0 评论 -
搞明白JavaScript中的匿名函数
匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！也是学好JS的重点。匿名函数：没有实际名字的函数。首先我们声明一个普通函数：//声明一个普通函数，函数的名字叫fnfunction fn(){ console.log("张培跃");}然后将函数的名字去掉即是匿名函数：//匿名函数，咦，运行时，你会发现报错啦！function ...原创 2018-06-09 23:11:00 · 10325 阅读 · 4 评论 -
关于JavaScript中的闭包及应用场景
对于前端开发工程师来讲，闭包是一个很难弄懂而且十分难征服的一个概念！因为闭包的生成不仅仅与变量的作用域相关而且与变量的生命周期也有着密切的关系。最后我可以肯定的告诉你，闭包在实际开发的过程中应用十分广泛，所以你必须要掌握它。先来看一下关于闭包的定义：闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。//通过闭包可以获得函数fn...原创 2018-06-16 00:18:34 · 492 阅读 · 0 评论 -
快速理解JavaScript中变量、常量与字面量
首先通过例子，来对三者有个大致了解，然后再分别对其进行解释！var a=1;//a为变量，1为字面量let b=2;//b为变量，2为字面量const str="zhangpeiyue";//str为常量，3为字面量变量变量是用于存储数据的容器，在程序的运行中可以发生变化或者被再次赋值。我们可以使用var关键字来声明变量，变量的值可以是任意类型。为了更好的阅读，建议...原创 2018-05-30 23:18:56 · 1772 阅读 · 0 评论 -
注意啦！Web Storage的用法都在这里了
Web Storage是HTML5中新增的除Canvas元素以外，非常非常重要的功能！没有之一！顾名思义，其就是在Web端存储数据的功能，当然这里的存储只是针对客户端本地而言的。Web Storage的优缺点：优点：存储空间更大。在IE下每个独立存储空间为10M，其它浏览器存储空间略有不同，但可以肯定的是至少要比cookie要大很多。存储内容不会与服务器发生任何交互...原创 2018-06-05 21:26:44 · 2374 阅读 · 0 评论 -
JavaScript数组创建及常见方法汇总
数组不仅仅在JavaScript中扮演着非常重要的角色，而且在其它的程序语言中的重要性也是不言而喻的。数组在面试的过程中被提及的频率是非常高的，同时JavaScript中的数组与其他语言中的的数组还是有些区别的。创建数组通过使用Array构造函数创建数组：/*************创建一个空的数组**************/var arr1=new Array...原创 2018-06-05 19:59:01 · 238 阅读 · 0 评论 -
数组方法map的使用及与forEach的比较
先来看一下对数组map()方法的定义：map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。大家要注意map在这里并不是地图的意思，确切的解释应该是映射！也就是说通过该方法你可以经过一些自己的逻辑处理，映射出来一个新的数组，而对原数组没有影响。 先来看一个示例，对arr的元素值乘以2，并生成一个新的数组newArr:var arr=[1,3,4,...原创 2018-09-03 19:56:49 · 747 阅读 · 0 评论 -
强大的JS方法Object.defineProperty详解及VUE.JS双向绑定原理
Object.defineProperty是一个很了不起的方法。vue.js之所以能够实现双向绑定便是拜它所赐！defineProperty直接翻译过来即是“定义属性”，不过该方法可不仅仅是定义属性这么简单，咱们还可以通过它来对属性进行拦截设置！我们知道对象是由多个键/值对组成的无序集合。对象当中的属性可以是任意类型的值。我们可以通过构造函数以及字面量的形式来定义对象。var obj={}...原创 2018-09-18 19:43:21 · 732 阅读 · 0 评论