![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
Coder Ben
不知名前端开发者
展开
-
为什么只有window.onpopstate,没有window.onpushstate和window.onreplacestate?
### 原因原生JavaScript 不支持,也无法直接监听 pushState 和 replaceState 事件。### 解决方案通过重写这两个 API 来实现调用可监听:原创 2023-06-15 16:54:13 · 243 阅读 · 0 评论 -
Javascript之定时器精度问题
JavaScript中常用的定时器有setTimeout和setInterval两种。这两种定时器都是通过浏览器提供的API实现的,存在一些系统性的问题,因此不太靠谱。定时器的精度存在一定的误差,误差范围一般是几毫秒。例如,如果你使用setTimeout函数来设置一个延时1000毫秒的定时器,实际上可能是延时了1003毫秒或1005毫秒甚至更多。这使得定时器不能百分之百准确地按照预期的时间执行回调函数。JavaScript的事件循环机制包括了宏任务和微任务两个队列,它们的执行优先级不同。原创 2023-05-09 09:27:32 · 872 阅读 · 0 评论 -
JavaScript中‘xxx‘.length数目不准确问题
很多人会认为字符串的长度(`‘xxx’.length`)就是肉眼看到的字符的数量,其实并不是。原创 2022-11-19 11:37:48 · 712 阅读 · 0 评论 -
【工具函数】判断是否为JSON字符串
const isJSON = (str) => { if (typeof str !== 'string') return false; try { const json = JSON.parse(str); return typeof json === 'object'; } catch (e) { return false; }};原创 2022-01-25 10:14:20 · 1275 阅读 · 0 评论 -
推荐一个网站——用小练习的方式逐步学习正则表达式
推荐一个网站——用小练习的方式逐步学习正则表达式https://regexlearn.com/原创 2021-12-13 09:40:49 · 531 阅读 · 0 评论 -
Object.keys()的顺序问题及参数解析
1. 参数为Object时结论:先提取Number类型的key,按升序排列,再提取String类型的key,按定义顺序排列注意事项:前一类需满足0<number<2^32-1,否则按字符串处理(见特殊示例)// 属性为字符(串)Object.keys({ c: 11, bb: 22, a: 33})// output: ["c", "bb", "a"]// 属性为数字Object.keys({ 2: 'aa', 1: 'cc', 3: 'bb'}原创 2021-07-14 09:54:56 · 4943 阅读 · 0 评论 -
js中file、blob、base64的相互转换,前端图片压缩、裁剪、文件格式转换
最近做了个前端图片压缩,用到了很多js文件操作api,整理一下防止健忘:1. file转base64/** * 获取文件的Base64 * @param file {File} 文件 * @param callback {Function} 回调函数,参数为获取到的base64 */function fileToBase64(file, callback) { const fileReader = new FileReader() fileReader.read原创 2020-09-14 15:59:50 · 8878 阅读 · 2 评论 -
JSON.stringify()的深入用法——第2、3个参数
第2个参数作用:用于过滤、格式化没有或者是null,则所有属性被序列化JSON.stringify({name: 'Ben', age: 18})JSON.stringify({name: 'Ben', age: 18}, null)// "{"name":"Ben","age":18}"是数组,则属性名在该数组内的属性被序列化JSON.stringify({name: 'Ben', age: 18}, ['age'])// "{"age":18}"是函数,则该函数会遍历属性,r原创 2020-06-22 16:02:14 · 1847 阅读 · 2 评论 -
【元素尺寸小结】scrollHeight、clientHeight、offsetHeight
scrollHeigh:元素内容的总高度,包括content、溢出的content、padding、伪元素。不包括元素的border和margin。clientHeight:元素可见部分的高度,包括content、padding。不包括元素的border和margin。offsetHeight:元素高度,包括content、padding、border、滚动条。不包括伪元素。...原创 2020-06-16 15:55:50 · 331 阅读 · 0 评论 -
常用正则表达式
常用正则表达式身份证号/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/邮箱/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]....原创 2020-05-14 11:33:39 · 600 阅读 · 0 评论 -
echarts使用技巧
1. 动态渲染inst.setOption() // inst就是echarts.init()返回的图表实例2. 图表自适应window.addEventListener('resize', function() { box.css('height', 0.75 * box.width()) // box是图表的容器 inst.resize()})3. 图表...原创 2020-04-15 15:06:19 · 144 阅读 · 0 评论 -
JS中的“0.1 + 0.2 != 0.3”问题
js中有个经典“0.1 + 0.2 != 0.3”的问题,if(0.1 + 0.2 === 0.3) { alert('yes')} else { alert('no')}执行后会弹出”no“。what?原来,js中浮点数不能直接用等号判断相等,需要通过”2个数的差值小于等于最小精度值“判断相等,如下:if (Math.abs(num1 - ...原创 2020-04-15 14:53:58 · 266 阅读 · 0 评论 -
Symbol 基本用法——自定义for...of循环
var o = new Objecto[Symbol.iterator] = function() { var v = 0 return { next: function() { return { value: v++, done: v > 10 } } } };for(var v of...原创 2020-04-15 14:42:19 · 433 阅读 · 0 评论 -
元素偏移小结——screenX/Y、pageX/pageY、clientX/clientY、offsetX/offsetY
e.screenX、e.screenY: 鼠标位置相对于电脑屏幕左上角的偏移量。e.pageX、e.pageY: 鼠标位置相对于页面左上角的偏移量e.clientX、e.clientY: 鼠标位置相对于浏览器窗口左上角的偏移量(屏幕滚动时,这个左上角也会移动,所以适配屏幕滚动的时候应使用pageX/pageY)e.offsetX、e.offsetY: 鼠标位置相对于当前元素左上角(不包...原创 2020-04-15 14:38:59 · 499 阅读 · 0 评论 -
正则表达式——ip地址、mac地址、隔位插入
IP地址:/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/.test(ip)MAC地址:/^[A-F0-9]{2}(-[A-F0-9]{2}){5}$/.test(mac)每隔2个字符,插入一个'-'str.replace(/(.{2})/g, '$1-')...原创 2020-04-15 14:36:42 · 267 阅读 · 0 评论 -
小球拖拽和碰撞检测的简单实现(原生JS)
直接附代码:<!DOCTYPE html><head> <style> #div1, #div2 { width: 100px; height: 100px; position: fixed; border-radius: 50px; } #div1 ...原创 2019-07-11 15:38:38 · 699 阅读 · 0 评论 -
js创建对象的两种常用方式
一、混合的构造函数+原型方式基本思想:使用构造函数定义对象的非函数属性,再使用原型定义对象的函数属性示例:function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("Mike","John");原创 2017-03-10 17:18:50 · 700 阅读 · 0 评论 -
【前端攻城狮之路】JavaScript函数的apply方法与call方法浅析
JavaScript函数的apply方法与call方法浅析首先,function是一个指向Function对象,函数名是一个指向函数的指针。那么在函数体内,就会有一个作用域,即this关键字。this关键字指的是函数运行的作用域,举个例子来说 function funcA() { alert(this); alert("F转载 2016-12-20 22:32:46 · 423 阅读 · 0 评论 -
js 中 javascript:void(0) 真正含义
我想使用过ajax的都常见这样的代码:here但这儿的void(0)究竟是何含义呢?Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。void 操作符用法格式如下:1. javascript:void (expression)2. javascript:void expressionexpression 是一个要计算的 J转载 2017-04-11 16:46:59 · 623 阅读 · 0 评论 -
【前端攻城狮之路】小总结——JS获取DOM的不同方式
原文地址:http://blog.csdn.net/binzai325/article/details/6777516 内容有添改JS获取DOM的不同方式1、querySelector作用:根据id、class、tagName等任意选择符获取元素语法: document.querySelector('#id')、document.querySelector('.class')形式参...转载 2017-03-26 22:41:25 · 344 阅读 · 0 评论 -
【前端攻城狮之路】Angular篇
最近开始学习Angular,下面是整理的笔记,已经放到了GitHub上,欢迎指点交流~~~https://github.com/coderben2017/Angular-Notes原创 2017-08-11 20:22:33 · 328 阅读 · 0 评论 -
玩转js闭包
闲逛SegmentFault看到一个例子:function foo () { var local = 1 function bar() { local++ return local } return bar}var func = foo()func()在Chrome调试工具里粘贴上述代码,输出是2。没错,其实这是一个闭包。由于js是函数作用域的缘故,local原创 2018-01-11 18:20:37 · 220 阅读 · 0 评论 -
Can (a ==1 && a== 2 && a==3) ever evaluate to true?
在 JavaScript 中 (a ==1 && a== 2 && a==3) 可能为 true 吗?这个问题是国外一位求职者最近在面试一家大型科技公司时遇到的一个问题。他的回答是「不可能」,而面试方说「nothing is impossible」,然后就没有然后了。虽然在实际工作中可能没人会写这样的代码,但题主还是放不下,苦思冥想了两个礼拜,终于还是决定在 Stack Overflow 上寻求解转载 2018-01-18 15:37:10 · 756 阅读 · 0 评论 -
[Vue.js — iView — Tree] 点击树组件父节点名称时展开、收缩后代节点
适用于iview tree。```<Tree ref="tree" :data="data" :load-data="loadData" @on-select-change="selectChange" show-checkbox/>``````data() { return { data: [], id: 0 }},methods: {...原创 2018-08-21 16:59:08 · 10025 阅读 · 0 评论 -
获取多选下拉框(select标签设置multiple属性)的值
<select multiple>不能直接获取value,需要借助该元素的options属性。如下:<select id="select" multiple> <option value="1">1111</option> <option value="2">2222</op原创 2018-09-05 17:03:23 · 17932 阅读 · 1 评论 -
【jQuery DataTable】表格显示英文问题
在某些情况下,DataTable初始化会用英文渲染按钮、提示信息等,这时需要自己配置成中文。$('#example').DataTable({ language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果"原创 2018-12-13 12:47:48 · 1232 阅读 · 0 评论 -
jstree树节点上添加图标
只需在节点上添加icon字段(string类型,与id、text字段同级)例如:{ id: 'as3sd8as6sa7', text: '房间1', icon: 'fa-house' children: []}该字段包含“/”时,value解析为图片地址;不含“/”时,value解析为<i>标签的class例如:{ ...原创 2019-01-28 11:21:34 · 4821 阅读 · 0 评论 -
经典面试题--JS的防抖、节流
直接附演示代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-12 17:21:42 · 456 阅读 · 0 评论 -
JS中的this指针详解
原文地址:http://www.cnblogs.com/kongxy/p/4581223.html (内容根据自己理解,有改动) JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂。这篇文章就来揭示其中的奥秘。 借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。这句话看似平常,可是要非常注意三个字:“运行时”,这说明th转载 2017-03-05 21:22:54 · 3829 阅读 · 0 评论