![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
养基赚钱
这个作者很懒,什么都没留下…
展开
-
Es6
Es6常用includes'abc'.includes(a) //true['a','b'].includes(a) //true函数可以赋予初始值function log(x, y = 'World') { console.log(x, y);}log('Hello') // Hello World函数参数的单独作用域let x = 1;fun...原创 2019-08-22 17:11:34 · 100 阅读 · 0 评论 -
js常用原生方法的实现
// myNewfunction myNew(fn,...args){ let obj = {} let res = fn.apply(obj,args) obj.__proto__ = fn.prototype return res instanceof Object ? res : obj}function myall(arr){ return...原创 2019-07-23 19:02:56 · 185 阅读 · 0 评论 -
async/await分析和实现
如何理解asyncasync的原理就是将generator和自动执行函数包装在一个函数里面,generator手动调用next直到return,而async则是自动执行async 通过自动执行函数返回的是一个Promiseasync function test(){ return Promise.resolve(1)}test().then( val => consol...原创 2019-07-12 14:59:54 · 1319 阅读 · 0 评论 -
继承方式
JS继承的方式构造函数方式五种function Sup(){ this.name = 'father'}function Sub(){ this.age = 13}构造函数绑定function Sub(){ Sup.call(this,arguments)//Parent中Children的实例.name = 'father'实现继承 this.age = 13...原创 2019-07-23 16:48:08 · 62 阅读 · 0 评论 -
JS知识点
js部分不借助第三者交换a,b的值[a,b] = [b,a]new的实现过程function myNew(fn,...args){ var obj = {} let res = fn.call(obj,args) obj._proto_ = fn.prototype return res instanceof Object ? re...原创 2019-07-11 23:11:47 · 60 阅读 · 0 评论 -
关于回流
关于回流引起因素1 集合属性变化2 及时获得DOM元素的位置ffsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight减少回流的方法1 设置classNam...原创 2019-07-15 23:01:07 · 217 阅读 · 0 评论 -
RAM和ROM
RAM就是电脑的内存RAM:(用来运行程序)1 SRAM(静态存储,CPU读取非常快)2 DRAM(动态随机存储器,通常说的电脑内存指的就是dRAM)软件占用内存过大可用做cache的内存变少,响应的Io就受影响CPU从内存读取数据慢,就引入的cache,把预先要读的数据放入cache,这样读取的时候速度变快cache:分为L1 L2 L3L1: SR...原创 2019-07-15 22:44:59 · 188 阅读 · 0 评论 -
由输入url来构建知识体系
由输入url来构建知识体系浏览器是多进程,包含那些进程browser进程GPU进程插件进程浏览器渲染进程(即浏览器的内核,每个Tab也就是一个进程)browser进程作用负责浏览器界面的显示,用户的交互,前进后退等负责管理各个页面,创建以及销毁负责网络资源的管理和下载输入URL主进程(browser)做了什么查询过程1 主进程的UI线程判断输入的是URL还...原创 2019-07-15 22:44:29 · 90 阅读 · 0 评论 -
GET和POST区别
GET和post真正区别?1、首先明白get和post本质上是没有区别,只是HTTP规定和浏览器/服务器的现在,导致有些不同如:GET有请求长度限制(数据量太大对浏览器和服务器都是很大负担),post没有get、post都是HTTP协议中发送请求的发方法HTTP:基于TCP/IP关于数据如何在万维网中如何通信的,HTTP的底层是TCP/IP所以get、post都是TCP链接,二者能做...原创 2019-07-23 22:19:17 · 85 阅读 · 0 评论 -
前端工程化
webpack工程化提高构建速度webpack4缩小搜索extention范围,强制后缀dll减少大小分析资源图按需加载做了哪些优化debounc和throttle尽量采用受控组件redux-thunk和redux-saga选型问题?老大考虑到团队成员学习的曲线,最终选择thunk为了更方便团队人员使用,封装直接的thunk,和cobineReducer为什...原创 2019-07-24 16:18:17 · 109 阅读 · 0 评论 -
sleep
const sleep = (time) => { return new Promise(resolve => setTimeout(resolve, time))}sleep(1000).then(() => { // xxx})原创 2019-07-29 16:49:42 · 159 阅读 · 0 评论 -
箭头函数
没有this无法new不能使用arguments不能使用yield不适合使用箭头函数的地方对象中const cat = { lives: 9, jumps: () => { this.lives--; }}动态thisvar button = document.getElementById('press');button.addEve...原创 2019-08-08 11:06:17 · 88 阅读 · 0 评论 -
原生js实现ajax请求
XHRvfunction createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeof arguments.callee.activeXString !=...原创 2019-07-27 19:27:52 · 141 阅读 · 0 评论 -
深拷贝
真正实现深拷贝function deepClone(param){ if(!isObject(param)) return param; let cloneVal = isArray(param) ? [] : {} for(let key in param){ cloneVal[key] = isObject(param[key]) ? deepCl...原创 2019-07-27 11:20:56 · 90 阅读 · 0 评论 -
sse
web workers sse websocketweb workers: 单独开一个线程,进行大量数据的处理sse(Server-sent Events)参考文章:https://mp.weixin.qq.com/s?__biz=MjM5MDI3MjA5MQ==&mid=2697266556&idx=1&sn=7115ba3d95e96192892...原创 2019-08-03 19:58:50 · 395 阅读 · 0 评论 -
删除数组中出现次数最小的字符串
function deleteLess(str){ let obj = {} for(let idx in str){ if(obj[str[idx]]) obj[str[idx]]++ obj[str[idx]] = 1 } let keys = Object.keys(obj) let valuses = Object.v...原创 2019-07-21 22:42:45 · 225 阅读 · 0 评论 -
object.create()
// create只有原型对象上的属性function create(obj){ function fn(){} fn.prototype = obj.prototype return new fn()}// new产生的对象,即有构造函数的属性,也有prototype上的属性function mynew(fn){ let obj = {} fn...原创 2019-07-21 15:51:35 · 162 阅读 · 0 评论 -
after
let count = 0; // after(3,log)('hi')这种用法count = 0只能放在这里function after(times,callback){ //var log = after(3,log) //log(1) 这种用法,count = 0只能放在这里核下面都一样 let count = 0; return function(......原创 2019-07-21 11:15:28 · 337 阅读 · 0 评论 -
前端100
Object mapconst data = {};const element = document.getElementsByClassName('App');data[element] = 'metadata';console.log(data['[object HTMLCollection]']) // "metadata"Object: 字符串-值Map: 值-值...原创 2019-07-25 09:51:43 · 96 阅读 · 0 评论 -
new与apply
newfunction myNew(fn,args){ var obj = {} obj.__proto__ = fn.prototype //创建实例的时候传参 var res = fn.apply(obj,args) //当构造函数有return时,返回return值,没有则返回obj{} return res instanceof Objec...原创 2019-07-29 17:16:52 · 241 阅读 · 0 评论 -
Typescrip用法总结
typescirpt高级用法type类型type Test = Exclude<1|2|3,2> //Test只能为1或2type Test = Pick<1|2|3,2|3> //Test只能为3或2type Test = Extract<1|2|3,2|3> //Test只能为3或2...原创 2019-07-15 22:42:06 · 133 阅读 · 0 评论 -
React源码-setState
setState调用过程setState->this.updater.enqueueSetState->scheduleWork->requestWorkenqueueSetStateconst classComponentUpdater = { ... enqueueSetState(inst, payload, callback) { // 获取...原创 2019-07-06 11:35:02 · 148 阅读 · 0 评论 -
了解HTTP协议
为什么需要缓存服务器?将常用的数据放在离客服端更近的地方,访问速度更快的地方,提高访问性能数据库与内存大量数据放在数据库中,读取磁盘慢,而且容易被打爆放在内存中读取会快很多CDN缓存请求先打到CDN网关网关服务器对应多台负载均衡的服务器负载均衡服务器根据请求情况,转到合适的服务器去那资源(类似于京东全国建物流,然后更具用户下单地址,从最近的物流派货...原创 2019-07-15 13:59:53 · 234 阅读 · 0 评论 -
DOMContentLoaded与async defer
DOMContentLoaded与异步脚本async只要html解析完,就会触发DOMContentLoaded<scirpt async src='xxx'>情况一: async脚本加载完,HTML还未解析完情况二: async还没有加载完,HTML就已经解析完毕总结:1、无论情况1,还是情况2,DOMContentLoaded都是在html解析完就...原创 2019-05-08 23:03:56 · 369 阅读 · 0 评论 -
事件委托
什么是事件委托?为什么会有事件委托因为事件绑定性能不好什么是事件绑定?对Dom元素绑定事件处理函数,事件触发的时候,调用这个函数onclick onmouserover/out/dow ....<input type="button" value="click me" onclick="hello()">监听方式:<input type="button" v...原创 2019-04-24 07:31:09 · 84 阅读 · 0 评论 -
闭包,内存泄漏
闭包定义高程: 有权访问另一个函数作用域中变量的函数闭包内存泄漏原创 2019-04-24 07:30:12 · 64 阅读 · 0 评论 -
事件队列,microtask macrotask
宏任务,微任务区别简单说就是优先级的问题,微任务优先级高于宏任务宏任务setTimeout setInterval I/O UI render <script>微任务Promise process.nextTick为什么说微任务优先级高于宏任务?探索二者执行方式不同原因?执行方式区别在任务队列中,每一次事件循环,宏任务只提取一个,而微任务会一直提...原创 2019-04-23 22:25:02 · 188 阅读 · 0 评论 -
说说promise
你了解promise吗?为什么会出现promise?因为回调地狱:先理解什么是回调函数?简单来说,回调就是等我某件事做完以后才去做回调需要做的事情首先,回调与同步异步没有什么直接联系,回调只是一种实现方式异步请求回调:$.get('ajax/test',function(data){ xxx})点击事件回调:$('#id').click(() =&g...原创 2019-04-28 14:27:05 · 284 阅读 · 0 评论 -
async await
const test = async() => { setTimeout(() => { console.log('timeout') }) console.log(1) await add() console.log(2) return 3}test().then(res => console...原创 2019-03-27 14:34:10 · 144 阅读 · 0 评论 -
判断一个对象是不是数组
getPrototypeOf(obj)返回所给对象的原型,如果传入的不是对象那么返回null用法console.log( Object.getPrototypeOf( {name:13} ) ); // {},注意类型是对象console.log( Object.getPrototypeOf( [ 22,44] ) ); // [],注意类型是对象console.log( O...原创 2019-03-22 19:01:47 · 102 阅读 · 0 评论 -
apply call bind
区别call(obj,arg1,arg2)apply(obj,[arg1,arg2]bind(this) // 不立即执行var obj = { age: 13, say: function(){ return this.age }}var obj2 = { age: 66}console.log(obj.say.apply(obj2))...原创 2019-03-20 21:19:19 · 79 阅读 · 0 评论 -
Es6解构赋值小技巧
var obj = {naem:13,age:44,hair:77}const {...all} = objconsole.log(all) //{ naem: 13, age: 44, hair: 77 }原创 2019-03-16 22:48:38 · 134 阅读 · 0 评论 -
大厂面试题集合-每日一题
每日一题,轻松练习自己做一遍,写上自己的解法和做题时遗忘的知识点这样不仅能巩固知识,写上自己的想法也方便以后查阅和复习题目来源: https://github.com/Advanced-Frontend/Daily-Interview-Question第1题-2019/3/19题目['1', '2', '3'].map(parseInt) 答案: [1,NaN,NaN]...原创 2019-03-19 22:05:49 · 412 阅读 · 0 评论 -
认识cookie和sessio
前端跨域请求,默认是不提供凭据(cookie、HTTP认证及客户端SSL证明等),所以跨域时候要携带cookie,要设置withCredentials前端跨域携带cookie设置 axios({ url:'http://localhost:8888/api/search', method:'get', params: { _t:+ne...原创 2019-05-09 23:51:57 · 313 阅读 · 0 评论 -
对比for of 和for in,以及所有数组遍历方法
说说遍历for in 和for offor in遍历的是key(Object.keys也可以)会遍历原型上的key遍历数组会不按照顺序可以中断遍历的的是keyvar obj = { a:13, b:23, c:33}for( var key in obj){ console.log(key);}会遍历原型上的ke...原创 2019-05-15 00:06:45 · 261 阅读 · 0 评论 -
说说Http keep alive和tcp keepalive
为什么会有keep alive的出现?初期http请求,每个请求建立一个连接,请求/响应,关闭连接,耗时1、每次http请求都要创建连接(三次握手),创建连接是需要耗时和资源因为每次请求完成,就会关闭连接,下一次请求又要重新创建连接2 、减少耗时和耗资源,于是出现了keep alive,数据请求完不要关闭连接,继续保持优点: 下一次请求不用三次握手直接发送请求缺点: 一直保持...原创 2019-05-16 09:19:07 · 152 阅读 · 0 评论 -
防抖(debounce)和节流函数(throttle)
#防抖函数带立即执行的debouncefunction debounce(fn,await,immediate ){ let timer,context,params; later = () => { return setTimeout(() => { timer = null if(!immedi...原创 2019-07-11 08:18:27 · 159 阅读 · 0 评论 -
Es6实现Promise.all和Promise.race
Promise.all([p1,p2,p3])中,all方法的参数条件必须为数组可以传入非promise,all自动将其转换为promise对象传入的值必须按顺序输出一旦又一个reject则状态立马变为reject,并将错误原因抛出function myPromiseAll(promiseArr){ // 为了让传入的值不是promise也返回promise retu...原创 2019-06-27 22:53:10 · 979 阅读 · 0 评论 -
关于GPU加速
如何开启GPU加速方法:opacitytransformtransform:translateZ(0); // 设置这个属性不影响动画GPU与CPU?GPU主要做图形处理,渲染顶点,图像变换,吞吐大,运算大,但是对数据流处理能力没有CPU好CPU对复杂的数据流控制更好了解页面卡顿的原因16ms优化大多数设备刷新频率60HZ(60次/s),每一...原创 2019-06-21 10:42:01 · 713 阅读 · 0 评论 -
slice为什么能将类数组转换为数组
#将类数组转换为数组的方法Array.prototype.slice.call(arguments)[].slice.call(arguments)Array.from(arguments)function turnToArray(){ var arrArgs = Array.prototype.slice.call(arguments) // 将参数转换成数组 con...原创 2019-05-28 00:26:08 · 419 阅读 · 1 评论