JavaScript
文章平均质量分 82
JavaScript基础到实战
Xiaaoke
这个作者很懒,什么都没留下…
展开
-
JS 客户端存储
文章目录Cookie原生使用封装原生插件使用Web Storage常用API基本使用Web Storage和cookies区别cookiessessionStorage和localStorage共同点 记录用户状态区别各自优势常见攻击方式及解决方案CookieHTTP Cookie(也叫 Web Cookie 或浏览器 Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持原创 2022-05-31 16:45:29 · 142 阅读 · 0 评论 -
js 所有的网络请求方式
文章目录HTTP请求报文响应报文常见的状态码readyState 属性原生AJAXAJAX 简介XML 简介AJAX 的特点AJAX 的使用解决 IE 缓存问题ajax返回的状态jQuery-AJAXget 请求post 请求ajax 请求Axios-AJAXget 请求post 请求ajax 请求Fetch-AJAX跨域同源策略如何解决跨域JSONPCORS所使用的node服务代码Web SocketHTTPHTTP(hypertext transport protocol)协议『超文本传输协议』,原创 2022-05-31 15:43:45 · 3512 阅读 · 0 评论 -
JS 文件上传下载
文章目录文件上传文件下载后端给的是地址后端给的是文件流在线查看pdf文档文件上传const xhr = null;// 文件上传const UpladFile = () => { // 获取文件 const dom = document.getElementById('file'); // 设置文件上传地址 const url = ''; // 创建文件对象 const form = new FormData(); form.append('file', dom); //原创 2022-05-31 14:36:24 · 415 阅读 · 0 评论 -
javascript中DOM操作
文章目录文档对象模型获取页面元素:(typeof都是object)事件基础:(触发响应的机制)操作属性:节点操作:获取节点:获取元素节点:自己封装一个:创建节点:删除节点:复制节点:三种动态创建元素的区别:常用元素尺寸偏移尺寸客户端尺寸滚动尺寸确定元素尺寸事件高级创建事件的方式:删除事件:DOM事件流:事件对象事件委托用户界面事件焦点事件鼠标事件键盘事件HTML5 事件触摸及手势事件文档对象模型文档:document元素:element节点:(标签、属性、文本、注释等)node获取页面元素:(原创 2022-05-31 09:59:15 · 821 阅读 · 0 评论 -
JavaScript BOM操作
文章目录window对象的常见事件JavaScript执行机制location对象navigator对象history对象screen对象元素偏移量offset系列元素可视区client系列元素滚动scroll系列查看滚动条的滚动距离查看视口的尺寸查看元素的几何尺寸 ES5新增了解属性window对象的常见事件窗口加载事件:window.onload:页面加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)就调用的处理函数。document.addEventList原创 2022-05-30 11:56:38 · 207 阅读 · 0 评论 -
js中的数组对象
数组对象去重根据数组对象的一个字端来判断去重参数arr:要去重的数组(数组对象)id:根据去重字端名称(string)返回值:合并后的数组对象(数组对象)function arrObjUniq(arr, id){ let obj = {}; arr = arr.reduce((cur, next)=>{ obj[next[id]] ? '' : obj[next[id]] = true && cur.push(next); return cur;原创 2022-05-24 11:24:45 · 381 阅读 · 0 评论 -
React 中使用 axios
文章目录前置说明常用的ajax请求库特性基本使用axios API常见的请求方式自定义配置新建一个 axios 实例请求配置响应结构拦截器前置说明React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用:封装XmlHttpRequest对象的ajaxpromise风原创 2022-05-08 00:00:00 · 3869 阅读 · 0 评论 -
lodash-es js工具函数
文章目录为什么选择 Lodash安装和文档基本使用节流:throttle参数返回例子防抖:debounce参数返回例子浅拷贝:clone参数返回例子深拷贝:cloneDeep参数返回例子随机数:random参数返回例子判断是否是isNaN参数返回例子lodash-es、lodash 都是封装js的工具函数,二者是一样的东西就是版本不同,推荐使用lodash-es为什么选择 LodashLodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaSc原创 2022-04-29 20:45:00 · 12233 阅读 · 1 评论 -
JavaScript常用API --- 对象(Object、Array、Number、String、Math、JSON和Console)
Java api 参考文档Object查看文档生成实例对象:var o = new Object()属性:Object.prototype //返回原型对象方法:Object.keys(o) //遍历对象的可枚举属性Object.getOwnPropertyName(o) //遍历对象不可枚举的属性对象实例的方法:valueOf():返回当前对象对应的值。toString():返回当前对象对应的字符串形式。toLocaleString():返回当前对象对应的本地字符串原创 2022-04-27 18:45:00 · 431 阅读 · 0 评论 -
JavaScript常用API --- CSS操作
文章目录类名操作style操作css选择器类名操作//ie8以下Element.className //获取元素节点的类名Element.className += ' ' + newClassName //新增一个类名//判断是否有某个类名function hasClass(element,className){ return new RegExp(className,'gi').test(element.className);}//移除classfunction remove原创 2022-04-27 12:13:15 · 212 阅读 · 0 评论 -
JavaScript常用API --- DOM操作
文章目录节点属性操作Document节点的属性Document节点的方法Element节点的属性Element节点的方法参考地址节点属性Node.nodeName :返回节点名称,只读Node.nodeType :返回节点类型的常数值,只读Node.nodeValue :返回Text或Comment节点的文本值,只读Node.textContent :返回当前节点和它的所有后代节点的文本内容,可读写Node.baseURI :返回当前网页的绝对路径Node.ownerDocument原创 2022-04-26 09:47:37 · 115 阅读 · 0 评论 -
大佬们才玩的正则表达式,看完你也会
大佬们才玩的正则表达式目录大佬们才玩的正则表达式什么是正则表达式元字符字符转义集合分组后向引用零度断言贪婪与懒惰贪婪的重复懒惰的重复常见的正则表达式什么是正则表达式简单来说,正则表达式就是用一些特定的符号来代替字符串元字符代码说明.匹配除\n以外的任意字符\w匹配数字或字母或 _\W匹配非数字或字母或 _\s匹配任意的空白符(空格,换行,字表符)\S匹配非空白符\d匹配所有数字\D匹配非数字\b匹配单词的开始或结束(边界原创 2020-07-09 18:26:46 · 500 阅读 · 0 评论 -
JavaScript继承的进化
JavaScript继承延展(透彻)目录JavaScript继承延展(透彻)内容有点多,耐心看完一定有收获数据 --父类原型链继承借助构造函数继承组合继承原型式继承寄生式继承组合式继承混入方式继承ES6的extends继承内容有点多,耐心看完一定有收获数据 --父类// 父类function Father(vehicle){ this.name = 'Father'; t...原创 2020-05-05 21:13:02 · 221 阅读 · 0 评论 -
详谈JavaScript深浅拷贝
详谈JavaScript深浅拷贝目录详谈JavaScript深浅拷贝为什么?浅拷贝深拷贝为什么?什么是拷贝:复杂粘贴为什么分深浅拷贝:JavaScript里面的数据存储分为两种:简单数据类型:存储在栈里面复杂数据类型:地址存在栈里面,数据存储在堆里面而复杂粘贴是在操作栈里面的数据需要使用的数据:let obj = { name: 'JavaScript', ...原创 2020-05-05 21:07:02 · 402 阅读 · 0 评论 -
this指向问题
this指向的形式如果是一般函数,this指向全局对象window在严格模式(“use strict”)下的this指向为undefined对象调用的函数指向,this指向该对象构造函数里的this指向创建出来的实例箭头函数(()=>{})里的this指向当前调用的环境(执行上下文)定时器的this指向windowcall、apply、bind可以更改this指向一般函数function fn(){ console.log(this)}fn()严格模式下的this原创 2020-07-16 16:55:51 · 353 阅读 · 0 评论 -
对于闭包的理解
什么是闭包一句话:能够读取其他函数内部变量的函数一个小例子解释一下闭包function fn(){ var name = 'web'; return function(){ console.log(name); }}var bar = fn();bar(); // web这是一个最简单的闭包,为什么bar方法输出的是web,很简单的一点就是,bar方法与fn方法一直连接在一起,也就是这样不懂作用域、作用域链和预编译的可以看...原创 2020-07-22 20:15:39 · 141 阅读 · 0 评论 -
预编译让你更好理解JS
预编译你都不知道,你还写面试题什么是预编译内核对JS代码的解释过程预编译的规则全局范围(GO)局部范围(AO 函数范围)面试题分析一波看GO对象看AO对象注意事项什么是预编译预编译就是在执行代码前js引擎对整篇js代码var和function关键字声明的变量进行声明提前内核对JS代码的解释过程语法分析 :基本的语法错误,例如中文,变量命名规范等低级错误预编译:把代码按照一定的规则,放到GO和AO中解释执行:任何的方法和语句全部会被转换成对象,GO(Global Object),AO(Acti原创 2020-07-13 19:23:45 · 239 阅读 · 0 评论 -
JavaScript加载时间线
JavaScript加载时间线客户端的JavaScript理想的时间线Web浏览器创建Document对象,并开始解析web页面。解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中,这个阶段document.readyState = “loading”.当解析器遇到link外部css,创建线程加载,并继续解析文档。当解析器遇到script外部js,并且没有设置...原创 2020-03-11 22:51:36 · 307 阅读 · 0 评论 -
JavaScript异步加载和网页渲染过程
JavaScript异步加载原理分析什么是网页渲染的过程?什么是同步加载?什么是异步加载?网页的渲染过程页面的渲染过程:DOMTree + CSSTree = renderTree构建文档对象模型(DOM)构建CSS对象模型(CSSOM)构建渲染树(Render Tree)布局(Layout)绘制(Painting)什么是同步(Synchronous)加载?我们平...原创 2020-03-11 22:50:15 · 3120 阅读 · 0 评论 -
JavaScript原型和原型链
什么是原型,什么是原型链原型构造函数,是一种特殊的方法,主要用来创建对象实例化对象的。每个构造函数都有prototype(原型)属性,每个函数对象都有prototype(原型)属性,这个属性是一个指针,指向一个对象即这个原型对象是用来给实例共享属性和方法的,而且每个实例化都有一个指向原型对象的指针。var obj = new Object(); 这个例子的Object原型就是 Obje...原创 2020-02-17 13:41:37 · 201 阅读 · 0 评论 -
JavaScript实现数组去重
// 数组去重的对象var array = { // 需要去重的数组 arrs : [1,2,3,2,3,4,3,5,6,4,5,7,54,34,44,54], // 去重以后的新数组 newarrs : [], // 1.双层循环+(开关思想||数组长度) arr1 : function(){ this.newarrs = []; for(var i = 0; i <...原创 2019-12-28 15:37:35 · 135 阅读 · 0 评论 -
JavaScript的数据存储方式
JavaScript的数据类型基本数据类型:number、string、undefined、null、boolean(存放在栈)引用数据类型:arry、function、object等(存放在堆)栈与堆的介绍堆栈是一个特定的存储区或寄存器,它的一端是固定的,另一端是浮动的。对这个存储区存入的数据,是一种特殊的数据结构严格按照“先进后出”的原则在内存储器(随机存储器)中开辟一个区域作为...原创 2019-12-13 11:33:00 · 415 阅读 · 0 评论 -
JavaScript作用域链
作用域变量和函数的可访问范围,它控制着函数与变量的可见性和生命周期局部作用域((AO Activation Object)) 只能在当前函数中访问全局作用域(window(Global Object)) 一旦定义,在代码中的任何位置都可以访问var a = 10; // 全局变量function fun(){ var b = 100;// 局部变量 c = 1000; // ...原创 2019-12-23 19:21:07 · 136 阅读 · 0 评论 -
JavaScript的switch语句与经典案例年月日
switch语法switch(n){ case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码}工作原理首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 ca...原创 2019-12-05 10:48:09 · 1654 阅读 · 3 评论 -
JavaScript运算符
JavaScript 运算符用于赋值,比较值,执行算术运算等。运算符类型1.算术运算符:+、-、*、/、%、++、–算术运算符用于执行两个变量或值的运算。-、 *、 /、 %会将数据转换为number在做计算a++:先赋值在自加++a:先自加在赋值var a = 10, b = 10;console.log(a++); //10console.log(a); //11con...原创 2019-12-21 14:51:12 · 139 阅读 · 0 评论 -
JavaScript的隐式类型转换
js中的变量是没有数据类型 但是变量的值有数据类型数据类型基本数据类型:number、string、boolean、null、undefined引用数据类型:array、function、object 等等typeof检测是数据类型有:number、string、boolean、undefined、object、function隐式类型转换(自动转换)1.string + numb...原创 2019-12-21 14:16:58 · 87 阅读 · 0 评论 -
JavaScript的强行转换
js中的变量是没有数据类型 但是变量的值有数据类型数据类型基本数据类型:number、string、boolean、null、undefined引用数据类型:array、function、object 等等typeof检测是数据类型有:number、string、boolean、undefined、object、function强行转换1.转换为字符串类型:变量.toString...原创 2019-12-21 11:22:37 · 310 阅读 · 0 评论 -
JavaScript基本语法结构
JavaScript词法结构编程语言的词法结构是一套基础性的规则,用来描述如何使用这门语言来编写程序。作为语法的基础,它规定了一系列语法结构,在JavaScript中就是ESMAScript(语法标准)字符集JavaScript是使用Unicode字符集编写的。Unicode是ASCII和Latin-1的超集,对于字符集,现阶段最完美的一个是utf-8,基本上支持了世界上所有的语言。区分大...原创 2020-03-17 22:13:13 · 748 阅读 · 0 评论 -
详谈五大主流浏览器
为什么是五大浏览器市场份额有自己独特的内核(渲染引擎+js引擎)五大浏览器的区别独特的解释语法(FireFox最接近ECMA的标准)渲染效果不同性能不一样,支持脚本的执行速度等不一样简单介绍一下五大浏览器1.Internet Explorer浏览器(IE)IE浏览器微软公司旗下,目前用户量最多(主要是因为微软的绑定销售)。IE开发计划开始于1994年夏天,微软为抵抗当时...原创 2019-12-03 19:57:54 · 13445 阅读 · 0 评论 -
JavaScript发展史
一、什么是JavaScript?JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多,只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O(输入/输出)相关的 API,都要靠宿主环境(host...原创 2019-11-30 14:14:57 · 593 阅读 · 0 评论