![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
韭伍後
前端爬坑ing
展开
-
求字符串最长公共前缀
for循环第一个字符串,然后再for循环除了第一个字符串以外的其它字符串,比较其它字符串是否以某个字符串开头,从而找到公共前缀。for循环所有字符串,然后for循环每个字符串,一个一个比较,如果不相等,则结束循环。原创 2023-04-28 10:47:49 · 230 阅读 · 1 评论 -
js数组去重
定义一个obj,用reduce遍历数组,如果obj里面存在当前项的id,则不做操作,如果obj存在当前项的id,则obj添加当前id数据,并且push到reduce的累加项里。最后return preArr。判断map对象是否有id和name,如果有则返回false,被filter过滤掉。如果没有则map.set进去返回true被filter捕获。2、使用map和filter。4、基本数据类型的数组去重。3、使用forEach。1、使用reduce。原创 2023-04-26 17:26:12 · 208 阅读 · 0 评论 -
数组按照某个key分组
【代码】数组按照某个key分组。原创 2023-04-10 13:49:57 · 263 阅读 · 0 评论 -
js 实现数组元素交换位置
注意:splice删除一个元素会返回一个数组,这个数组里的值就是删除的那个元素。原创 2023-03-12 20:29:12 · 2715 阅读 · 0 评论 -
vue3实现前端导出Excel
vue3实现前端导出Excel原创 2023-02-23 20:30:36 · 2287 阅读 · 3 评论 -
vue3实现导出png
vue3实现导出png原创 2023-02-22 23:24:16 · 358 阅读 · 0 评论 -
vue3实现导出pdf
vue3实现导出pdf原创 2023-02-22 23:09:29 · 862 阅读 · 0 评论 -
vue3中使用jszip压缩文件
vue3中使用jszip压缩文件原创 2023-02-21 22:50:59 · 1674 阅读 · 0 评论 -
vue3中使用html2canvas实现截图功能
vue3中使用html2canvas实现截图功能原创 2023-02-21 22:12:15 · 1720 阅读 · 0 评论 -
如何优雅的生成表格数据
Array(10)返回的是长度为10的数组,但是每项为空。fill函数是用固定值替换数组中的元素。停止填充位置 (默认为。原创 2023-01-10 10:15:37 · 80 阅读 · 0 评论 -
js判断是pc端还是移动端(包括ipad)
true代表pc端,false代表移动端。原创 2022-07-29 11:48:19 · 863 阅读 · 0 评论 -
前端经典面试题整理
https://blog.csdn.net/cai_niao5623/article/details/120993974 https://blog.csdn.net/cai_niao5623/article/details/121120372 https://blog.csdn.net/cai_niao5623/article/details/120902001 https://blog.csdn.net/qq_43340606/article/details/12原创 2022-07-06 12:08:19 · 526 阅读 · 0 评论 -
js动画-tween.js
1、安装npm install @tweenjs/tween.jsoryarn add@tweenjs/tween.js2、变幻的数字案列<template> <div class="compA"> <input v-model.number="num" type="number" step="20"> <p>{{ animatedNumber }}</p> </div></tem.原创 2022-04-10 22:56:23 · 962 阅读 · 0 评论 -
js动画-学习笔记
1、匀速运动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2022-04-10 14:52:54 · 495 阅读 · 0 评论 -
js将有父子关系的数据转换成树形结构(tree)数据
Vue.prototype.translateDataToTree = (data) => { let parents = data.filter(value => value.pid == 'undefined' || value.pid == null) let children = data.filter(value => value.pid !== 'undefined' && value.pid != null) let translator = (.原创 2022-01-21 16:42:36 · 850 阅读 · 0 评论 -
后端返回二进制文件流,前端如何下载文件
saveFile(data) { axios({ method: 'post', url: 'http://10.10.177.40:5000/Report/Create', data: data, // responseType: 'blob', }) .then(({ data: res }) => { if (res.code) { console.log('返回的json', res) .原创 2022-01-18 17:00:03 · 531 阅读 · 0 评论 -
JS金钱(¥)格式化
金钱(¥)格式化原创 2022-01-12 10:50:49 · 515 阅读 · 0 评论 -
localStorage加过期时间
setExpire(key, value, expired) { let obj = { data: JSON.stringify(value), time: Date.now(), expire: expired }; localStorage.setItem(key, JSON.stringify(obj));},getExpire(key) { let val = localStorage.getItem(key);.原创 2021-12-13 18:18:24 · 805 阅读 · 0 评论 -
JavaScript中 with的用法
刚看到这个东西的时候我是懵的,with是什么玩意,我咋从来没听过,抱着学习的态度,于是开干学习with。查阅了相关资料发现,不推荐使用with关键字,嘿嘿嘿,是不是可以不要学了,no,学无止境,有的底层代码会用到这个,或者面试官可能会问到。所以不管怎么说,还是了解一下的好。with语句 扩展一个语句的作用域链。语法:with (expression) {statement }expression:将给定的表达式添加到在评估语...原创 2021-11-09 15:13:26 · 280 阅读 · 0 评论 -
Javascript 严格模式
JavaScript 严格模式(strict mode)即在严格的条件下运行。它修复了部分语言上的不足,提供更强的错误检查,并增强安全性。进入严格模式1、方法中进入function fn() { "use strict" console.log('干一些事情')}fn()2、整个脚本使用严格模式<script type="text/javascript"> "use strict"; console.log('做一些事情')<原创 2021-11-09 14:02:21 · 274 阅读 · 0 评论 -
后台返回base64 前端转文件下载
一开始我还挺懵的,我以为后端返回的是文件流,后来我才发现后端返回的仅仅是base64字符串,我前端需要把这个base64字符串转成文件流,然后下载这个文件。下面上核心代码// dataurl是后端返回的base64字符串,name是文件名dataURLtoDownload(dataurl, name="xxx.xlsx") { var bstr = atob(dataurl), //解析 base-64 编码的字符串 n = bstr.length, u8arr = new原创 2021-11-08 15:45:29 · 2626 阅读 · 0 评论 -
浅谈async/await
async和await是es6新增的js特性。字面意思来理解,async是异步的意思,await是等待的意思,等待异步代码执行完成。它们可以让我们更简单高效的处理异步操作。下面一起来探究async和await吧asyncasync是加在函数前面的,用来定义这个函数是异步函数特性1:自动将常规函数转换成Promise,返回值也是一个Promise对象async function show() { console.log('干一些事。。。') return '测试'}//原创 2021-11-08 15:24:54 · 239 阅读 · 0 评论 -
ES6 展开运算符
扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。作为剩余参数当函数参数个数不确定的时候,用剩余参数,每个函数最多只能声明一个剩余参数,而且必须放到形参末尾处function fn(a,...item) { console.log(a,item)}fn(1,35,64,35) // 1,[35, 64, 35]fn(3,65,3,53,64,3,54,35) // 3,[65, 3, 53, 64, 3,原创 2021-11-05 16:52:04 · 132 阅读 · 0 评论 -
js中同步队列、异步队列
单线程多线程单线程模型:历史延续,JS是单线程模型,它在同一时间只能执行一个任务,其他的任务在后排队等待。多线程模型:一次执行多个任务。你的电脑开了很多的软件,打开任务管理器其实可以看到,这些软件都会开各自的进程,这些进程里有分为很多的线程,这些线程就相当于这个软件里的很多引擎,他们可以同时干着很多的事情。就像你开车一样,方向盘,发动机,空调等等,把汽车比做进程,那这些东西就是线程,他们可以同时干着自己的事情。js中同步异步同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的原创 2021-11-05 14:29:13 · 1902 阅读 · 0 评论 -
js预处理机制
js代码在解析也就是执行之前首先都会进行预处理操作。对var 声明的变量进行预处理,只声明不定义。对声明式函数进行预处理,既声明又定义。同名声明式函数,后者覆盖前者。对于所有var的变量首先会在其作用域内的开头声明该变量或者该方法,但是不定义也就是不赋值。记住这个点,我们看下面的代码1、fn();function fn() { console.log('hello')}var fn = function() { console.log('hello world')}/原创 2021-11-04 17:36:49 · 588 阅读 · 2 评论 -
js防抖和节流
防抖和节流是啥,当一个事件高频率触发并且我们不需要这个函数执行那么多次的时候就可以用到防抖和节流。防抖和节流属性性能优化部分,毕竟资源有限,能不浪费就不浪费。防抖第一次触发事件时,不立刻执行函数,而是给一个延迟值,比如1s。1s内如果没有再次触发该事件,那么就执行函数。 1s内如果再次触发该事件,那么当前的计时取消,重新开始计时效果:如果短时间内大量触发同一事件,只会执行一次函数。简而言之,防抖就是多次操作合并为一次操作/** fn [function] 需要防抖的函数* dela原创 2021-11-04 11:21:38 · 86 阅读 · 0 评论 -
js数组常用方法
findIndex返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。// 返回值:数组下标// 是否改变原数组:否var arr = [3,4,5,3,2,4,89,100,23]var index = arr.findIndex(item => item == 100)console.log(arr) // [3, 4, 5, 3, 2, 4, 89, 100, 23]console.log(index) // 7find返回数组中满足原创 2021-11-03 17:42:42 · 239 阅读 · 0 评论 -
浅谈js闭包
简介闭包是啥,用一句通俗的话来说就是能够读取函数内部局部变量的函数。闭包在一个函数内部定义一个新的函数,在执行的时候,会将这个函数返回,也可能是返回一个对象。闭包为啥会出现呢,它其实是js作用域链的特性而产生的。我们在函数内部是可以直接访问函数外部的全局变量的,但是我们在函数的外部是无法直接获取到函数内部的局部变量的,如果我们想在函数外部获取函数内部的局部变量,那么就要用到闭包。函数内部可以直接访问函数函数外部的全局变量var num = 66function fn1() { con原创 2021-11-03 15:08:39 · 140 阅读 · 0 评论 -
浅谈Object.create()
1原创 2021-11-03 11:41:50 · 242 阅读 · 0 评论 -
JS中的自执行函数
啥是自执行函数,有的说是立即执行,有的说是自动执行,不管到底是啥,我们只要自己理解这个自执行就好。一般定义函数的方式function fn1() { console.log('我是函数1')}fn1() // 我是函数1var fn2 = function() { console.log('我是函数2')}fn2() // 我是函数2自执行函数有三种写法 ( function ( “ 参数 ” ) { " 函数方法 " ; } ) (...原创 2021-11-02 16:51:47 · 1694 阅读 · 0 评论 -
ES6之Array.from()方法
Array.from()方法就是将一个类数组对象或者部署了Iterator接口的对象(Set、Map、Array)转换成一个真正的数组。那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。基本用法var arrayLike = { 0: '张三', 1: 18, 2: ['lei','hai','yuan'], 3: '上海市', length: 4}const arr = Array.from(arrayLike)c原创 2021-11-02 15:12:51 · 878 阅读 · 0 评论 -
Object.freeze()详解
我们都知道const定义基本数据类型,这个值是不可以修改的。那么我们用const定义对象,可以修改对象吗?const a = 5// a = 10 // TypeError: Assignment to constant variable.const obj = { name: '张三'}obj.name = '李四'console.log(obj) // {name: "李四"}答案是肯定的。那么如果我们想定义一个不可被修改的对象,应该怎么办呢!那就要用到Object.原创 2021-11-02 11:23:34 · 17057 阅读 · 2 评论 -
浅谈js递归
递归的本质就是函数内部调用本函数。 要避免递归出现死循环,一定要有一个结束标志(临界条件)。 一定要搞清楚递归的关系。 递归可以将复杂/抽象的问题简单化。 下面通过一些例子好好的感受一下吧1、求1-100的和/* 分析:1-100的和就是1+2+3+4+..+100 1-100的和等于1-99的和+100 1-99的和等于1-98的和+99 1-98的和等于1-97的和+98 ... 1的和等于1*/// sum函数的意思是获取1+原创 2021-11-01 18:17:00 · 514 阅读 · 0 评论 -
js中的in操作符
in 操作符用来判断属性是否存在于对象中,无论该属性存在于实例中还是原型中。基本用法var obj = { keys: ['none','false'], ShadowRoot: true}console.log('keys' in obj) // trueconsole.log('ShadowRoot' in obj) // trueconsole.log('name' in obj) // false对于数组属性需要指定数字形式的索引值来表示数组的属性名称原创 2021-11-01 10:40:33 · 1616 阅读 · 0 评论 -
js的arguments对象详解
在函数调用的时候都会传递两个隐式参数:第一个就是上下文对象this,第二个就是封装实参对象arguments。arguments对象有什么作用呢,我们怎么使用呢?下面我们一一讲解1、可以在函数内部访问所有实参function demo() { console.log(arguments[0]) // 1 console.log(arguments[1]) // 5 console.log(arguments[2]) // 6 consol...原创 2021-10-29 14:26:52 · 394 阅读 · 0 评论 -
js中的内存溢出和内存泄漏
内存溢出内存溢出是一种程序运行会出现的错误,当程序所需要的内存大于剩余内存(机器能提供给你的内存),就会抛出内存溢出的错误var obj = {}for (var i = 0; i < 100000000; i++) { obj[i] = new Array[100000000]}内存泄漏占用的内存没有及时的释放从而失去控制,从而造成内存的浪费。内存泄漏多了就容易引发内存溢出。常见的内存泄漏案例:1、意外的全局变量function fn() { va原创 2021-10-29 11:25:52 · 2431 阅读 · 1 评论 -
call、apply、bind的用法和区别
在JavaScript中,call、apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。这也是这三个函数的共同点。call()语法:fun.call(thisArg, arg1, arg2, ...)thisArg是在fun函数运行时指定的this值。arg1,arg2,...是底层调用fun方法传递的参数。如果第一个参数指定为 null和 undefined或者不传值,那么this值会自动指向全局对象(浏览器中就是wi...原创 2021-10-28 16:47:37 · 211 阅读 · 0 评论 -
ES6 Symbol详解
概述ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。基本用法和使用场景 因为Symbol是基本数据类型,不是对象,所以不能用new的方式创建var a = Symbol()var b = Symbol()console.log(a) // Symbol()console.log(b) // Symbol()console.log(a === b) // falsevar user...原创 2021-10-28 11:47:40 · 212 阅读 · 0 评论 -
浅谈Object.defineProperty()
前言Object.defineProperty()是直接在一个对象上定义一个新的属性,或者是修改已存在的属性。最终这个方法会返回该对象。简单来说就是为对象定义属性。那么在我们使用 Object.defineProperty()之前,我们是如何给对象添加或者修改属性的,下面看代码var obj = {}obj.name = '张三'obj['age'] = 18console.log(obj) // {name: "张三", age: 18}我们可以很简单的就为对象添...原创 2021-10-27 17:52:50 · 198 阅读 · 0 评论 -
for in和for of和foreach
forEach打印Array.prototype,我们可以看到Array的原型上有着forEach方法,由此我们可以大胆的推测,forEach是专门用来遍历数据的,不能遍历对象,字符串等其它数据类型[1, 2, 3, 5, 10].forEach(element => { console.log(element)});foreach 方法没办法使用 break 语句跳出循环,或者使用return从函数体内返回for invar obj = {...原创 2021-10-27 15:53:27 · 235 阅读 · 0 评论