JavaScript
风中告退
唯有你自己内心的平庸,才是毁掉你人生的平庸。你内心的平庸,就是你失去追求卓越信念的那个瞬间。
展开
-
Generator函数暂停恢复执行原理
要搞懂函数为何能暂停和恢复,那你首先要了解协程的概念。一个线程(或函数)执行到一半,可以暂停执行,将执行权交给另一个线程(或函数),等到稍后收回执行权的时候,再恢复执行。这种可以并行执行、交换执行权的线程(或函数),就称为协程。协程是一种比线程更加轻量级的存在。普通线程是抢先式的,会争夺cpu资源,而协程是合作的,可以把协程看成是跑在线程上的任务,一个线程上可以存在多个协程,但是在线程上同时只能执行一个协程。它的运行流程大致如下:协程A开始执行协程A执行到某个阶段,进入暂停,执行权转移到协程B原创 2020-11-05 17:48:17 · 1102 阅读 · 5 评论 -
闭包解决var的索引缓存问题
for (var i = 0; i < 5; i++) { (function(j) { // j = i setTimeout(function() { console.log(new Date, j); }, 1000); })(i);}console.log(new Date, i);原创 2020-11-03 14:25:28 · 342 阅读 · 0 评论 -
JS数组去重的三个高阶玩法
…newSet()对于基本数据类型的数组去重,可以使用 …new Set() 来过滤数组中重复的值,创建一个只有唯一值的新数组.Array.from(new Set())Array的.filter及indexOf()注意,indexOf()方法将返回数组中第一个出现的数组项.这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当前索引进行比较,以确定当前项是否重复....原创 2020-10-26 22:52:49 · 188 阅读 · 0 评论 -
两种前端路由的原理之hash&history
路由的分类hashhtml5 api history为什么使用路由?SPA:single page application页面的地址栏跳转index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0.原创 2020-10-21 16:17:20 · 148 阅读 · 0 评论 -
addEventListener的第三个参数
DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数,分别为:事件名称(String)、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。DOM事件流如图(剪自javascript高级程序设计,懒的画了):由图可知捕获过程要先于冒泡过程当第三个参数设置为true就在捕获过程中执行,反之就在冒泡过程中执行处理函数。...原创 2020-10-21 16:00:43 · 838 阅读 · 0 评论 -
区分JS中的柯里化与偏函数
柯里化柯里化是将一个多参数函数转换成多个单参数函数。function add(a, b) { return a + b;}// 执行 add 函数,一次传入两个参数即可add(1, 2) // 3// 假设有一个 curry 函数可以做到柯里化var addCurry = curry(add);addCurry(1)(2) // 3偏函数(局部应用)偏函数则是固定一个函数的一个或者多个参数。function add(a, b) { return a + b;}原创 2020-10-17 14:44:47 · 324 阅读 · 0 评论 -
JS如何在不使用第三个变量的前提下交换已有的两个变量的值?
var a = 10;var b = 20;通过ES6的解构赋值var a = 10;var b = 20;[b, a] = [a, b];// a => 20// b => 10利用JS弱类型的特点var a = 10;var b = 20; a = [a, b]; // 让 a 变成数组b = a[0]; // 先取出 ba = a[1]; // 再覆盖 a利用计算(只能是Number, 并且有计算溢出的风险)var a = 10;var b原创 2020-09-25 15:56:20 · 1000 阅读 · 1 评论 -
带你彻底弄懂JS中的节流和防抖
首先,节流和防抖都是用于不断触发事件的情况,比如onscroll事件,如果不设置节流和防抖,当你绑定onscroll事件并设置事件处理函数,你滑动滚轮就会执行n多次的事件处理函数,造成性能损耗。节流和防抖有时候也会应用在input keydown事件,根据具体情况选择节流还是防抖。先简单解释一下节流和防抖的概念。节流:当你不断触发某一事件时,每隔一个固定时间,执行一次你想要执行的代码。(为防止频繁触发事件而执行n多次的代码)防抖:停止触发事件之后的固定时间间隔内不再触发事件,才执行一次事件处理原创 2020-08-28 20:59:43 · 1676 阅读 · 1 评论 -
前端学习笔记(23)之关于状态码
响应状态码+ 以一个数字表示本次请求的响应状态=> 成功: 创建成功, 删除成功, …=> 失败: 客户端失败, 服务端失败, …+ 是 100 ~ 599, 分成五类=> 100 ~ 199: 表示连接继续=> 200 ~ 299: 表示各种意义上的成功=> 300 ~ 399: 表示重定向=> 400 ~ 499: 表示客户端错误=> 500 ~ 599: 表示服务端错误常见状态码+ 101 表示连接继续+ 200 通用成功+ 302原创 2020-08-25 20:18:32 · 140 阅读 · 0 评论 -
前端学习笔记(22)之JS中用逻辑与逻辑或来赋值
一、“||” 逻辑或逻辑或是“吐真”,第一个真不真,第二个真不真,直到遇到真的值返回,如果比对到最后也没有真值,那么没办法,返回最后一个值一个例子:后边的{}是为了保底,保证一定有个真可以吐var data = res.data || {};二、 “&&” 逻辑与逻辑与是“熔断”,第一个断不断,第二个断不断,一直比对,直到断了为止,如果都没断,比到最后了,显示最后一个值一个例子:可以取代if做熔断,如果第一个就断了,后边的值就不执行,返回false,如果第一个值不断,则&转载 2020-08-19 22:22:43 · 590 阅读 · 0 评论 -
前端学习笔记(21)之JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)st原创 2020-08-19 22:15:39 · 790 阅读 · 0 评论 -
前端学习笔记(20)之JS中箭头函数的this指向问题
先说一下普通函数的this指向,判断普通函数的this指向,不需要考虑函数的定义环境,只需要考虑函数的调用,谁调用的函数,谁就是该函数的this。关于ES6中的箭头函数,官方的解释是:箭头函数里面的 this 是 上下文(context), 外部作用域的 this 就是箭头函数内的 this。判断箭头函数的this:技巧:它的外层没有函数,this是window。外层有函数,看外层函数的this是谁,它的this就是谁。(外层函数可能是常规函数可能是箭头函数,判断外层的this要根据函数种类用不原创 2020-08-19 20:50:44 · 442 阅读 · 0 评论 -
前端学习笔记(19)之call()、apply()、bind()的三个方法的区别
!call()apply()bind()call()语法:fn.call()obj.fn.call()参数:第一个参数, 就是函数内部的 this 指向第二个参数开始, 依次给函数传递参数特点:会立即执行函数(不适合用作定时器处理函数或者事件处理函数)作用:伪数组借用数组方法apply()语法:fn.apply()obj.fn.apply()参数:第一个参数, 就是函数内部的 this 指向第二个参数: 是一个数组或者伪数组都行, 里面的每一项依次给函数传递参数特点:原创 2020-08-19 20:37:47 · 302 阅读 · 0 评论 -
前端学习笔记(18)之原生JS数据渲染之购物车案例
关于数据渲染的知识点总结模板字符串捕获数据渲染数据 ->bindHTML()下拉刷新 ->window.oncroll = function(){}添加商品到购物车 ->addCart()模板字符串使用模板引擎可以帮助我们更加快速的渲染页面,需要引入第三方的js文件来使用,习惯了语法还是很方便的。常见的模板引擎 ?=> art-template, 前后端都可以用=> underscroll, 后端 JS 不能用=> e.js, 后端 JS 不能用=>原创 2020-08-16 22:40:51 · 624 阅读 · 0 评论 -
前端学习笔记(17)之QuickSort、InsertionSort 及JS的24个数组方法合集
快速排序、插入排序、数组方法QuickSortInsertionSortArray MethodsQuickSort递归二分排序(快速排序)原理:之所以用递归是因为要不断分解数组直到原数组为空,递归结束条件就是arr.length<1,即分解完全部数组内全部元素。运用的分治算法的思想。被重复的操作就是:不断的取中间元素,然后遍历数组,小于中间元素的放左边,大于中间元素的放右边。通过这个操作分出了两个数组,再对这两个数组进行之前的操作,不断分出来数组,对每个数组都执行之前的操作来分解,直到分原创 2020-08-07 17:36:35 · 298 阅读 · 0 评论 -
前端学习笔记(16)之BubbleSort、SelectionSort、CountSort
冒泡、选择、计数 排序BubbleSortSelectionSortCountSortBubbleSort双层for循环,一层减一次。里层减外层,变量相交换。 var arr = new Array(45, 65, 12, 48, 23, 18, 89) for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - 1 - i; j++) {原创 2020-08-05 21:45:06 · 269 阅读 · 0 评论 -
前端学习笔记(15)之JS中Number和String的相互转换
a标签里的herf写javascript:是为了区分跳转链接还是执行javascript代码。document.write 可以解析标签。alert()的弹出会阻断程序向下执行。单引号 双引号 反引号 里面的都算是字符串。Number()能转成数字就转,不能就返回NaN。parseInt()一位一位解析,保留可以转数字的部分。不能转返回NaN。不认识小数点。比如true ,Number会把它转为1 ,parseInt会转为NaN。parseFloat()和p..原创 2020-08-03 17:35:17 · 993 阅读 · 0 评论 -
前端学习笔记(14)之详解数据_变量_内存
JS basical knowledge数据内存变量三者之间的关系Depressed emotion数据什么是数据?存储在内存中代表特定信息的东西,本质上是二进制的数字1010…数据的特点:可传递、 可运算内存什么是内存?内存条通电后产生的可存储数据的空间。(临时的)内存产生和死亡:内存条(电路板)–>通电 -->产生内存空间 -->存储数据并对数据进行处理 -->断电 --> 内存空间和数据都消失。一块小内存的两个数据内部存储的数据地址值原创 2020-08-01 12:23:09 · 338 阅读 · 0 评论 -
前端学习笔记(13)之JavaScript数据类型的概念及判断
JS basical knowledge值类型和引用类型判断基本类型typeof判断对象的具体类型instanceof全等===关于数据类型的相关问题每日情感值类型和引用类型数据(值)类型值String任意字符串Number任意数值Booleantrue/falsenullnullundefinedundefined对象(引用)类型值Object任意对象function特别的对象,一种可以执行的对象Array原创 2020-08-01 11:15:17 · 316 阅读 · 0 评论 -
前端学习笔记(1)之解析rel:nofollow及一些零碎知识点
a标签中的rel:nofollownofollow是HTML元标签(meta)的content属性和链接标签(a)的rel属性的一个值,告诉机器(爬虫)无需追踪目标页,为了对抗blogspam(博客垃圾留言信息),Google推荐使用nofollow,告诉搜索引擎爬虫无需抓取目标页,同时告诉搜索引擎无需将的当前页的Pagerank(网页级别、网页排名)传递到目标页。但是如果你是通过sitemap直接提交该页面,爬虫还是会爬取,这里的nofollow只是当前页对目标页的一种态度,并不代表其他页对目标页的态度原创 2020-07-21 21:31:06 · 599 阅读 · 3 评论 -
深入理解JS原型与原型链
函数的prototype1.函数的prototype属性*每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为原型对 象)原型对象中都有一个属性constructor,它指向函数对象。2.给原型对象添加属性(一般是方法)作用: 函数的所有实例对象自动拥有原型中的属性(方法)显式原型与隐式原型每个函数function都有一个prototype,即...原创 2020-04-28 16:58:32 · 256 阅读 · 1 评论