你不一定知道的几个前端小知识
1
大家都知道js在进行小数运算时会有丢失精度问题(其他语言也是),比如:
0.1+0.2 //0.30000000000000004
有一种比较快捷的方式是先把小数乘以10的整数倍,然后再运算,如:
(0.1*10+0.2*10)/10 //0.3
但是这种方式也不是100%准确的,乘以整百也可能精度丢失,比如:
2177.74*100 //217773.99999999997
所以常用的几种处理方式有:
- 把小数转化为字符串,拆分整数部分和小数部分分别计算,然后再把结果进行拼接;
- 先乘10的整数倍,然后再用toFixed进行四舍五入,这样能保证结果还是准确的,如:
(2177.74*100).toFixed(0); //217774
- 直接运算,然后再用toFixed(或者Math.round)进行四舍五入,用于对计算结果不是很精确的场景。
2
<a>标签的download属性可以用来设置用户下载后的文件名称,如:
<ahref="xxx.jpg"download="改名后的文件,jpg" />
但是有一点要注意,文件不能跨域,如果下载文件处于和当前域不同的域,则改名失败。
3
用instanceof来判断跨iframe的对象类型时,会失效。比如我们在父页面定义了一个数组:
var arr = [1,2,3];
然后在iframe中来访问父页面的arr对象:
console.log(parent.arr); //[1,2,3] console.log(parent.arr instanceof Array); //false
原因是不同的窗口各有一套自己的宿主对象,父窗口的Array构造器与子窗口的Array构造器并不是同一个,也就是说,arr是父窗口的Array实例,并不是子窗口的Array实例。
这就是为什么我们判断数组的时候要这么办:
Object.prototype.toString.call(parent.arr); //[object Array]
4
我们常用JSON.stringify方法来格式化json对象。其实这个stringify方法还接收第三个参数,支持把格式化后的字符串加一定缩进,比如:
JSON.stringify(obj, undefined, 4);
结果如下:
{"num": 1234,"str": "字符串", "arr": [ 1, 2, 3, 4, 5, 6 ], "obj": { "name": "tom", "age": 10, "like": [ "a", "b" ] } }
没错,上面是一个字符串。如果再用正则匹配一下,把属性/值给加上不同的高亮颜色,那么一个简单的json数据展示功能就有了:
关于高亮函数的写法,我在这篇文章中有详细提到,有兴趣可以去看看。
5
js的Date对象在进行日期计算时,会自动进行月份判断以及平年闰年判断,我们可以利用这一点来做一些小技巧。
当我们想计算某个月份有多少天时,经常会先判断当前月份有30天还是31天,还得判断是否是闰年。 其实,计算2016年7月份有多少天,可以这么写:
new Date(2016, 7, 0).getDate(); //31
js的月份从0开始,这里我们其实求的是8月0号,就会得到7月31号,也就拿到了31这个天数。
同样,想计算某天再过20天是几月几号,也不必进行自己判断月份以及闰年。比如计算今天再过20天的日期:
new Date(2017, 6, 20+20);//Wed Aug 09 2017 00:00:00 GMT+0800
得到了8月9号。看到了吧,日期那里超过了31号,js会自动帮你计算到下个月。
本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/5690173.html,如需转载请自行联系原作者
你不一定知道的几个前端小知识相关推荐
- html前端小知识:制作简单的纯文字图标按钮
今天分享下"html前端小知识:制作简单的纯文字图标按钮"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
- 前端基础知识点-每天一个基本知识点(100+个前端小知识,你是否都知道?)
文章目录 前言 第一回合 一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
- 每天10个前端小知识(1day)
一.var和let的区别 1.var是函数作用域,let是块级作用域. 在函数中声明了var,整个函数内都是有效的,比如说在for循环内定义的一个var变量,实际上其在for循环以外也是可以访问的. ...
- 前端小知识:ElementPlus引入阿里图标使用(超详细-手把手教学)
文章目录 1. 下载阿里图标 2. 将下载的文件压缩放入到项目中 3. 直接本地打开压缩文件里面的使用Demo - demo_index.html 4. 根据上面的Demo提示,页面需引入文件里面的i ...
- 30+ 个工作中常用到的前端小知识
1. JS为什么单线程 一个简单的原因就是,js在设计之初只是进行一些简单的表单校验,这完全不需要多线程,单线程完全可以胜任这项工作.即便后来前端发展迅速,承载的能力越来越多,也没有发展到非多线程不可 ...
- 原生js绑定click为什么点一次执行两次_前端小知识10点(2020.10.8)
1.redux的compose实现 例: const add = num => num + 10 const multiply = num => num * 2 const foo = c ...
- vue 中indexof_前端小知识-Vue中使用indexOf() 方法
定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(searchvalue,fromindex) 参数描述searc ...
- html图片平铺div,前端小知识——图片平铺问题
图片平铺有两种方式,直接写img标签或者通过background-image方式 1,img标签 HTML: CSS: .row{ margin:0,auto; width:100%; } img{ ...
- 前端小知识:返回浏览器上一页(back、go、referrer)
官方文档(document.referrer): https://developer.mozilla.org/zh-CN/docs/Web/API/Document/referrer 官方文档(h ...
最新文章
- C语言中常用的数学公式
- Spring-AOP实现的两种方式
- 迟到的2017年终总结与2018目标规划
- [html]说说页面中字体渲染规则是怎样的?会有哪些因素影响字体的渲染?
- Saving James Bond - Easy Version 原创 2017年11月23日 13:07:33
- jmu-枚举WeekDay
- python自动化运维之python2.6升级2.7和集中病毒扫描
- 数据科学的原理与技巧 二、数据生成
- Kubernetes常见操作
- 虚伪,不只是形容一个人
- GdiPlus[34]: IGPGraphicsPath (一)
- JAVA 根据身份证计算年龄
- 完美简单的集成高德地图导航和语音播报功能
- STM32F103通过M26实现远程在线IAP
- 整样运用计算机考试,计算机一级考试Word的十个应用技巧
- 利用Power BI制作RFM客户分析模型
- mac SourceTree 配置比较工具 Beyond Compare 4
- 字号,行距,磅,像素……(word排版)
- leetcode报错:reference binding to misaligned address 0xbebebebebebec0ba for type ‘int‘, which requir 4
- 计算机仿真和计算机应用与软件,计算机应用与软件杂志 - 第 2 页 - 论文投稿 - 小木虫 - 学术 科研 互动社区...