JavaScript
关注
分享
扫一扫
steamedbread321
菜鸟的web前端记录易错点
展开
-
几种常用网络请求汇总
0. 前言从我们在浏览器的地址栏输入http://blog.csdn.net/seu_calvin后回车，到我们看到该博客的主页，这中间经历了什么呢？简单地回答这个问题，大概是经历了域名解析、TCP的三次握手、建立TCP连接后发起HTTP请求、服务器响应HTTP请求、浏览器解析h...原创 2020-09-08 18:50:47 · 785 阅读 · 0 评论 -
nodejs中axios使用post方法不返回值的问题
html代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bo原创 2020-09-04 09:02:51 · 1289 阅读 · 0 评论 -
服务器代理
原理，通过request请求别人服务器的东西，然后再拿到自己的服务器上（因为服务器之间是没有跨域的）请求到自己服务器之后再使用就可以不用跨域了。eg:var http=require("http")var request=require("request")// var fs=require("fs")http.createServer((req,res)=>{ if(req.url=="/index.html"){ request('https://dnf.qq.com/',(err原创 2020-09-03 08:53:04 · 125 阅读 · 0 评论 -
前后端交互--ajax
nodejs中的ajax交互执行步骤(html中)创建ajax对象（ let xhr = new XMLHttpRequest() ||ActiveXObject(“Microsoft.XMLHTTP”);）建立与服务器的连接（xhr.open(‘Mthod’,‘url’)）;发送网络请求（xhr.send()）监听网络请求的整个过程(xhr.onreadstatechange=function*({}))从服务器向前端响应并且发送数据（xhr.responseText）DOM操作在nod原创 2020-09-02 20:22:25 · 128 阅读 · 0 评论 -
原生ajax和jsonp的使用以及封装的使用
1）原生js中的ajax创建ajax对象（ let xhr = new XMLHttpRequest() ||ActiveXObject(“Microsoft.XMLHTTP”);）建立与服务器的连接（xhr.open(‘Mthod’,‘url’)）;发送网络请求（xhr.send()）监听网络请求的整个过程(xhr.onreadstatechange=function*({}))从服务器向前端响应并且发送数据（xhr.responseText）DOM操作XMLHttpRequest 对象原创 2020-08-26 08:50:42 · 246 阅读 · 0 评论 -
DOM操作获取对象的方法以及兼容性
原创 2020-08-24 19:20:37 · 136 阅读 · 0 评论 -
hbuider和vacode中sass插件安装
Hbuider：在里面找到，如果没有就点击外部跳转网页安装也可以VSCODE：安装插件添加这句话，里面的css是你自己新建的css文件名字，注意大小写。如果出现找不到文件，那是因为你的路径不对哦...原创 2020-08-17 10:54:01 · 365 阅读 · 0 评论 -
异步任务执行机制【附赠经典面试题】
先把运行机制弄清楚（1）Promise中的代码是被当做同步任务立即执行的，then 则会被分发到 microtask 的 Promise 队列中去（2）await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。（3）settimeout时间是0 在window里面也是宏观的（4）只要是settimeout就是宏任务不管是不是满足前两点。（5）如果宏任务中settimeout的时间不一致需要满足异步操作切记一点：这里不管宏原创 2020-08-15 16:17:46 · 137 阅读 · 0 评论 -
每日面试题8.13
先上题： console.log(([]) ? true : false); console.log(([] == false ? true : false)); console.log(({} == false) ? true : false) 今天的这一道面试题主要是关于==这个知识点的。要想完全做懂此类型的题目，我们应该需要了解以下几个点。基本类型的转化顺序。String>Number>Boolean==只是去判断左右两边的字符的原创 2020-08-13 19:49:45 · 154 阅读 · 0 评论 -
vscode用canvas没有语法提示
直接在script加入一下代码/** @type {HTMLCanvasElement} */ /** @type {HTMLCanvasElement} */原创 2020-08-09 11:50:30 · 283 阅读 · 0 评论 -
vacode模块使用报错的问题
在vscode中是用模块化的时候会出现报错，提示如下Access to script at ‘file:///F:/%E5%AD%A6%E4%B9%A0/%E7%BA%BF%E4%B8%8BJS/test/js./modul.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, ch原创 2020-07-30 19:54:21 · 734 阅读 · 0 评论 -
正则表达式中括号的使用以及match的使用
一：括号正则表达式中的括号分为中括号，圆括号以及花括号。表达式描述[0-9]查找任何从 0 至 9 的数字。[abc]查找方括号之间的任何字符。(x|y)查找任何以 | 分隔的选项。注意 | 前后不要乱加空格，空格也是规则还有花括号是代表正则表达式中的量词{1}表示定值一个{1，5}表示一个到五个之间【闭区间】{1，}代表一到无数个注意：中括号中的任意一个可以匹配那么就是成功的。小括号|代表啊或二：matchmatch中匹配到了字符那么就返回一原创 2020-07-28 20:27:51 · 2042 阅读 · 0 评论 -
JavaScript更改this指向【笔记】
JavaScript更改this指向箭头函数call apply bindvar that = this原创 2020-07-27 12:01:30 · 99 阅读 · 0 评论 -
JavaScript中this指向问题经典练习题加this规律
在这之前我们要先了解几条法则，了解以后对this的问题就会迎刃而解对象方法的内部函数的this指向window（非对象中的方法）对象的方法内，this指向对象对象中的this指向window严格模式下（use strict）对象中禁止this关键字指向全局对象，此时的this是undefined如果此时出现this.a就会报错，因为undefined不能田间属性。如果说方法中的回调函数（就是方法return的值）是箭头函数，根据箭头函数的特点，他的this指向应该是根据上面的this指向来判断的原创 2020-07-26 14:10:55 · 729 阅读 · 0 评论 -
构造函数是否有return【笔记】
构造函数中是有return返回值的，默认返回值为this.这个返回值是可以修改的，但是只能修改为引用类型，基本数据类型是不能返回的基本数据类型有哪些？undefinednullstringbooleannumbersymbol(ES6)原创 2020-07-23 22:36:03 · 731 阅读 · 0 评论 -
原型链链（一张图秒懂）【笔记】
原创 2020-07-23 20:22:42 · 103 阅读 · 0 评论 -
JavaScript中的Array方法返回值以及原数组是否改变
-** concat()**：连接两个或更多的数组，并返回结果。(不改变原来的数组，返回一个新的数组)join()：把数组的所有元素放入一个字符串。（不改变原数组，返回改变以后的字符串）pop()：删除数组的最后一个元素并返回删除的元素。（原数组改变，返回删除的值）push()：向数组的末尾添加一个或更多元素，并返回新的长度。（原数组改变，返回原数组修改以后长度）slice()：选取数组的的一部分，并返回一个新数组。（原来数组不改变，返回截取的数组）splice()：从数组中添加或删除元素。（改原创 2020-07-23 20:19:22 · 325 阅读 · 0 评论 -
js错误Uncaught TypeError: (intermediate value)(...) is not a function
Uncaught TypeError: (intermediate value)(…) is not a functioneg: (function (){ console.log('zxx'); })() (function(){ console.log('123'); })()上面的代码就会报出以上错误修改方法就是在第一个函数块后面增加一个分号;..原创 2020-07-23 17:12:25 · 1213 阅读 · 0 评论 -
JS里slice，substring，substr方法参数传入负值时如何变化
JS里 slice，subString，substr方法参数传入负值时如何变化简介三种方法三种方法传入参数为负数时slice(start, end) 方法参数为负数substring(start, end)方法传入参数为负数时substr(sta...转载 2020-07-23 14:49:31 · 735 阅读 · 0 评论 -
JS中===和==的区别与联系
==表示判断值是否相同===表示判断值类型是否相同，如果类型是相同的，判断地址是否相同。总之===里面只要有一个不等就是false下面举几个经典的例子方便我们更好的理解：eg1： console.log(NaN == NaN);//false console.log(NaN === NaN);//false console.log(this == window);//true console.log(this === window);/原创 2020-07-23 13:04:40 · 131 阅读 · 0 评论 -
作用域经典例题
<body> <button>1</button> <button>2</button> <button>3</button></body><script> var btns = document.getElementsByTagName('button'); for(let i =0 ;i<3 ;i++){ btns[i].on...原创 2020-07-21 08:49:15 · 151 阅读 · 0 评论 -
作用域的经典例题
就这一种题型的变化有很多，我一个一个的讲解，第一种函数无形参的时候 var name ='xm'; function fn (){ name = 'xh' console.log(name);//xh } fn(); console.log(name);//xh上面的是作用域链的图此代码中函数体里面的name='xh'是全局变量，所以xh会覆盖全局变量里面的xm，GO里面原创 2020-07-18 10:46:32 · 554 阅读 · 0 评论 -
isNaN的判断
isNaN的判断的判断需要注意的是：是NaN的时候是true，不是NaN的时候就是falseisNaN实质上判断的是，是否能被转化为数字举个例子就明明白白了 var a = '456',age = 18,name='456'; console.log(isNaN(age));//false var b = 10; console.log(isNaN(b));//false var c = '我是字符串';原创 2020-07-16 19:16:13 · 947 阅读 · 0 评论 -
js中的typeof返回值的所有类型
1.String2.Number3.Boolean4.Object5.Function6.undefinedps:typeof null;//object原创 2020-07-16 10:56:15 · 226 阅读 · 0 评论 -
canvas写一个简单画板（解决断点问题）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> canvas {原创 2020-07-02 11:34:49 · 715 阅读 · 0 评论 -
js使用canvas手写小星星
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> canvas { border: 1px solid red; } </style> <script type="text/javascript"> window.on.原创 2020-07-02 11:19:08 · 134 阅读 · 0 评论 -
笔记，pc移动页面布局问题
pc:<style type="text/css"> @media screen and (max-width: 1260px){ .out{ width: 1260px; } /* .head{ width: 1260px; } */ } </style>上述代码是设置pc端缩小窗口时，使用滑条展示页面内容，如果没有此代码，则缩小窗口就会展示不完全页面内容移动：原创 2020-07-02 10:09:30 · 98 阅读 · 0 评论 -
原生js实现联动菜单（收货地址的选择地址）
先来看看效果图下面是代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>原创 2020-06-28 16:43:41 · 1410 阅读 · 0 评论 -
js解除绑定事件
js解除绑定事件特别注意事项：addEventListener和attachEvent在结构里面的函数都需要写出来，然后再在结构里面调用函数，这样可以确保两个结构里面的都是同一个函数。如果说把函数体写入结构里面，那么就相当于深度复制，两个函数体完全不是同一个函数体注意:用什么方式绑定事件,就应该用对应的方式解绑事件1.解绑事件对象.on事件名字=事件处理函数—>绑定事件对象.on事件名字=null/false;2.解绑事件对象.addEventListener(“没有on的事件类型”,原创 2020-06-22 10:38:22 · 1030 阅读 · 0 评论 -
原型链详解（附带图解）
2）原型以及原型链（实质是引用非赋值）2.1）定义定义：是function（构造函数函数）对象的一个属性，它定义了构造函数构造出来的对象的公共祖先。通过该构造函数创建的对象，可以继承他的原型的属性和方法。（eg:person.prototype就是一个原型）举个例子： Grand.prototype.lastName = '何'; function Grand() { }原创 2020-06-18 15:47:40 · 1848 阅读 · 0 评论 -
关于“事件”，“事件对象”，“事件源”等几个概念的理解
事件：指的是鼠标点击，键盘输入等用户操作。其本身就是一个对象。事件对象：事件发生后，在flex中就称为事件对象，事件对象有针对其的侦听器，事件对象有其属性，比如：target。事件发生的对象：指事件源。事件源：发生事件的对象，一般指某一具体的组件，比如：用户点击某Button，则此Button即为事件源。侦听器：是一个方法，用以响应事件。...转载 2020-06-17 19:32:28 · 1455 阅读 · 0 评论 -
js表格动态添加数据（两种方法）
js里面表格的动态添加我用两种方法演示第一个es6里面的模板法第二种是用循环遍历去创建元素然后再appendchild放入document里面去先来看看效果图先来展示第一种方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca原创 2020-06-12 16:06:09 · 7983 阅读 · 0 评论 -
JavaScript经典面试题详解
以下是我遇到的一些经典的JS面试题，结合我自己的理解写的详解，主要参考高程一书，欢迎大家批评指正1. var a; console.log(a);答：运行结果为打印undefined。首先，以上代码完全运行的话需要引擎，编译器，作用域的配合操作，（引擎负责整个JavaScript程序的编译及执行过程，编译器负责词法分析及代码生成等，作用域负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。）首先遇到转载 2020-06-06 16:07:58 · 250 阅读 · 0 评论 -
箭头函数（备忘录）
箭头函数的三个要点1：如果形参只有一个则可以省略（）2：如果大括号里面的语句只有一句，则可以省略大括号{}3：如果大括号里面的语句是return，则可以省略return；举个例子原始箭头函数： let a = (num1)=>{ return console.log(num1); } a(517);省略以后 let b = num1=>console.log(num1); b(原创 2020-06-04 17:17:42 · 124 阅读 · 0 评论 -
JavaScript实现简单的抽奖
JavaScript实现简单的抽奖下面呢我用与一个按钮（开始即是结束）另外一种有三个按钮（分别是开始、结束、清除）来来来我们说一下这个小游戏的需要的东西以及注意点主要需要的是Math函数里面的随机数字 Math.random以及取整Math.ceil和定时器setInterval（函数，时间）clearInterval()清除之前开始的那个定时器（而非所有的）即是停止setInterval（）函数会返回一个值，每次开启定时器都会是一个新的值，在清除中必须是其对应的值，才可以达到清除的效果。原创 2020-06-02 16:14:37 · 1716 阅读 · 0 评论 -
浅复制和深复制图片解析+代码块详解
浅复制和深复制定义：浅复制增加引用类型变量指向同一个数组对角和应用类型相互关联，也就是说基本类型都复制了，但是应用类型还是引用的是原来的地址，也就是直接引用以前的引用类型。此时的引用类型并没有克隆。举个例子 var person= { name:'熊熊', like:'肉', son:{ name:'小熊',原创 2020-05-28 16:11:30 · 217 阅读 · 0 评论 -
堆栈图详解代码块+图片
超详细堆栈图以及销毁的两种方法（包含堆栈图）我先把代码和堆栈图贴上去然后再说说注意点把！代码图：堆内存图、栈内存图：上面的图我解释一下：当person赋值给animal，animal和person都是指向同一个对象的。然后 animal.setName(“鬼谷子”);修改了name的属性为鬼谷子。每次执行完以后都会销毁每次函数执行完成之后栈都会被销毁。再来说说栈，堆，数据段1）栈 执行函数才会产生栈,当函数执行结束后栈就会销毁 函数执行过程中，产生的局部变量就在栈中，栈中的局原创 2020-05-24 20:12:49 · 1159 阅读 · 0 评论 -
join用循环方法实现
Array.prototype.join = function (sep) { var str = ''; for (var i = 0; i < this.length; i++) { str += this[i] + (i == this.length - 1 ? '' : sep); // str += this[i]+sep; } ...原创 2020-05-20 21:02:52 · 322 阅读 · 0 评论 -
split用循环实现它的功能（非直接使用split）
split用循环实现它的功能（非直接使用split）解析：split的作用就是把字符串通过指定的字符分割开来，然后组成数组官方点的说法：split() 方法用于把一个字符串分割成字符串数组。我们这里用循环实现split的功能，但是不涉及可选参数那一条，即：指定返回的数组的最大长度。思路分析：由split的方法我们可以知道，我们应该把一个字符串分割以后存储在数组里面，在这里我们的理想状态是一个分隔符。但是实际情况我们需要考虑多个分隔符。我把单个分隔符和多个分隔符的代码都贴上去，我相信大家就都明白原创 2020-05-20 13:30:55 · 1298 阅读 · 0 评论 -
箭头函数和普通函数中this的指向问题
箭头函数和普通函数中this的指向问题先来两坨代码块 var obj = { a:100, say : function() { console.log(this);//{a: 100, say: ƒ} console.log(this.a);//100 } }原创 2020-05-15 23:25:42 · 153 阅读 · 0 评论