分类：javascript

2021
02-20

如何在JavaScript中使用localStorage详情

如果你是一名开发人员，想要进入到.NET的世界，你需要知道都有哪些可能。由于.NETFramework是.NET生态系统中最流行的技术，你可以用它来构建各种各样的应用程序，但是最近，出现了一些新的东西，比如.NETCore和.NETStandardlibrary。我们可以在项目或构建中使用它吗?localStorage对象是web编程中应用最广泛的对象之一。它提供了在用户计算机上本地存储键值对的简单解决方案。大多数web开发人员都喜欢localStorageAPI，... 继续阅读 >
2021
01-29

JavaScript如何实现防止重复的网络请求的示例

前言在开发中，经常会遇到接口重复请求导致的各种问题。对于重复的网络请求，会导致页面更新多次，发生页面抖动的现象，影响用户体验。例如当前页面请求还未响应完成，就切换到其他路由，那么这些请求直到响应返回才会中止。无论从用户体验或者从业务严谨方面来说，取消无用的请求确实是需要避免的。实现思路** 1.在发送请求前先拦截当前请求地址（url+方法+参数）；** 2.开启一个请求队列用于保存当前地址；**&... 继续阅读 >
2021
01-26

Javascript中的奇葩知识,你知道吗?

久经沙场的前辈们，写了无数代码，踩了无数的坑。但有些坑，可能一辈子也踩不到摸不着，因为根本不会发生在业务代码里～～1Function.prototype竟然是个函数类型。而自定义函数的原型却是对象类型。typeofFunction.prototype==='function';//truefunctionPeople(){}typeofPeople.prototype==='object';//true所以我们设置空函数可以这么做：//OKconstnoop=Function.prototype;//OKconstnoop=()=>{};2一个... 继续阅读 >
2021
01-26

JavaScript中clientWidth,offsetWidth,scrollWidth的区别

一、概念它们都是Element的属性，表示元素的宽度：Element.clientWidth  内容+内边距-滚动条-----不包括边框和外边距 == 可视内容Element.scrollWidth  内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容Element.offsetWidth  元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件二、举例1、仅有横向滚动条的情况<!DOCTYPEhtml><htmllang="en"><head><meta... 继续阅读 >
2021
01-17

JavaScript/TypeScript 实现并发请求控制的示例代码

场景假设有10个请求，但是最大的并发数目是5个，并且要求拿到请求结果，这样就是一个简单的并发请求控制模拟利用setTimeout实行简单模仿一个请求letstartTime=Date.now();consttimeout=(timeout:number,ret:number)=>{return(idx?:any)=>newPromise((resolve)=>{setTimeout(()=>{constcompare=Date.now()-startTime;console.log(`At${Math.floor(compare/100)}00return`,ret);re... 继续阅读 >
2021
01-17

JavaScript this关键字的深入详解

一、前言this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说，this的绑定一直是一件非常令人困惑的事。二、了解this学习this的第一步是明白this既不指向函数自身也不指向函数的词法作用域，你也许被这样的解释误导过，但其实它们都是错误的。随着函数使用场合的不同，this的值会发生变化。但总有一条原则就是JS中的thi... 继续阅读 >
2021
01-08

JavaScript 中的六种循环方法

Javascript中的遍历循环1.for循环对于数值索引的数组来说，可以使用标准的for循环来遍历值constarr=[1,2,3,4];for(leti=0;i<arr.length;i++){console.log(i);}2.for...in循环for...in循环可以用来遍历对象的可枚举属性列表（包括原型链上的属性）constmyObject={};Object.defineProperty(myobject,"a",{//可枚举enumerable:true,value:2,})Object.defineProperty(myobject,"b",{//不可枚举enumerable:false,value:2... 继续阅读 >
2021
01-08

JavaScript的一些小技巧分享

数组去重ES6提供了几种简洁的数组去重的方法，但该方法并不适合处理非基本类型的数组。对于基本类型的数组去重，可以使用...newSet()来过滤掉数组中重复的值，创建一个只有唯一值的新数组。constarray=[1,1,2,3,5,5,1]constuniqueArray=[...newSet(array)];console.log(uniqueArray);>Result:(4)[1,2,3,5]这是ES6中的新特性，在ES6之前，要实现同样的效果，我们需要使用更多的代码。该技巧适用于包含基本类... 继续阅读 >
2020
12-29

JavaScript 防盗链的原理以及破解方法

HTTPReferer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器藉此可以获得一些信息用于处理。通过该头域的值，我们可以检测到访问目标资源的源地址背景前段日子在自学做项目的时候发现明明在项目中引用了线上存在的图片但是在自己的项目中却怎么也显示出来查阅资料后发现是这些第三方网站设置了防盗链破解防盗链先说说防盗链的原理，http协议中，如果... 继续阅读 >
2020
12-29

11个Javascript小技巧帮你提升代码质量(小结)

本文会不断更新，不足之处欢迎评论区补充。1.提炼函数好处：避免出现超大函数。独立出来的函数有助于代码复用。独立出来的函数更容易被覆写。独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。语义化将多段分离的逻辑放在不同的函数中实现，可以使代码逻辑清晰，清楚的看到每一步在做什么。代码举例：实现获取数据，然后操作dom显示数据，最后添加事件函数提炼前//逻辑都写在一起，需要将所有逻辑看... 继续阅读 >
2020
12-26

如何在JavaScript中正确处理变量

变量无处不在。即便我们写一个小函数或一个小工具，也要声明、赋值和读取变量。增强对变量的重视，可以提高代码的可读性和可维护性。1.建议使用const，要么使用let用const或let声明自己的JavaScript变量。两者之间的主要区别是const变量在声明时需要初始化，并且一旦初始化就无法再重新赋值。//const需要初始化constpi=3.14;//const不能被重新赋值pi=4.89;//throws"TypeError:Assignmenttoconstantvaria... 继续阅读 >
2020
12-17

javascript 数组(list)添加/删除的实现

javascript数组Array（list）添加/删除unshift：将参数添加到原数组开头，并返回数组的长度pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefinedpush：将参数添加到原数组末尾，并返回数组的长度concat：返回一个新数组，是将参数添加到原数组中构成的splice(start,deleteCount,val1,val2,…)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,…reverse：将数组反序sort(orde... 继续阅读 >
2020
12-15

JavaScript中Object、map、weakmap的区别分析

前言ECMAScript6以前，在JavaScript中实现“键/值”式存储可以使用Object来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。但这种实现并非没有问题，为此TC39委员会专门为“键/值”存储定义了一个规范。作为ECMAScript6的新增特性，Map是一种新的集合类型，为这门语言带来了真正的键/值存储机制。Map的大多数特性都可以通过Object类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值得... 继续阅读 >
2020
12-14

如何在JavaScript中等分数组的实现

最近开源了一个Vue组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个star支持一下，谢谢各位了。github地址：https://github.com/qq449245884/vue-okr-tree在本教程中，我们来学习一下如何使用Array.splice()方法将数组等分，还会讲一下，Array.splice()和Array.slice()它们之间的不同之处。1.将数组分为两个相等的部分我们可以分两步将数组分成两半：使用length/2和Math.ceil()方法找到数组的中间索引使用中间... 继续阅读 >
2020
12-14

javascript中call,apply,bind的区别详解

在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的，先看一个例子。varxw={name:"小王",gender:"男",age:24,say:function(){alert(this.name+","+this.gender+",今年"+this... 继续阅读 >
2020
12-10

JavaScript对象访问器Getter及Setter原理解析

JavaScript对象访问器Getter及Setter原理解析 在ES5中引入了set和get关键字，允许访问和设置对象的属性。set关键字：set关键字接收一个参数，用于修改对象的属性值；个人觉得类似于在对象内部的每一个方法前都隐藏一个set。get关键字是用来在对象外部获取对象的属性值或方法；在对象外部可以使用set关键字修改对象的属性值。使用原型方法和set、get关键字添加或修改对象的属性或方法：以上观点是自己不成熟的一些看法，不当之处请大家批评指正。以上就是本文的全部... 继续阅读 >