![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
丹丹的小跟班
这个作者很懒,什么都没留下…
展开
-
Object.is 和==,===的区别
使用==比较当左右两边类型不同时,会进行类型转换,而Object.is则不会。例如 ‘’ == false 的结果是 true,但是 Object.is() 不会对其操作数进行类型转换。Object.is和===直接的唯一区别就是对带符号的0或NaN之间的不同。静态方法确定两个值是否为相同值。原创 2024-03-12 17:00:29 · 253 阅读 · 0 评论 -
WeakMap
WeakMap原创 2023-12-05 13:16:59 · 264 阅读 · 0 评论 -
前端动态格式化时间
前端时间动态格式化原创 2023-01-11 17:51:11 · 942 阅读 · 0 评论 -
说说v-model
v-model的介绍原创 2023-01-08 18:09:09 · 579 阅读 · 0 评论 -
对el-select进行二次封装,解决数据量过大造成页面卡顿问题
解决select数据量过多造成的页面卡顿原创 2022-12-30 15:40:48 · 3895 阅读 · 5 评论 -
手写前端路由(hash)
手写hash版路由原创 2022-09-01 16:12:11 · 492 阅读 · 0 评论 -
String()和toString()方法得区别
String()和toString()区别原创 2022-06-10 09:31:51 · 604 阅读 · 0 评论 -
Vue里面的虚拟DOM真的比真实DOM快吗?
Vue里面的虚拟DOM并非就比原生DOM快。原创 2022-06-02 18:07:21 · 1303 阅读 · 0 评论 -
快速将一个对象数组进行去重操作
arr.filter((item,index) =>{ return arr.findIndex(item1 =>item1.id==item.id) == index})原理:判断数组里面的对象是否第一次出现(判断标准为第一次出现的下标与filter原有的index是否一致),不是第一次出现的就排除。...原创 2022-03-25 10:13:57 · 306 阅读 · 0 评论 -
函数参数声明
直接来看代码function demo(a, b) { console.log(a) function a(){}}一直以来我都以为函数内部参数也是需要在函数内部有变量声明,赋值这个过程的,所以上面的代码我会理解为:function demo(a, b) { function a(){}(函数声明) var a; (参数声明) a = 1(参数赋值) console.log(a)}但是其实输出的结果确实一个函数,问了几个大佬才知道参数的声明原创 2022-02-17 16:12:36 · 512 阅读 · 0 评论 -
将复杂对象扁平化处理
我们常见的一半都是将多维数组进行扁平化操作,但有时候我们也需要对对象进行类似操作,对象有可能是数组对象,也有可能是对象数组。//判断数据类型function typeJudge(val, type) { return Object.prototype.toString.call(val) === `[object ${type}]`}function objjectFlat(val, newObj) { if (typeJudge(val, 'Array')) { val.forEach(o原创 2022-02-17 09:46:03 · 228 阅读 · 0 评论 -
浅谈promise
promise原创 2022-01-13 10:57:24 · 368 阅读 · 0 评论 -
js同步异步
js同步异步原创 2022-01-12 16:15:56 · 497 阅读 · 0 评论 -
手写instanceof方法
instanceof原创 2022-01-07 16:07:20 · 625 阅读 · 0 评论 -
vue路由传参的问题
问题今天项目出现问题,使用的是路由传参,第一次打开新增页面使用传参,传了参数1,此时1是为纯数字,也就是number类型,但是对页面进行刷新后发现数字1变成了string类型。原因百度了解到,原来,当刷新本页时,路由地址附带参数进行了一次刷新,页面在读取num时,当成字符串处理了。解决方法可以使用Number()方法强制转换为数字类型进行计算。解决方法可以使用Number()方法强制转换为数字类型进行计算。...原创 2021-12-04 16:58:17 · 188 阅读 · 0 评论 -
原生toFixed的bug
toFixed的bug解决原创 2021-11-17 17:18:21 · 149 阅读 · 0 评论 -
delete和Vue.delete
之前从没发现delete和Vue.delete有区别,今天在网上无意间刷到了,做个总结。delete和和Vue.delete都是对数组或对象进行删除的方法。这两种方法对于对象来说其实是没有区别的,使用方法会直接删除对象的属性(物理删除)。let obj = {name: 'fufu', age: 20}// delete obj.age => {name: 'fufu'}// Vue.delete(obj, 'age') => {name: 'fufu'}// 测试发现对于对原创 2021-10-15 14:55:28 · 1185 阅读 · 0 评论 -
js里面的链表
链表这个词对很多前端开发者来说都是比较陌生的,多出现在c语言个java里面。但是链表并非这些语言独有的。他代表的是一种存储结构,在任何语言都有自己的实现方式,js也不例外。链表与数组很多时候链表看起来和数组有些相似,数组其实也是一种存储结构,但是它是一种线性表的顺序存储结构,它的特点是用一组地址连续的存储单元依次存储数据元素。这也是数据可以使用有序的下标获取元素的原因。但是却也正是如此,带来了一些缺陷。每次数次添加或者删除元素,都会对该元素位置后面的所有元素做出位置调整,可能会是一个O(n)的操作。而链原创 2021-10-15 10:10:45 · 166 阅读 · 0 评论 -
项目-指令权限篇
前言权限是一个后台管理系统最重要的要素之一,权限的合理划分可以提高任务的安全性,并且也可以提高生产效率。那么怎么去控制一个程序的权限呢?权限的前后端权限的控制也是分为前后端的。一般而言,权限交由后端控制是最安全稳妥的,因为前端控制权限只能通过对已经请求到的数据进行过滤,隐藏等操作,但这个时候客户端一定是已经拿到所有数据了,所以是有一定的安全风险的。权限的类型权限也是有分类的,在项目里面最常见的就是操作权限,菜单权限,角色权限等等。操作权限权限操作主要是对前端页面一些按钮或者输入框等用户可操作的原创 2021-09-26 14:56:40 · 165 阅读 · 0 评论 -
手写promise.all
promise.all在日常项目里经常会碰到,今天咋们手写下promise.all这个方法,并且探究下其中的细节。先来几个democonst demo1 = new Promise((resolve, reject) =>{ setTimeout(() => { resolve(1) }, 1000)})const demo2 = new Promise((resolve, reject) =>{ setTimeout(() => { resolve(2) }原创 2021-09-10 18:26:02 · 319 阅读 · 0 评论 -
map和filter方法对于稀缺数组的处理
会直接跳过稀缺数组元素的方法:filter,reduce,foreach不会直接跳过稀缺数组元素的方法:find,findIndex会直接跳过稀缺数组元素但是结果会保留稀缺元素的方法:map。原创 2021-09-08 10:05:07 · 247 阅读 · 0 评论 -
js强制转换
数字和其他类型数据进行比较时,会把其他类型数据转换为数字进行比较(有些数据类型,比如数组会先使用toString转换为字符串,最后再转换为数字)。布尔值和其他数据类型进行比较时,会优先将布尔值转换为数字,然后再将其他数据类型转换为数字进行比较,也就是进行上一个规则的操作。undefined 除了和null进行非全等比较返回true,其它均返回false。null 除了和 undefined进行非全等比较返回true,其它均返回false。数组(或对象)和字符串进行比较时,数组(或对象)..原创 2021-09-08 09:25:42 · 650 阅读 · 0 评论 -
正则匹配相同字符
正则匹配相同字符原创 2021-09-07 14:58:02 · 3900 阅读 · 0 评论 -
defineProperty的基本认识
defineProperty这个方法大家多多少少都有所耳闻。vue更是让他“声名远播”,今天就来好好总结下这个vue2版本里,不可或缺的defineProperty方法。1.定义Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。备注:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。2.语法Object.defineProperty(obj, prop, descri原创 2021-07-21 14:43:03 · 687 阅读 · 0 评论 -
一些数组方法对空的处理
ES5 中forEach(), filter(), reduce(), every() 和some()都会跳过空位。map()会跳过空位,但会保留这个值join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。ES6 中都会将空位当做undefined在Array.form方法里面的参数二就是一个map方法,但是该方法不会跳过任何元素,即便是空。...原创 2021-07-02 11:30:13 · 120 阅读 · 0 评论 -
js中一个对象当做参数传递时候?
在平时使用过程中,好像把对象直接传递给函数做参数好像没啥function changeObj(obj) { obj.name = 'ff'}let obj = new Object()obj.name = 'dandan'changeObj(obj) console.log(obj) // {name: 'dandan'}从上述代码看出,当对象作为参数传递给函数并且在函数内部发生改变时,对象本身也会改变。复合引用对象的特性。继续看下面的代码function changeObj(ob原创 2021-07-02 11:30:56 · 686 阅读 · 0 评论 -
对象的深浅冻结
浅冻结直接使用Object.freeze() 可以冻结对象,此对象的属性不能修改,添加与删除属性的操作也被禁止,但是只可以防止第一层级的属性被修改,更深层级的属性操作却不能被禁止。let person = { name: 'dandan', love: {eat: 'watermelon'}}Object.freeze(person )person.name = 'fufu'person.age = 10console.log(person)//打印出 { name: 'dand原创 2021-07-01 11:17:29 · 101 阅读 · 0 评论 -
检测属性是否存在
1.in方法:检测当前对象是否存在某个属性(不管当前这个属性是对象的私有属性还是公有属性,只要有结果就是true)let obj = {name: 'fjl'}console.log('name' in obj) // trueconsole.log('toString' in obj) // true2.hasOwnProperty方法:检测当前对象是否存在某个私有属性(必须时私有的属性)let obj = {name: 'fjl'}console.log(obj.hasOwnPrope原创 2021-07-01 11:02:40 · 113 阅读 · 0 评论 -
构造函数的return
在使用构造函数创建实例时,浏览器会默认在最后将创建的对象堆内存地址返回,但如果在创建实例中使用了return呢?1.当return一个基本类型时,return不会发生作用,构造函数依旧返回一个实例对象。function Fn(name, age) { this.name = name this.age = age return "hahaha"}var instance = new Fn("fjl", 20)console.log(instance) //Fn {name: "fj原创 2021-07-01 10:52:42 · 1885 阅读 · 0 评论 -
DOM映射机制
###1.形参跟argumentsarguments是所有实参的集合(类数组对象),与形参无关arguments与形参有映射机制//当形参与实参长度一致时,arguments与形参有映射机制function test(a, b, c) {console.log(arguments) //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] arguments[0] = 100console.log(argume原创 2021-07-01 10:26:03 · 122 阅读 · 0 评论 -
原型链解析
###必记三句#####1.所有的函数数据类型都天生自带一个属性:prototype(原型),这个属性的值是一个对象,浏览器默认会开辟一个堆内存进行存储#####2.在浏览器给prototype开辟的堆内存中,有一个自带的属性:constructor,这个属性存储的值是当前函数本身。#####3.每一个对象都一个__proto__的属性(两个下划线),这个属性指向当前实例所属类的prototype(如果不确定是谁的实例,那都是Object的实例)###原型链图解###原型链练习题...原创 2021-07-01 09:36:52 · 67 阅读 · 0 评论 -
this指向问题
一直纠结this的指向问题,最近看到三句话总结了几乎所有this的指向问题,简单粗暴1.元素绑定事件this就是当前操作的元素。<div id="div">div</div><script> document.getElementById("div").onclick = function() { console.log(this) } //打印出<div id="div">div</div></script>2.原创 2021-07-01 09:17:41 · 97 阅读 · 0 评论 -
setTimeout的隐藏小知识
众所周知,setTimeout的作用是等待多少秒后,执行函数,那么这个函数有什么讲究呢?1.直接执行来看看以下代码function go() {console.log(1)}setTimeout(go(), 1000) 以上代码会立即执行方法,打印1,并且只执行一次。这是因为setTimeout的参数1为一个待执行函数,所以当参数一变成立即执行函数时,会立刻执行函数,并将函数的返回值当作参数1,所以1秒后执行的参数1其实是函数执行返回undefined。是不是觉得很简单,那看看下面的代原创 2021-07-01 09:17:23 · 306 阅读 · 1 评论 -
reduce()方法总结
最初觉得这个方法跟其他循环遍历的方法没啥区别,这几天看到一篇文章突然发现这个方法的强大之处,记录下基础介绍W3C介绍array.reduce(function(total, currentValue, currentIndex, arr), initialValue);/* previousValue : 必需。初始值, 或者计算结束后的返回值。 currentValue: 必需。当前元素。 currentIndex: 可选。当前元素的索引;原创 2021-07-01 09:16:35 · 354 阅读 · 0 评论 -
js的装箱操作和拆箱操作
**装箱操作:**把基本数据类型转换为对应的引用类型的操作。拆箱操作: 把引用类型转换为基本数据类型的操作。上面两个概念只是简洁的实质总结,可能看完后大家心里会产生疑问,到底怎么样叫装箱操作和拆箱操作呢?下面我们一起带着这个疑问往下看~~#####装箱操作首先我们要知道在js中有三个基本包装类型:Number,String,Boolean,先简单看下小demovar str="hello world";var strRes=str.split(" ");console.log(strRes)转载 2021-06-30 11:04:13 · 193 阅读 · 0 评论 -
js的稀疏数组和密集数组
一般来说,JavaScript中的数组是稀疏的。什么是稀疏呢?稀疏也就是说,数组中的元素之间可以有空隙,因为一个数组其实就是一个键值映射。1、稀疏数组首先来创建一个稀疏数组看看长什么样var arr = Array(3)console.log(arr) //[empty × 3]上面的代码创建了一个长度为3的数组,但是当我们遍历的时候会发现,他并没有元素,所以js会默认跳过这些元素。这就是稀疏数组。还可以以这种形式创建稀疏数据var arr = []arr[0] = 1arr[100]原创 2021-06-30 10:59:40 · 194 阅读 · 0 评论 -
js的十种排序算法
n: 数据规模k:“桶”的个数In-place: 占用常数内存,不占用额外内存Out-place: 占用额外内存稳定性:排序后2个相等键值的顺序和排序之前它们的顺序相同O(1), O(n), O(logn), O(nlogn) 的区别1.冒泡排序原理:对一个数组里的前一个数和后一个数进行比较,把两者之间最大的数放在后面,循环一轮之后最大的就在末尾了。然后同理在排序剩下的n-1 ,n-2 …个数为什么会有两个for循环:之所以在最外层嵌套一个for循环是因为如果仅仅只有一个f...原创 2021-06-30 10:57:40 · 386 阅读 · 0 评论 -
addEventListener与onclick的区别
在js中一直使用的addEventListener,依稀记得是看视频时老师说的这个好些,但也一直不明白两者之间的优缺点和联系,今天整理了下,对两者进行简单分析。1.addEventListener可以对同一个元素绑定多个事件,执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个事件,如有多个,后面的事件会覆盖前面的事件。document.getElementById("myDIV").addEventListener("click", function() { alert(1)});原创 2021-06-30 10:51:18 · 7135 阅读 · 4 评论 -
Array-from()用途
语法: Array.from(arrayLike[, mapFunction[, thisArg]])arrayLike:必传参数,想要转换成数组的伪数组对象或可迭代对象。mapFunction:可选参数,mapFunction(item,index){…} 是在集合中的每个项目上调用的函数。返回的值将插入到新集合中。(是一个不会跳过空值的map函数)thisArg:可选参数,执行回调函数 mapFunction 时 this 对象。这个参数很少使用。Array.from() 第一个用途.原创 2021-06-30 10:51:51 · 151 阅读 · 0 评论 -
for循环经典面试题
收集下经典面试题for循环<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>for循环经典面试题</title> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3<原创 2021-06-30 10:52:58 · 693 阅读 · 0 评论