![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 74
皮的狠
这个作者很懒,什么都没留下…
展开
-
indexedDB 前端缓存实战
1.## indexedDB 前端缓存实战业务场景:最近项目组接触一个H5的项目,里面有一个课程学习的功能,里面基本都是一些比较大的gif 图片或者是一些高清的 jpg /png 图片,这个时候如果每次通过用户学习的过程中点击下一步再去下载对应的图片,如果刚好下载的图片比较大就会导致用户交互体验极差的问题,所以当时就想在学习课程之前让用户提前下载资源并缓存在前端,这时需要在前端做一个缓存,前端缓存使用比较多的是localStorage/sessionStorage ,但是应该很明显不符合我们的业务场景(原创 2021-05-25 16:37:33 · 1546 阅读 · 0 评论 -
bind,call,apply方法的实现
bind,call,apply方法的实现1.call 方法:第一个参数为 this 指向,第二个参数及以后 为传入执行函数的参数。function myCall(context){ const arg = [...arguments].slice(1); //复制第二个以后的参数 用于传入执行函数 ,此处arguments 为类数组所以不具有数组的一些操作方法,所以需要先进行转换 co...原创 2020-03-10 14:50:32 · 255 阅读 · 0 评论 -
手动实现Promise
实现Promise原创 2020-03-09 11:15:16 · 680 阅读 · 0 评论 -
实现Promise.all 方法
实现Promise.all 方法1.Promise.all() 方法执行完成之后还是返回一个 promise对象 所以封装方法的时候必须最终返回一个promise对象function promiseAll(arrayPromise){ return new Promise((resolve,reject)=>{ })}2.传入Promise.all方法内的promise数...原创 2019-11-28 15:21:28 · 1578 阅读 · 0 评论 -
egg RESTFul 接口实例
egg RESTFul 接口实例1.获取/查询//路由router.get('/userInfo',controller.home.getUserInfo);//controller/home async getUserInfo(){ let params = this.ctx.request.query; //获取get请求参数 console.log('查询所有用户...原创 2019-11-16 17:37:12 · 806 阅读 · 0 评论 -
JSON.stringify()方法的其他使用
JSON.stringify()的其他用途1.JSON.stringify()方法除了可以用来将普通对象转化成json对象(字符串对象),还可以用来将任何类型的数据转化成其字符串形式。let a=123;JSON.stringify(a);// '123'let b=true;JSON.stringify(b);// 'true'...原创 2019-01-17 09:22:19 · 452 阅读 · 0 评论 -
async 与await 解决请求回调地狱(多层请求嵌套)
async 与await 解决请求回调地狱(多层请求嵌套)1.async(异步) 与 await(同步) 方法 解决请求回调地狱 是通过promise来实现的,所以使用这两个方法进行测试也是要模拟返回一个promise对象===手动返回。*没有返回promise对象将无法实现异步同步(错误写法)function test1(){ setTimeout(()=>{ return ...原创 2019-02-21 16:18:18 · 8364 阅读 · 0 评论 -
实现mergePromise函数,把传进去的数组顺序先后执行,并且把返回的数据先后放到数组data中
实现mergePromise函数,把传进去的数组顺序先后执行,并且把返回的数据先后放到数组data中。(Promise.all 原理)const asyncFun = ms = > new Promise((resolve,reject)=>{ //此处 用 setTimeout 模拟 异步操作 setTimeout(()=>{ resolve(); },...原创 2019-06-12 16:55:12 · 969 阅读 · 1 评论 -
Object.isFrozen()方法判断一个对象是否被冻结
Object.isFrozen()方法判断一个对象是否被冻结1.一个对象被冻结 必须满足两个条件:该对象 的所有属性值 不可 被修改 ----Object.defineProperty(object,attr,{writable:false});该对象 不可被 配置 ----- Object.defineProperty(object,attr,{configurable:f...原创 2019-07-15 10:14:16 · 927 阅读 · 0 评论 -
js 数组操作 会修改原数组的 方法
js 数组操作 会修改原数组的 方法1.pop() 删除 数组 最后一个元素;2.shift() 删除 数组 第一个元素;3.push() 数组 最后 添加 一个 元素;4.unshift() 数组 开头 添加 一个 元素;5.sort() 数组 排序6.splice() 数组 删除 替换 插入 元素7.reverse() 数组 反转以上7个方法 是会 修改...原创 2019-07-15 10:23:28 · 2883 阅读 · 0 评论 -
ES6中构造函数内super关键字的使用
ES6中构造函数内super关键字的使用1.在ES6实现继承中会有constructor构造函数,而实现继承的子类构造函数中必须先调用super()方法,此处的super()为父类的构造方法,而如果不调用,浏览器则会报错。class Person { constructor(name,age){ this.name=name; this.age=age; }}class Son...原创 2019-01-21 14:27:33 · 1959 阅读 · 0 评论 -
利用Object.defineProperty方法实现数据双向绑定
使用Object.defineProperty方法实现数据双向绑定1.代码如下:html 部分: <input type="text" id="input"><div id="text"> </div> //为了看到效果设置一个div用于展示内容<button id="btn">click m原创 2019-01-19 17:16:41 · 230 阅读 · 0 评论 -
Object.defineProperty()方法
Object.defineProperty()方法1.Object.defineProperty方法参数:—Object.defineProperty(obj,attrName,describe)该方法接受3个参数1.obj : 为操作的对象2.attrName: 为操作的对象的属性 (操作的对象内没有该属性,则表示为添加该属性)3.describe: 为操作属性的特性 (是一个对象...原创 2019-01-19 16:20:36 · 146 阅读 · 0 评论 -
JS继承的实现
JS继承的实现1.常用的实现继承的方法有:通过call方法改变父构造函数内的this指向,来实现继承。通过apply方法改变父构造函数内的this指向,来实现继承。通过prototype原型来实现继承。2.方法1:利用call实现继承 代码如下:/*父函数*/ function Person(name,age){ this.name=name; this.ag...原创 2018-11-23 19:45:36 · 118 阅读 · 0 评论 -
JS限制输入框只能输入数字
限制输入框只能输入数字(使用正则)let reg=/[/D]/g;input.oninput=function(){ this.value=this.value.replace(reg,'');}/D: 匹配数字/d: 匹配除数字以外的任何原创 2018-11-24 22:35:41 · 3683 阅读 · 0 评论 -
require.js
require.js项目中的使用1.主要用于管理js文件,按需加载js。使用://在HTML中只需引入&amp;amp;lt;script src=&amp;quot;lib/requirejs/require.js&amp;quot; data-main=&amp;quot;js/main&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&原创 2018-11-25 14:51:01 · 105 阅读 · 0 评论 -
ES6解构赋值详解-数组
解构-数组 详解及各种使用场景。1.ES6中引入了新的取值方法:解构这篇文章主要讲其中一种模式的使用—数组解构,另一种对象模式的结构参看我的另一篇文章。使用格式: let [变量名,…]=[数组元素]; 赋值的时候是一一对应的,第一个变量取到的值是对应数组内第一个元素。原来需要取数组内的值:let arr=[1,2,3];let x=arr[0], y=ar...原创 2018-11-26 15:21:20 · 1090 阅读 · 0 评论 -
ES6解构赋值-对象
ES6解构赋值-对象1.对象的解构赋值,与数组书写格式有点不同。在对象解构中,不是像数组解构一样,按顺序索引,直接解构匹配。而是根据 匹配条件 与对象中的属性名进行匹配。匹配成功的(匹配条件==属性名),就能取到值,匹配不到的同理值为undefined. let {name,age}={name:'张三',age:18};// {name:name,age:age}={name:'张三...原创 2018-11-27 10:49:13 · 530 阅读 · 0 评论 -
ES6新增数据结构-set与map
ES6新增数据结构-set与map1.Set*Set是ES6新增的一种数据类型,怎么将它与对象数组区分呢使用typeof set对象 返回的是object:let set=new Set();console.log(typeof set); //object这种方法并不能将区分,应该使用到:Object原型上的toString方法,toString方法会将调用该方法的对象以字符...原创 2018-11-28 14:40:05 · 483 阅读 · 0 评论 -
封装XMLHTTPRequest
原生js封装promise1.代码如下: function getJson(type,url,data){ const promise=new Promise(function(resolve, reject){ const handle=function(){ if(this.readyState!=4){ return; } ...原创 2018-12-18 09:03:05 · 701 阅读 · 0 评论 -
JS获取当前时间(24小时制)
JS获取当前时间(24小时制)let date=new Date();let newdate=date.toLocaleString('chinese', { hour12: false }); //获取24小时制,中国时间,打印出 2019/01/03/ 08:40:32原创 2019-01-03 08:41:21 · 36401 阅读 · 2 评论 -
展开运算符的使用
展开运算符的使用1.数组的使用:可以达到复制数组的作用let arr1=[1,2,3];let arr2=[4,5,6,...arr1];console.log(arr2);注意展开运算符只能达到浅层克隆(复制)let arr=[1,[2,3],{name:'张三'}];let arr2=[...arr];arr2[2].name='李四';arr2[1][0]=100...原创 2019-01-18 12:01:27 · 505 阅读 · 0 评论 -
JS运行机制
Javascript运行机制var test1 = function(){ alert(1);}var test2 = function(){ alert(2);}setTimeout(function(){ alert(3);},1000);test();test2();//打印出结果为: 1 2 3上述代码为什么是这个结果呢?为什么不是 3 ...原创 2018-11-26 11:08:51 · 315 阅读 · 0 评论