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

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

以上这些小知识,你学到了吗?

文章始发于我的微信公众号,想看其他文章的同学,欢迎扫描下方抽风的二维码关注哦:

时间: 2024-10-21 20:38:55

你不一定知道的几个前端小知识的相关文章

前端小知识~~关于css3新增知识~~归纳总结

1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s) 2.Font-face 特性 Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没

web前端小知识,安书整理的

网页设计理论知识 构成网页的页面元素 1,  网站的LOGO LOGO的设计,往往具有一些共同的特点:精美,独特,与网站的整体风格相融,能够体现网站的类型,内容,风格等. 2,  网站的Banner Banner是指网页横幅广告,最常用的是486*60像素的标准标志广告 3,  导航栏 导航栏是为于页眉区域,导航栏分为框架导航,文本导航,图片导航 4,  文本 5,  图像 6,  动画 7,  超级链接 网页版面的布局技巧 平衡:平衡指页面的左右,上下和谐而有秩序 对比:对比是指利用色彩.色调

自己容易遗漏的前端小知识

1.padding是内边距,margin是外边距; 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并. 引用w3school中的例子 2.相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 3.将服务器端构建好的JSON数据转化为可用的JavaScript对象 var jsonObject = eval("(" + json+ ")")

前端小知识-css3

一.实现图片倒影 如图: css属性 .style{ -webkit-box-reflect:below 0 linear-gradient(transparent,white 50% ,white); } 原文地址:https://www.cnblogs.com/yyxh/p/8968841.html

前端小知识2

<!DOCTYPE html> <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" con

前端小知识

$CSS button里不嵌入a标签 disabled效果会不理想 css的属性选择器(w3school查看详细) input[type="text"]{color:blue;width:100px} <input type="text" value="属性选择器"> $代码编辑器 vscode vscode访问git,下载devServer,ctrl+shift+p调出命令框,搜索devServer:start 在http://lo

实用前端小知识

/* 单行文字溢出省略号 */ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; height: xxx; /* 多行文字溢出省略号 */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;height: xxx; /* 多行文字溢出省略号 */ word-wrap:break-word;

前端小知识点积累

作为一名前端,一直想说,一入前端深似海啊.也许在很多人眼中,前端就是简简单单的写页面的,但实际上前端的水还都是很深的,具体就不做叙述了. 今天来的主要目的是分享平时积累的一些前端小知识 一:js,jq获取各种高度 Javascript: alert(window.screenTop);                     //浏览器距离Top alert(window.screenLeft);                     //浏览器距离Left alert(window.scre

前端开发知识学习概要

前端开发工具 编辑器 editPlus sublime 浏览器: Chrome Safari Firebox IE 插件:firebug chrome: inspect element html 组成结构 1 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,不是 HTML 标签: 2 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令, 浏览器读取. 3 <html> 4 <head> 5 描述页面