当前位置: 首页 > news >正文

你不一定知道的几个前端小知识

1

大家都知道js在进行小数运算时会有丢失精度问题(其他语言也是),比如:

0.1+0.2 //0.30000000000000004

有一种比较快捷的方式是先把小数乘以10的整数倍,然后再运算,如:

(0.1*10+0.2*10)/10 //0.3

但是这种方式也不是100%准确的,乘以整百也可能精度丢失,比如:

2177.74*100 //217773.99999999997

所以常用的几种处理方式有:

  1. 把小数转化为字符串,拆分整数部分和小数部分分别计算,然后再把结果进行拼接;
  2. 先乘10的整数倍,然后再用toFixed进行四舍五入,这样能保证结果还是准确的,如:
    (2177.74*100).toFixed(0); //217774
  3. 直接运算,然后再用toFixed(或者Math.round)进行四舍五入,用于对计算结果不是很精确的场景。

2

<a>标签的download属性可以用来设置用户下载后的文件名称,如:

<a href="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会自动帮你计算到下个月。

 

 

相关文章:

  • linux red hat 安装svn
  • D1-FFmpeg拼接视频
  • JAVA 实现 基于RSA算法的签名验签
  • JS之路——字符串函数
  • [转] 常用SQL查询语句
  • WINDOWS下调用GetTokenInformation的奇怪之处--两次调用
  • 修改windows的语言
  • ReactNativeweexDeviceOne对比
  • jquery去重
  • 码农看天下
  • nfs/samba相关
  • 定时(隔一段时间)提交ajax更新未读消息
  • 【案例】主从替换之后的复制风暴
  • redis密码管理
  • 认识CoreData-使用进阶
  • ➹使用webpack配置多页面应用(MPA)
  • create-react-app项目添加less配置
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • JavaScript服务器推送技术之 WebSocket
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • OSS Web直传 (文件图片)
  • PHP的类修饰符与访问修饰符
  • Vue 重置组件到初始状态
  • 阿里云Kubernetes容器服务上体验Knative
  • 闭包--闭包作用之保存(一)
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 诡异!React stopPropagation失灵
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 配置 PM2 实现代码自动发布
  • 扑朔迷离的属性和特性【彻底弄清】
  • 前端技术周刊 2018-12-10:前端自动化测试
  • 学习JavaScript数据结构与算法 — 树
  • 一天一个设计模式之JS实现——适配器模式
  • 在 Chrome DevTools 中调试 JavaScript 入门
  • 7行Python代码的人脸识别
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • $L^p$ 调和函数恒为零
  • (1)Nginx简介和安装教程
  • (4)事件处理——(7)简单事件(Simple events)
  • (阿里巴巴 dubbo,有数据库,可执行 )dubbo zookeeper spring demo
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (附源码)计算机毕业设计SSM教师教学质量评价系统
  • (黑马C++)L06 重载与继承
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (十一)图像的罗伯特梯度锐化
  • (算法)求1到1亿间的质数或素数
  • (新)网络工程师考点串讲与真题详解
  • (转)为C# Windows服务添加安装程序
  • .NET 中的轻量级线程安全
  • .NET/C# 编译期间能确定的相同字符串,在运行期间是相同的实例
  • .net遍历html中全部的中文,ASP.NET中遍历页面的所有button控件
  • .pings勒索病毒的威胁:如何应对.pings勒索病毒的突袭?
  • /etc/skel 目录作用
  • @软考考生,这份软考高分攻略你须知道