JavaScript基础
JavaScript基础以及进阶知识
lockloke
记录学习心得
有很多问题,对那些高手来说太简单,所以就没人去解释该怎么处理。然而这才是新手最需要的,毕竟新手嘛,什么问题都可能出现,搜又不知道该搜什么关键字。
希望我的文章能帮到其他人
待我稍微整理下思路后再记录下新人入职后如何快速上手吧
展开
-
Object.assign实现方式
示例对象代码:var obj1={ a:12, b:2, c:3}var obj2={ a:2, c:2222}1、es6的做法console.log({...obj1,...obj2});2、双层for循环的做法var obj1={ a:12, b:2, c:3}var obj2={ a:2, c:2222}var obj3={ d:444,k:77}function getNewObj(){ let newObj=[...arguments];原创 2021-10-23 03:32:21 · 142 阅读 · 0 评论 -
iconfont图标下载使用示例
登录iconfont.cn(也就是阿里巴巴矢量图标库)选择我们想要的图标,点击加入购物车选择完了之后,在阿里巴巴矢量图标库网站的右上角那里点击即可看到下面这个图点下载代码,得到一个zip文件,打开大概就是下面这样打开demo_index.html看...原创 2021-10-18 04:35:58 · 283 阅读 · 0 评论 -
防抖与节流
一、防抖用户触发事件过于频繁,只要最后一次事件的操作简单说就像是你在一个输入框里输入随意几个字,如“前端”,假设咱们系统功能是可以根据你输入的字符实时展示数据库的搜索结果,就像百度的搜索一样这个可以通过输入框的oninput事件来触发对应的数据库查找操作,但是oninput事件是你每输入一个字符都会被执行一次的。 也就是说,我虽然只输入一个“前”字,但实际上我却是触发oninput事件很多次了,<input type="te...原创 2021-07-05 01:05:00 · 91 阅读 · 0 评论 -
promise相关
Promise是ES6中提出的解决异步编程导致的陷入回调地狱问题的方案,而且,promise本身是同步的,但是,.then()和.catch()是异步的。let a=new Promise((res,rej)=>{ console.log(1); res(2);})a.then(res=>{ console.log(3); console.log(res);})console.log(4);结果如下:重点:在promise中,如果调用了r原创 2021-06-25 16:42:55 · 103 阅读 · 0 评论 -
宏任务、微任务
何为宏任务、微任务事件循环:JS 会创建一个类似于while (true)的循环,每执行一次循环体的过程称之为Tick。每次Tick的过程就是查看是否有待处理事件,如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中,也就是每次Tick会查看任务队列中是否有需要执行的任务。主线程:JS 只有一个线程,称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后,才开始执行的。所以,主线程中要执行的代码时间过长,会阻塞事件循环的执行,也就会阻塞异步操作的执行..原创 2021-06-25 15:59:24 · 486 阅读 · 0 评论 -
插件开发问题记录一---localStorage使用问题
因为一开始就封装了一个选择器函数,我想着把对应的值存储到locaStorage就行了,但是我没想到我let $=name=>document.querySelectorAll(name);我把这个选择器获取到的对象存进了一个数组arr里,假设页面上有id为app和abc的元素,我用选择器将他们获取到,然后保存到数组arr中let arr=[$("#app"),$("#abc")];接着又把这个数组的值给了localStorage.arrlocalStorage.arr=arr原创 2021-06-23 01:21:35 · 378 阅读 · 1 评论 -
原型和原型链
实例对象的__proto__默认指向该对象所属类型的根元素的prototype例如数组的实例对象arr的__proto__指向的就是Array的prototype,如果对__proto__进行修改,那么这两个就不再相等。在未对实例对象obj的__proto__进行修改之前,obj.__proto__跟Object.prototype是相等的如果像上面这样给obj的__proto__重新指定了对象,那么它跟Object.prototype就不再相等了。但是,如果只对Object.prototy原创 2021-05-26 14:28:48 · 187 阅读 · 0 评论 -
怎么获取异步函数内的数据
简单的方式就是使用async和await或者使用回调函数。原创 2021-05-09 21:19:56 · 348 阅读 · 0 评论 -
笔试题二
var a=2; function get(){ var b=a||5; console.log(a) var a=10; console.log(b) } get()原创 2021-04-15 14:08:09 · 101 阅读 · 0 评论 -
js判断类型
Object.prototype.toString.call(n)用这一句就好了,如果不然使用api来实现的话我暂时不知道详情可以先看这篇文章《浅谈Object.prototype.toString.call()方法》,后续我再来对自己的文章进行补充原创 2021-04-15 10:25:51 · 70 阅读 · 0 评论 -
简单的链式调用
function s(){ this.n=1; this.fun=function(){ console.log(this.n++) return this }; this.fun1=function(){ console.log(this.n++) return this } } var a=new s(); a.fun().fun1();说白了就是在函数s()内部还有函数...原创 2021-04-14 16:19:59 · 183 阅读 · 0 评论 -
定位position-relative
position:relative是基于该元素本身原来的位置来定位的,所以,当它进行位置移动时,实际上它还是占用着原来的位置的示例<style type="text/css"> div { float: left; width: 100px; height: 100px; background-color: red; } .w { position: relative; left: 200px; background-color: saddlebrow原创 2021-04-11 13:00:53 · 1521 阅读 · 0 评论 -
求数组的并集、交集、差集并去重
代码示例var a1 = [1,2,3,4,5,6,4,5,6];var a2 = [4,5,6,7,8,9,7,8,9];循序渐进解析1、数组并集去重先对数组进行合并,使用扩展运算符对数组进行拆解var arr=[...a1,...a2]再对数组进行去重,因为Set数组的元素具有唯一性,所以,可以将上面的数组作为set数组的元素,这样就直接完成了数组的去重操作,但是,要先实例化一个Set数组var arr1=new Set(arr)问题来了,虽然上述操作已经完成了原创 2021-04-11 12:57:20 · 622 阅读 · 0 评论 -
for...in和for...of
讲for...of之前应该先讲for...in。for...in是我们一开始学数组对象遍历时最常用的方式,但是那样写很麻烦,像下面这样var arr=[1,3,5,7,9];for(let i=0;i<arr.length;i++){ console.log(i);//当前元素下标 console.log(arr[i]);//当前元素}但是,这种写法略显麻烦,可以改成下面这种,略微简单var arr=[1,3,5,7,9];for(let i in arr){原创 2021-01-03 02:38:53 · 195 阅读 · 0 评论 -
B站上看的关于重绘与回流的解释
DOM的重绘与回流重绘:元素样式的改变(但是,宽高、大小、位置等不变)如outline,visibility,color,background-color等等回流:元素的大小或者位置发生了变化(当页面布局和几何信息发生变化的时候),触发了重新布局导致渲染树重新计算布局和渲染如添加或删除可见的DOM元素;元素的位賞发生变化,元素的尺寸发生变化,内容发生受化(比如文本变化或图片被不同尺寸的图片所替代);页面一开始渲染的时候(这个无法避免):因为回流是根据视口的大小来计算元素的位置和大小的,所以浏览原创 2020-12-13 18:37:15 · 154 阅读 · 0 评论 -
关于浏览器的原理
首先,我们浏览的网页文件存放在服务器端(也就是Web服务器)中在我们对网站进行访问的时候,先是进行Request请求阶段,在这个阶段里会进行一系列的协议以及解析:DNS解析、TCP的三次握手与四次挥手、HTTPS和HTTP协议之后是Response响应阶段:HTTP状态码、304缓存、HTTP报文而在客户端也就是浏览器中,我们先是从服务器拿到文件代码,在拿到代码后于内存中开辟出一块栈内存用来给代码的执行提供环境;同时分配一个主线程去一行行的解析和执行代码;每一行代码都是经过进栈执行、执行完出栈的原创 2020-12-12 15:21:32 · 185 阅读 · 0 评论 -
百度来的,关于[].forEach.call()的理解
题目 给页面多个li绑定点击事件 并打印顺序按照我的理解,当然是先写for循环的,但是,我又看到一篇文章写的是[].forEach.call()的方式,第一看到这种,有点懵,讲真var liArr = document.querySelectorAll('li');// console.log(liArr);[].forEach.call(liArr,function(ele,index){ ele.addEventListener('click',function(){ consol原创 2020-12-02 21:25:19 · 208 阅读 · 0 评论 -
vue-cli启动方法
有段时间没动vue脚手架了,突然就想不起来怎么启动这个脚手架,网上一查“怎么启动vuecli”、“vuecli启动方式”,他么的净是一堆安装方法,我就想知道怎么启动!要你们教怎么安装么?靠北,难不成新房装修,那些个师傅还要跟你讲怎么和水泥?傻逼吧这些人启动方法就下面这个启动命令行工具,输入下面这个再回车就可以了vue ui...原创 2020-11-19 23:29:19 · 1290 阅读 · 1 评论 -
es6传入多维数组,并将其扁平化
示例:var a = 1, b = [2,3],c=[4,5],d=6;写入一个函数,将abcd以实参传入返回[1,2,3,4,5,6]function fun(...item){ return item.flat(Infinity)}fun(a,b,c,d)在这里,fun函数传入了多个形参a、b、c、d,使用rest参数 …item接收这些形参,解析后item的值为一个多维数组[1,[2,3],[4,5],6] //item的值想让函数的返回值为一维数组,则需进行转换,对多维数组进行原创 2020-11-11 15:30:48 · 1003 阅读 · 0 评论 -
tcp协议-三次握手、四次分手
三次握手第一次握手:客户端给服务器端发送一个syn的标志位;服务器端接收到syn后会返回一个ack相当于ー个回调的机制),同时还有一个服务器端的syn;客户端接收服务器端发送的syn后会再次给服务器端发送一个ack,这样才算完成三次握手通俗点的理解你先问一个人要不要去吃饭,她回答“好啊,咱们去哪吃”,你再回答“走啊,去楼下大排档”,然后你俩就开开心心去吃大排档了。四次分手客戶端向服务器端发送断开连接的请求;服务器端接收到请求后,返回可以断开连接的请求,客广端断开连接并且释...原创 2020-10-25 16:37:35 · 195 阅读 · 0 评论 -
闭包的理解 二
简单的闭包示例function f1(){ var a=1; function f2(){ console.log(a) } f2()}f1()其实闭包看起来就像是直接返回一个值而已,那这样的话,为什么不直接写成下面这样 还更简单function f1(){ var a=1; return a;}console.log(f1())对吧,看结果不都是一样的?不就是返回了个值么,那明显第二种更简单啊但是 第二种里边的原创 2020-10-20 15:37:30 · 106 阅读 · 0 评论 -
闭包的理解 一
闭包的定义官方的说法的话:闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。简单理解闭包就是一个定义在某个函数内部的函数,说白了就是嵌套函数中那一个被套的,就是那个小的,但这样还构不成闭包,另一个条件就是它能访问那个大的函数的内部变量function a(){ var i=1 function b(){原创 2020-10-10 17:58:07 · 105 阅读 · 0 评论 -
call、apply如何改变this指向,以及bind的使用需要注意什么
一般改变this指向用的都是call、apply、bind这些方法,具体怎么使用看下面的例子吧call()使用示例var n=1var obj={ n:20, fu:func}function func(name){ return this.n+name}console.log(obj.fu("我"))console.log(obj.fu.call(window,"我"))解释:在原本的obj.fu()调用时,因为this指向的obj,所以this.n的值为20而c原创 2020-09-28 23:45:38 · 362 阅读 · 0 评论 -
简单的this指向理解和示例
老实讲,在之前我还是觉得this指向超麻烦的,认真学了一下,emmmm,好像其实应该也没那么难进入正题:this一般指向调用者调用者什么意思?这个不难理解啊,就是谁调用就是谁咯,那实际应用场景呢第一个例子function test(){ console.log(this)}test()你猜这个console.log(this)输出的是什么?是不是以为输出的应该是这个 function test(){..}?错咯答案:window那再来一个例子,这次thi原创 2020-09-28 18:02:20 · 185 阅读 · 0 评论 -
for in循环需要注意的地方
今天在使用for in循环的时候莫名其妙出现了一些东西,百度半天也不知道啥情况,后来想了想 是不是for in循环才会出现这个问题,照着这个方向又搜了一遍,果然,就是for in循环有一点坑因为之前的代码里写了个Array.prototype.uniq = function () { return [...new Set(this)]}也就是一道牛客网的数组去重的解法,没想到这个会导致我后面的代码也跟着出问题了我本只是在做另一道题,颜色进制转换,结果,在对数组进行遍历打印的时候,..原创 2020-09-27 16:29:17 · 450 阅读 · 0 评论 -
XMLHttpRequest状态
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。 5 个状态中每一个都有一个相关联的非正式的名称,下表列出了状态、名称和含义:状态 名称 描述0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。2 Sent Send() 方法已调用,HT...转载 2020-09-25 21:40:43 · 575 阅读 · 0 评论 -
关于js冒泡排序的理解
呈上冒泡排序的代码var arr=[2,7,3,1,4,8,9,0];for(var i=0;i<arr.length-1;i++){ for(var j=0;j<arr.length-1-i;j++){ if(arr[j]<arr[j+1]){ var temp=arr[j]; arr[j]=arr...原创 2019-04-16 23:06:55 · 304 阅读 · 0 评论 -
浅拷贝以及深拷贝的简单理解
什么是Javascript拷贝?个人理解,JavaScript的拷贝其实就像是对一个对象啊变量啊啥的进行复制,那为什么要复制?直接对原来的变量或对象啥的进行改动不就行了么,搞那么麻烦干嘛。这是因为在工作中,有时候一个看似普通的变量,可能它会在多处被引用,如果你只在乎自己的代码能否运行,不在乎其他开发人员是否会因为你改动了一个数据导致系统出bug,那么你觉得你会不会被扣工资?因此,对获取到的数据进行拷贝是很必要的,避免对源数据造成改动。那什么是深浅拷贝?拷贝的时候,按常理说,那就是复制啊,原创 2020-09-23 23:31:29 · 113 阅读 · 0 评论