
javascript系列
大个子小可爱
这个作者很懒,什么都没留下…
展开
-
函数的防抖和节流
一. 前言函数的防抖和节流是优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize,scroll,鼠标的mousemove,input的keypress等事件在触发时,会不断的调用绑定到事件上的回调函数,这样极大的浪费了前端资源,降低性能,为了优化体验,需要对这类现象进行调用次数的限制。二. 常用使用场景函数防抖的使用场景:高频连续的事件,只需要触发一次回调的场景inp...原创 2020-02-26 11:22:36 · 211 阅读 · 0 评论 -
js的事件循环机制Event Loop
一. 前言虽然js运行在浏览器中是单线程的,但是浏览器又是事件驱动 Event Driven的,浏览器中的很多行为都是异步的,会创建事件并放入执行队列中。浏览器通过事件循环 Event Loop来实现异步回调的。由浏览器新开一个线程去完成,一个浏览器至少实现三个常驻线程:js引擎线程GUI渲染线程事件触发线程CPU、进程、线程的关系计算机的核心就是:CPU,它承担了所有的计算任务...原创 2020-02-26 11:15:45 · 196 阅读 · 1 评论 -
数组的几个骚操作
一. 前言此篇文档主要从数组API方面记录一些骚操作二. 代码实现2.1 扁平化数组Array.flat(n)是ES10扁平数组的API,n代表维度,n为infinity时,代表无限大维度console.log([1, 2, 3, [4, 5]].flat(2)); // [1, 2, 3, 4, 5]console.log([1, [2, 3, [4, 5]]].flat(3)); ...原创 2020-02-26 11:14:36 · 228 阅读 · 0 评论 -
javascript原生从初级到高级汇总
一. 前言js知识的重要性不言而喻,一直暗戳戳想要系统的学习汇总一下js的相关知识,但是一直没有定下心来付诸行动,今天刚好看见一篇不错的文章,所以决定通过这篇文章记录一下学习成果。二. 函数部分函数的定义方式?参考链接:mdn function(1)函数声明function myfun() {...}(2)函数表达式var myFunction = function sort...原创 2020-02-26 11:13:32 · 284 阅读 · 0 评论 -
call-apply-bind浅析
一. 前言此篇文档主要用来对call,apply以及bind的学习成果进行汇总。bind是返回对应函数,便于稍后调用;call,apply则是立即调用。二. 先来学习一下call,apply在JavaScript中,call以及apply都是为了改变某个函数运行时的上下文(context),换句话说就是为了改变函数内部this的指向而存在的。JavaScript的一大特点就是,函数存在定...原创 2020-02-26 11:12:33 · 227 阅读 · 0 评论 -
关于Set对象的学习
关于Set对象的一些方法,自己本身也没有做过专门的研究汇总,所以,只是知道它是数组去重的好选择,自己平时在项目中也没有用过这个方法…趁着闲暇,搞一下,万一以后有用,也可以拿来即用!专业参考文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set1、数组快速去重经典例子...原创 2019-10-11 09:41:22 · 150 阅读 · 0 评论 -
forEach到底可以改变原数组吗
这几天在平时练习的时候,发现一个很匪夷所思的问题!就是我的印象中,forEach是可以改变原数组的呀!!!???,but !为什么现在这么简单的字符串数字组成的数组,咋就永远改不了原数组那???咋就这么费劲的吗???后来,在各种尝试无果后,硬是逼着我,无奈的打开了项目,我就想看看平时我都用的这么理所当然可以改变的forEach到底咋就可以改变了!后来,仔细一看,我一般在项目中数组操作...原创 2019-10-11 09:37:13 · 18458 阅读 · 8 评论 -
async/await的学习记录
在项目中,我们经常会遇到这样的需求:第二个接口请求的参数必须要等到第一个接口返回值回来,才能去请求第二个接口。也就是说:第二个函数的参数是第一个函数的返回值!通常遇到这种情况,我们都会想到使用Promise去处理这样的异步需求。因为之前知道除Promise外还有async/await,但是一直没有研究过,今天就来研究一下!async基础知识参考链接:https://juejin.im...原创 2019-10-11 09:35:08 · 313 阅读 · 0 评论 -
Jquery相关
1. http-serve的安装和使用http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs。在单个html页面以file://...文件地址路径运行时,当ajax请求接口出现跨域问题时候,可以使用http-server,提供服务去运行,类似于angular。安装:直接通过 npm i http-serve -g 进行全局安装。运行:进入项目路径,通过 h...原创 2019-10-09 14:38:17 · 94 阅读 · 0 评论 -
String object常用方法
String常用方法split:用指定的分隔符字符串将一个String对象分割成字符串数组var path = 'C:\fakepath\test.jpg';var pathArray = path.split('\\'); // ["C:", "fakepath", "test.jpg"]indexOf:返回string中第一次出现的指定值的索引,未找到该值,则返回-1"Bl...原创 2019-10-09 14:34:48 · 175 阅读 · 0 评论 -
promise学习记录
promise是一种通过代码看起来同步并避免回调地狱而大大简化异步编程的模式。promise详解参照一个promise只能 resolved 或reject一次,它不能成功或者失败两次,也不能从成功转成失败,反之亦然。promise,只要声明并绑定到变量,就会立即执行,为保证promise不是立即执行,需要将其封装到函数中。一. 创建promisevar promiseExampl...原创 2019-10-09 14:29:42 · 245 阅读 · 0 评论 -
JavaScript实用工具方法
1. 千分位格式化数字formatNum(num) { //千分位格式化数字 return num && num.toString().replace(/(?=(?!^)(\d{3})+$)/g, ',')}2. 字符串替换所有空格变量.replace(/\s+/g, '')var str = ' A B C D EF ';console.log(s...原创 2019-10-09 14:26:10 · 115 阅读 · 0 评论 -
ES6优秀写法汇总
ES6的重要改变包括:Arrow function(箭头函数)PromiseGeneratorlet 和 constClass(类)Module(模块)Multiline strings(多行字符串)Template literal(模板字面量)Default parameters(默认参数)The spread operator(展开操作符)Destructuring...原创 2019-10-09 14:23:44 · 1725 阅读 · 0 评论 -
Array常见方法
一. 数组常见方法汇总:includes:数组中是否包含指定的值,是则返回true,否则返回falsevar array = [1, 2, 3, 4, 5];console.log(array.includes(1)); //truesome:返回一个布尔值,数组中所有元素调用函数,只要有一个返回true,some立即返回true// 1.箭头函数console.log(array...原创 2019-10-09 14:18:39 · 251 阅读 · 0 评论 -
断点调试
一. 设置代码行断点chromeK开发者工具:ctrl + shift + i打开chrome的开发者模式。在 Sources 选项卡,点击代码行左边的行号,设置行断点,出现蓝色图标。代码行:直接在代码行中写入debuggerconsole.log('b');debugger;console.log('c');二. Breakpoints相关通过Brea...原创 2019-10-09 14:06:42 · 1058 阅读 · 0 评论 -
代码优化积累
一. 保持函数纯洁,函数操作后,不改变现有的对象// bad 改变了原有的对象!let temObj = {name:'wxw'};let merge = (target,...source) => { return Object.assign(target, ...source);}console.log(merge(temObj,{age:22},{sex:'男'}...原创 2019-10-09 13:57:01 · 150 阅读 · 0 评论 -
ES6数组的拓展方法
Array.from():从一个伪数组或可迭代对象中创建一个新的浅拷贝的数组实例伪数组对象:拥有一个length属性和若干索引属性的对象可迭代对象:Map、Set(1)字符串Array.from('apple') // ["a", "p", "p", "l", "e"](2)Mapconst map = new Map().set('name','wxw'); // Ma...原创 2019-10-11 10:42:42 · 182 阅读 · 0 评论