
JavaScript
JavaScript相关
iChangebaobao
菜鸟的前端进击之路
展开
-
[Day.js] 工具类Day.js 的基本使用
工具类Day.js 的基本使用一、Day.js 简介二、使用方式三、常见用法1. 获取当前时间戳2. 格式化时间2. 指定日期一、Day.js 简介与Moment.js 一样,Day.js 是一个轻量的处理时间和日期的 JavaScript 库,两者的API 设计保持完全一样,只要你会Moment.js,那么你就会Day.js特点:和 Moment.js 相同的 API 和用法不可变数据 (Immutable)支持链式操作 (Chainable)仅 2kb 大小的微型库全浏览器兼容二、原创 2021-08-17 18:37:39 · 4558 阅读 · 0 评论 -
[JavaScript] Array.map() 与 Array.filter()区别
两者都是数组原型链中的方法,方法是遍历数组,回调函数对遍历出来的对象进行操作,但两者的返回值有所不同var kvArray = [{ key: 1, value: 10 },{ key: 3, value: 20 },{ key: 2, value: 30 }];var mapResult = kvArray.map((v,i)=>{ return v.value = v.value + 's'})console.log(mapResult)// ['10s', '20s',转载 2021-07-07 11:20:40 · 221 阅读 · 0 评论 -
[JavaScript]JS中双叹号!!的使用
JS中双冒号!!的使用我们都知道!是逻辑运算符非,!true = false,!false = true,意为取反操作那!!是什么意思呢?下面来看一道题(function () { var a = 10; var b = 20; function add(num1, num2) { var num1 = !!num1 ? num1 : a; var num2 = !!num2 ? num2 : b;转载 2021-01-18 12:02:30 · 591 阅读 · 1 评论 -
[JavaScript]JavaScript中的函数柯里化是什么?
/*** 函数柯里化 * 一个求和函数被我们柯里化了,在执行完以后,他返回了一个函数,* 这个函数负责处理剩余的参数(后传进去的),而在不传参数之后,进行’结算’,将之前的所有参数的和输出* 柯里化的作用大致有三个:* 延迟执行* 参数复用* 动态生成函数*/let curryDelay = function(fn) { let _content = []; return function accu() { if (arguments.length ==.转载 2020-10-29 10:01:13 · 145 阅读 · 0 评论 -
[JavaScript]什么是事件循环(Event Loop)?
经典面试题console.log('1')setTimeout(function callback(){ console.log('2')}, 1000)new Promise((resolve, reject) => { console.log('3') resolve()}).then(res => { console.log('4');})console.log('5')打印出来是?正确答案是1,3,5,4,2建议看这篇,非常易懂原创 2020-10-26 09:17:23 · 1625 阅读 · 0 评论 -
[JavaScript] Canvas 实现的签字板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>重新签名</title> <link rel="stylesheet" href="./css/signm原创 2020-10-16 09:00:01 · 354 阅读 · 0 评论 -
[JavaScript] 防抖与节流的区别及用法
一、防抖(debounce)含义:当调用动作过n豪秒后,才会执行该动作,若在这n毫秒内,又调用此动作,则将重新计算执行时间const debounce = (fn,waitTime)=>{ let timer=null; return function(){ clearTimeout(timeout) timeout=setTimeout(()=>{ //如果fn 没有返回一个函数,则 fn.apply 报错 fn.apply(this,arguments) //原创 2020-10-09 17:07:38 · 228 阅读 · 0 评论 -
[JavaScript]JS中 reduce 的实际应用
语法arr.reduce(callback, [initialValue])含义reduce为数组中的每个元素依次执行callback函数,不包括数组中被删除或从未被赋值的元素,callback(accumulator ,currentValue ,currentIndex ,array)函数接收四个参数, initialValue 作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。参数原创 2020-10-09 10:21:59 · 263 阅读 · 0 评论 -
[JavaScript] JS求闭区间[min,max]的和
求闭区间[min,max]的和区间是指一个集合,包含在某两个特定实数之间的所有实数,亦可能同时包含该两个实数.闭区间[10,20]表示{X|10<=X<=20},包含10和20开区间(10,20)表示{X|10<=X<=20},不包含10和20 function sum(min,max){ console.log(new Date().getTime()); var sum=0, flag=(max-min)%2; if(flag){//点原创 2020-09-10 10:24:34 · 1036 阅读 · 0 评论 -
[JavaScript] 解决JS小数相加、减、乘、除计算精度丢失的问题
https://github.com/fzred/calculatorjs原创 2020-07-15 16:06:18 · 508 阅读 · 0 评论 -
[JavaScript] js中正则表达式的使用
一、正则表达式的创建1、通过调用 RegExp 对象的构造函数创建var 变量名 = new RegExp(/表达式/);var reg= new RegExp(/123/);2、通过字面量创建var 变量名=/表达式/;var reg=/123/;二、正则表达式的使用1、text()语法:regObj.text(str)regObj 为编写的正则表达式str 为被测试的文本结果返回 true /false ,用来检测str 文本是否符合我们写的正则表达式规范var reg原创 2020-06-29 12:07:01 · 998 阅读 · 0 评论 -
[前端面试]JavaScript 发布订阅模式实现
来自迅雷前端的一道笔试题实现一个EventEmitter类,实现以下方法:1.emitter.on(name,fn) //订阅name事件,监听函数为fn,可多次订阅2.emitter.once(name,fn) //功能与on类似,但监听函数为一次性的,触发后自动移除3.emitter.emit(name,data1,data2,…,datan) //发布name事件,所有订阅该事件的监听函数被触发,data1,…,datan作为参数传给监听函数,若有多个函数,按照顺序执行4.emitter.r转载 2020-06-16 10:26:00 · 732 阅读 · 0 评论 -
[JavaScript]JS中 typeof与instanceof 区别
typeof,instanceof 区别相同点:JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空, 或者是什么类型的。不同点:typeof:返回值是一个字符串, 用来说明变量的数据类型。typeof 一般只能返回如下几个结果: number, boolean, string, function, object, undefined。 if (typeof a != "undefined") { console.log("ok"); }转载 2020-06-01 10:36:48 · 188 阅读 · 0 评论 -
[JavaScript]JSON.stringify() 的第二个参数是什么?
看到有人面试问,JSON.stringify() 的第二个参数是什么?一脸懵逼JSON.stringify()JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。语法JSON.stringify(value[, replacer[, space]])参数说明:1、value: 必需, 要转换的 JavaScript 值(通常为对象或数组)。2、replacer: 可选。用于转换结果的函数或数组。如果 replacer 为函数,则 JSON.s原创 2020-05-19 12:10:26 · 1565 阅读 · 0 评论 -
[JavaScript] JS Array.map()、ES6一Map、Set 数据结构
1. 定义和用法map() 方法 按照原始数组元素顺序依次处理元素map() 方法 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。map() 方法 不会对空数组进行检测,不会改变原始数组。2. 语法array.map(function(currentValue,index,arr), thisValue)3. 例子const users=res.items.ma...原创 2020-04-27 09:09:41 · 535 阅读 · 0 评论 -
[JavaScript]JS中sort()方法原理及使用
Array.sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的,所以首先应该把数组元素都转化成字符串(如有必要),以便进行比较。语法:ArrayObject.sort(sortby);参数sortby 可选,用来规定排序的顺序,但必须是函数。例一:按照字母顺序排序例二:还是按照字母进行...转载 2020-04-03 10:39:59 · 395 阅读 · 0 评论 -
[JavaScript] for...in、Object.keys 和 for...of 的区别
1 遍历数组通常用for循环ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。Array.prototype.method=function(){ console....转载 2020-03-12 18:26:06 · 737 阅读 · 0 评论 -
[JavaScript] FormData上传图片的使用
一、问题:FormData上传文件 , 后端接口一次只接收一张(死亡微笑),所以前端需要遍历 FileList 中的 File对象装进FormData中, 一张一张上传,这里需要了解 FormData1.1 如果使用FormData.append的话,后端应该是默认获取第一个file对象,所以需要删除前面循环装进formData中的file对象,假如我选择了2张图片,这时 formData 中...原创 2020-03-12 18:24:02 · 1593 阅读 · 0 评论 -
[JavaScript] 复杂判断(if else / switch)的更优雅写法 优化冗余
前提我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你试一下。举个例子先看一段代码/** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行中 ...转载 2020-03-12 09:54:25 · 651 阅读 · 0 评论 -
[JavaScript]如何判断当前浏览器是不是微信浏览器
在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?微信内置浏览器的 User Agent如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 lik...原创 2020-02-28 11:30:57 · 1394 阅读 · 3 评论 -
[JavaScript]异步与回调函数/闭包
前言:JavaScript 只在一个线程上运行,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。好处:实现起来比较简单,执行环境相对单纯;坏处:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。JavaScript 语言本身并不慢,慢的是读写外部数据,比如等待 Ajax 请求返回结果。这个时候,如果对方服务器迟迟没有响应,或者网络不通畅,就...原创 2020-02-21 16:53:50 · 489 阅读 · 0 评论 -
[JavaScript] 图片文件转Base64,Base64转Blob,Blob转File对象
待写原创 2020-02-21 10:03:56 · 1195 阅读 · 0 评论 -
[JavaScript]日期格式化工具(Date format)| 日期比较
DateUtil.jsDate.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1, //月份 "d+" : this.getDate(), //日 "h+" : this.getH...原创 2020-02-15 14:33:27 · 438 阅读 · 0 评论 -
[JavaScript] Js有replaceAll方法?| 如何实现replaceAll方法?
1. replace(char,CharSequence)即可以支持字符的替换,也支持字符串的替换(CharSequence即字符串序列的意思,说白了也就是字符串)比如:可以通过replace("-", “1”)把一个字符串所有的-都换成1;2. replaceAll(regex,CharSequence)即基于规则表达式的替换,比如:可以通过replaceAll("\d", “*”)把一个...原创 2020-02-15 14:29:35 · 909 阅读 · 0 评论 -
[JavaScript]验证身份证、手机号
var verifyIDcard=/^\d{17}(\d|X|x)$/i;//验证身份证var verifyTel=/^[1][3,4,5,7,8][0-9]{9}$/;//验证手机号 if(!verifyTel.test(this.sjlxdh)){ mui.alert('请输入正确的联系电话','温馨提示',function () { }); }else if(!veri...原创 2020-02-06 18:45:39 · 271 阅读 · 0 评论 -
[JavaScript]判断上传文件是否为图片(png,jpg)
js:checkImgType(file){ //用文件名name后缀判断文件类型,可用size属性判断文件大小不能超过500k , 前端直接判断的好处,免去服务器的压力。 if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name) ) { return false; }else{ return true; ...原创 2020-02-06 13:36:30 · 12107 阅读 · 0 评论 -
[JavaScript]BootCDN 稳定、快速、免费的前端开源项目 CDN 加速服务
前端开源项目 CDN 加速服务原创 2020-02-02 19:04:52 · 625 阅读 · 0 评论 -
[JavaScript]JS中map()、some()、every()、filter()、forEach()的区别
map():返回一个新的Array,每个元素为调用func的结果。新数组的长度和原来的是一样的,他只不过是逐一对原来数据里的每个元素进行操作。some():返回一个boolean,判断是否有元素是否符合func条件。数组里面所有的元素有一个符合条件就返回true。every():返回一个boolean,判断每个元素是否符合func条件。数组里面所有的元素都符合才返回true。...原创 2020-01-22 11:10:06 · 206 阅读 · 0 评论 -
[Vue]使用pdf.js实现在线预览pdf文件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>'Hello, world!' example</title></head><body><h1>'Hello, world!' example</h...原创 2020-01-10 17:07:13 · 3461 阅读 · 0 评论 -
[Vue]实现二级导航树目录
html<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>导航目录</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="...原创 2019-12-31 17:56:22 · 854 阅读 · 2 评论 -
[Vue]实现无限级导航树目录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab...原创 2020-01-02 10:20:34 · 1181 阅读 · 1 评论 -
[JavaScript] js 实现瀑布流布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl...原创 2019-12-31 17:51:27 · 218 阅读 · 0 评论 -
[JavaScript] 实现验证滑块
效果js封装写法拓展原创 2019-12-25 09:04:09 · 165 阅读 · 0 评论 -
[Canvas] 手机拍照后,等比例压缩并上传图片
现在的手机拍照效果越来越好,随之而来的是图片大小的上升,动不动就几MB甚至十几MB,直接上传原图,速度慢容易上传失败,而且后台对请求体的大小也有限制,后续加载图片展示也会比较慢。如果前端对图片进行压缩后上传,可以解决这些问题。下面函数实现了对图片的压缩,原理是在画布上绘制缩放后的图片,最终从画布导出压缩后的图片。方法中有两处可以对图片进行压缩控制:一处是控制图片的缩放比;另一处是控制导出...原创 2019-12-20 18:05:53 · 1022 阅读 · 4 评论 -
[JavaScript学习-01]JavaScript实现九宫格抽奖
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript 实现九宫格抽奖</title><style> body{ ...原创 2019-12-18 08:46:42 · 527 阅读 · 0 评论 -
[JavaScript]ES5/ES6渲染的区别,图片懒加载
ES6: 用模板字符串键盘左上角的 ~~ 渲染数据时, 使用 ${ }原创 2019-12-16 10:35:35 · 311 阅读 · 0 评论 -
[Vue] 制作短信验证码倒计时
html<div class="mui-input-row"> <label>验证码</label> <input type="text" class="mui-input-clear" style="float:left;width:37%;" v-model="VerificationCode" placeholder="请输入验证码"...原创 2019-12-06 17:25:26 · 170 阅读 · 0 评论 -
[JavaScript]FormData上传文件
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content...原创 2019-11-18 15:14:17 · 241 阅读 · 0 评论 -
[JavaScript]获取浏览器高度和宽度值
IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度FireFox...原创 2019-04-19 10:16:06 · 614 阅读 · 0 评论 -
[JavaScript] JS里面的键盘事件对应的键码
js 里面的键盘事件对应的键码js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下:keyCode 8 = BackSpace BackSpacekeyCode 9 = Tab TabkeyCode 12 = ClearkeyCode 13 = EnterkeyCode 16 = Shift_LkeyCode 17 = Control_LkeyCode 18 = Al...原创 2019-07-05 10:28:27 · 260 阅读 · 0 评论