隔壁老奶奶都能看懂的javaScript
重新梳理js中高级知识点,彻底摆脱js问啥啥不会的烦恼。
看心情更新。
达瓦利什
每天学习亿点点
展开
-
如何优雅的手写a,b,c三兄弟
apply,bind,call实现思想:皆是通过给目标对象赋值一个临时属性来改变this指向。注意事项:- 使用globalThis代替window...原创 2022-01-23 17:49:05 · 581 阅读 · 0 评论 -
js 一网打尽之类型判断
let bool = true;let num = 1;let str = 'abc';let und= undefined;let nul = null;let arr = [1,2,3,4];let obj = {name:'xiaoming',age:22};let fun = function(){console.log('hello')};let s1 = Symbol();typeof快速区分基本数据类型,但不能区分除funtion外的引用类型。返回类型为strin原创 2021-11-28 14:30:58 · 613 阅读 · 0 评论 -
js链式调用
声明式UI前两天看到鸿蒙之前的jsUI变成了ArkUI,而新的UI居然是声明式UI。下面是从鸿蒙文档里复制的一段代码,大家可以简单看一下@Entry@Componentstruct MyComponent { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text原创 2021-10-28 19:59:31 · 201 阅读 · 3 评论 -
简单实现节流
题目implement basic throttle()实现节流,题目要求的节流和我们平常的不一样,上面题目要求节流的同时保持最大频率调用目标函数。例子let currentTime = 0const run = (input) => { currentTime = 0 const calls = [] const func = (arg) => { calls.push(`${arg}@${currentTime}`) } const th.原创 2021-09-28 23:56:37 · 427 阅读 · 0 评论 -
数组扁平化
题目implement Array.prototype.flat()写一个函数实现Array.prototype.falt。例子const arr = [1, [2], [3, [4]]];flat(arr)// [1, 2, 3, [4]]flat(arr, 1)// [1, 2, 3, [4]]flat(arr, 2)// [1, 2, 3, 4]答案//递归function flat(arr,depth=1){ return depth ? ar.原创 2021-09-27 22:46:09 · 74 阅读 · 0 评论 -
用一个类简单实现js 浏览器history
原题:create a browser historyclass BrowserHistory { /** * @param {string} url * if url is set, it means new tab with url * otherwise, it is empty new tab */ constructor(url) { this.queue=[] //当前current位置 this.currentIndex=0 if(url !==原创 2021-09-22 14:09:14 · 98 阅读 · 0 评论 -
细节到极致,如何与面试官battle柯里化
看完本篇,你将理解如何构建简单curry,支持占位符的curry,理解Function.prototype.length的规则,理解Function函数,理解bind的真正细节,一个完善到极致的curry函数!原创 2021-09-23 19:10:39 · 98 阅读 · 0 评论 -
js dom操作大全
最基础的,不再分析(下图最后一个不太搜索命名空间的?)document.querySelector()根据选择器查找单个元素参数: 包含一个或多个要匹配的选择器的 DOM字符串DOMString。 该字符串必须是有效的CSS选择器字符串;如果不是,则引发SYNTAX_ERR异常。(参数包含伪元素返回空)返回值: 表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到,则返回null。例子:获取类名为test下id为a的domlet dom=xxx原创 2021-09-04 23:18:43 · 184 阅读 · 0 评论 -
Fetch
原生Fetchfetch是基于Promise设计的,fetch是原生的,与XML同一级别。fetch符合关注分离。 语法简介原生fetch缺点(原生fetch非常拉跨,不建议使用)1)fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。2)fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: ‘include’原创 2021-08-08 16:31:22 · 233 阅读 · 2 评论 -
你真的理解 == 吗?
== 与 ===我们都知道两者区别在于,检查值是否相等,而=检查值和类型是否相等。更精确点就是==检查的是允许类型转换情况下的值的相等性,===检查不允许类型转换情况下的值的相等性。== 类型转换细节我总结了==中几点重要的特例,如果想看全部细节可以到 es5规范 11.9.3。对于x == y来说当x,y类型相等时,x == y 与 x === y没有区别。模糊了null和undefined,即 null == undefined 结果为true。当x为Boolean时,会将x转为Nu原创 2021-08-05 10:05:22 · 72 阅读 · 0 评论 -
eventLoop 宏任务与微任务与消息队列
先看一道题这个就涉及到JavaScript事件轮询中的宏任务和微任务。那么,你能说清楚到底宏任务和微任务是什么?是谁发起的?为什么微任务的执行要先于宏任务呢?如上图所示,其中MessageQueue也叫taskQueue,MicrotaskQueue也叫jobsQueue.定时器,xhr,各种dom事件(点击。。)等异步放到消息队列,promise等放到微任务里面。宏任务与微任务我们放到后面说现在我们来看开头那道题的执行过程可以看到执行先后顺序为 调用栈 > 微任务 > 消息原创 2021-06-17 16:09:45 · 179 阅读 · 0 评论 -
js 彻底搞懂sort方法
arrayObject.sort(sortby);sortby为一个函数,内有两参数,该函数返回两参数的差。arr=[1,2,4,5,6]var sortby=function(a,b){ return a-b;}arr.sort(sortby)//sort内部采用O(n^2)的冒泡排序,当sortby的返回值大于0,交换位置。//冒泡排序//升序function bubbleSort(arr) { var i = arr.length, j; var tempEx原创 2021-06-16 22:19:50 · 216 阅读 · 0 评论 -
js防抖节流
防抖我们经常在业务中判断当前用户名是否存在,如代码1所示,如果每次触发input的change事件都向后台请求一次接口,那就非常没有效率,因此我们可以判断用户输入结束后再发送数据。//代码1<input type="text" name="userName"> <script> document.querySelector('input').addEventListener('input',function(){ console.log('我向后台验证了一次用户名原创 2021-05-10 08:13:00 · 79 阅读 · 0 评论 -
js 你不知道的apply和call(方法借用)
我们都知道apply,call,和bind方法都是改变this指向的,但是他们之间的区别以及核心原理你真的懂了吗//代码1var obj={ name:"li", f: function(age,fm){ console.log(this.name+" "+age+" "+fm); }}var robber={name:"wang"} obj.f(18,"北京") //li 18 北京obj.f.call(robber,88,"新乡") //wa原创 2021-03-21 22:25:25 · 267 阅读 · 0 评论 -
js阻止事件传播/穿透(冒泡和捕获)
阻止事件传播//代码1//在下面的代码中,我需要添加一个全局事件,但是改全局事件不能包括imitationSelect,imitationSelect.onclick= function(){ if(selectUl.style.display=="block"){ selectUl.style.display='none'; }else{ selectUl.style.display='block'; }原创 2020-11-18 13:37:59 · 8399 阅读 · 3 评论 -
js new运算符做了什么?
以下为我的浅显理解(仅供参考)在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。构造函数首字母一般大写。//代码1function Student(name,age){ this.name=name; this.age=age;}var stu1=new Student('小王',"18"); console.log(stu1.name) //小王如代码1所示,Student()即为自定义的构造函数,其中使用new 关键字后会进行如下的操作:1,原创 2021-03-16 21:29:08 · 183 阅读 · 0 评论