几个前端小技巧

1：js在进行小数运算时会有丢失精度问题（其他语言也是），比如：

0.1+0.2 //0.30000000000000004

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

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

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

2177.74*100 //217773.99999999997

　　

 

a、把小数转化为字符串，拆分整数部分和小数部分分别计算，然后再把结果进行拼接;

b、先乘10的整数倍，然后再用toFixed进行四舍五入，这样能保证结果还是准确的，如：

(2177.74*100).toFixed(0);
2.3+0.3=>2.5999999999999996
Math.round((2.3+0.3)*1e12)/1e12=>2.6

直接运算，然后再用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数据展示功能就有了：



("车满满（北京）信息技术有限公司","BC5E782508498B1DB5FD8E98AC0B04F2","","")

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

⇠  箭头类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
⇠	&#8672	\u21E0	\21E0	⇢	&#8674	\u21E2	\21E2
⇡	&#8673	\u21E1	\21E1	⇣	&#8675	\u21E3	\21E3
↞	&#8606	\u219E	\219E	↠	&#8608	\u21A0	\21A0
↟	&#8607	\u219F	\219F	↡	&#8609	\u21A1	\21A1
←	&#8592	\u2190	\2190	→	&#8594	\u2192	\2192
↑	&#8593	\u2191	\2191	↓	&#8595	\u2193	\2193
↔	&#8596	\u2194	\2194	↕	&#8597	\u2195	\2195
⇄	&#8644	\u21C4	\21C4	⇅	&#8645	\u21C5	\21C5
↢	&#8610	\u21A2	\21A2	↣	&#8611	\u21A3	\21A3
⇞	&#8670	\u21DE	\21DE	⇟	&#8671	\u21DF	\21DF
↫	&#8619	\u21AB	\21AB	↬	&#8620	\u21AC	\21AC
⇜	&#8668	\u21DC	\21DC	⇝	&#8669	\u21DD	\21DD
↚	&#8602	\u219A	\219A	↛	&#8603	\u219B	\219B
↮	&#8622	\u21AE	\21AE	↭	&#8621	\u21AD	\21AD
⇦	&#8678	\u21E6	\21E6	⇨	&#8680	\u21E8	\21E8
⇧	&#8679	\u21E7	\21E7	⇩	&#8681	\u21E9	\21E9
▲	&#9650	\u25B2	\25B2	►	&#9658	\u25BA	\25BA
▼	&#9660	\u25BC	\25BC	◄	&#9668	\u25C4	\25C4
➔	&#10132	\u2794	\2794	➙	&#10137	\u2799	\2799
➨	&#10152	\u27A8	\27A8	➲	&#10162	\u27B2	\27B2
➜	&#10140	\u279C	\279C	➞	&#10142	\u279E	\279E
➟	&#10143	\u279F	\279F	➠	&#10144	\u27A0	\27A0
➤	&#10148	\u27A4	\27A4	➥	&#10149	\u27A5	\27A5
➦	&#10150	\u27A6	\27A6	➧	&#10151	\u27A7	\27A7
➵	&#10165	\u27B5	\27B5	➸	&#10168	\u27B8	\27B8
➼	&#10172	\u27BC	\27BC	➽	&#10173	\u27BD	\27BD
➺	&#10170	\u27BA	\27BA	➳	&#10163	\u27B3	\27B3
↷	&#8631	\u21B7	\21B7	↶	&#8630	\u21B6	\21B6
↻	&#8635	\u21BB	\21BB	↺	&#8634	\u21BA	\21BA
↵	&#8629	\u21B5	\21B5	↯	&#8623	\u21AF	\21AF
➾	&#10174	\u27BE	\27BE

❤  基本形状类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
❤	&#10084	\u2764	\2764	✈	&#9992	\u2708	\2708
★	&#9733	\u2605	\2605	✦	&#10022	\u2726	\2726
☀	&#9728	\u2600	\2600	◆	&#9670	\u25C6	\25C6
◈	&#9672	\u25C8	\25C8	▣	&#9635	\u25A3	\25A3
☻	&#9787	\u263B	\263B	☺	&#9786	\u263A	\263A
☹	&#9785	\u2639	\2639	✉	&#9993	\u2709	\2709
☎	&#9742	\u260E	\260E	☏	&#9743	\u260F	\260F
✆	&#9990	\u2706	\2706	�	&#65533	\uFFFD	\FFFD
☁	&#9729	\u2601	\2601	☂	&#9730	\u2602	\2602
❄	&#10052	\u2744	\2744	☃	&#9731	\u2603	\2603
❈	&#10056	\u2748	\2748	✿	&#10047	\u273F	\273F
❀	&#10048	\u2740	\2740	❁	&#10049	\u2741	\2741
☘	&#9752	\u2618	\2618	❦	&#10086	\u2766	\2766
☕	&#9749	\u9749	\9749	❂	&#10050	\u2742	\2742
☥	&#9765	\u2625	\2625	☮	&#9774	\u262E	\262E
☯	&#9775	\u262F	\262F	☪	&#9770	\u262A	\262A
☤	&#9764	\u2624	\2624	✄	&#9988	\u2704	\2704
✂	&#9986	\u2702	\2702	☸	&#9784	\u2638	\2638
⚓	&#9875	\u2693	\2693	☣	&#9763	\u2623	\2623
⚠	&#9888	\u26A0	\26A0	⚡	&#9889	\u26A1	\26A1
☢	&#9762	\u2622	\2622	♻	&#9851	\u267B	\267B
♿	&#9855	\u267F	\267F	☠	&#9760	\u2620	\2620

¥  货币类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
$	&#36	\u0024	\0024	¢	&#162	\u00A2	\00A2
£	&#163	\u00A3	\00A3	¤	&#164	\u00A4	\00A4
€	&#8364	\u20AC	\20AC	¥	&#165	\u00A5	\00A5
₱	&#8369	\u20B1	\20B1	₹	&#8377	\u20B9	\20B9

½  数学类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
½	&#189	\u00BD	\00BD	¼	&#188	\u00BC	\00BC
¾	&#190	\u00BE	\00BE	⅓	&#8531	\u2153	\2153
⅔	&#8532	\u2154	\2154	⅛	&#8539	\u215B	\215B
⅜	&#8540	\u215C	\215C	⅝	&#8541	\u215D	\215D
‰	&#8240	\u2030	\2030	%	&#37	\u0025	\0025
<	&#60	\u003C	\003C	>	&#62	\u003E	\003E

♫  音乐符号类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
♩	&#9833	\u2669	\2669	♪	&#9834	\u266A	\266A
♫	&#9835	\u266B	\266B	♬	&#9836	\u266C	\266C
♭	&#9837	\u266D	\266D	♯	&#9839	\u266F	\266F

✖  对错号

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
	&#160	\u00A0	\00A0	☐	&#9744	\u2610	\2610
☑	&#9745	\u2611	\2611	☒	&#9746	\u2612	\2612
✓	&#10003	\u2713	\2713	✔	&#10004	\u2714	\2714
✕	&#10005	\u10005	\10005	✖	&#10006	\u2716	\2716
✗	&#10007	\u2717	\2717	✘	&#10008	\u2718	\2718

★  全都是星星

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
★	&#9733	\u2605	\2605	✭	&#10029	\u272D	\272D
✮	&#10030	\u272E	\272E	☆	&#9734	\u2606	\2606
✪	&#10026	\u272A	\272A	✡	&#10017	\u2721	\2721
✯	&#10031	\u272F	\272F	✵	&#10037	\u2735	\2735
✶	&#10038	\u2736	\2736	✸	&#10040	\u2738	\2738
✹	&#10041	\u2739	\2739	✺	&#10042	\u273A	\273A
✱	&#10033	\u2731	\2731	✲	&#10034	\u2732	\2732
✴	&#10036	\u2734	\2734	✳	&#10035	\u2733	\2733
✻	&#10043	\u273B	\273B	✽	&#10045	\u273D	\273D
❋	&#10059	\u274B	\274B	❆	&#10054	\u2746	\2746
❄	&#10052	\u2744	\2744	❅	&#10053	\u2745	\2745

♒  星座类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
♈	&#9800	\u2648	\2648	♉	&#9801	\u2649	\2649
♊	&#9802	\u264A	\264A	♋	&#9803	\u264B	\264B
♌	&#9804	\u264C	\264C	♍	&#9805	\u264D	\264D
♎	&#9806	\u264E	\264E	♏	&#9807	\u264F	\264F
♐	&#9808	\u2650	\2650	♑	&#9809	\u2651	\2651
♒	&#9810	\u2652	\2652	♓	&#9811	\u2653	\2653

♚  国际象棋类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
♚	&#9818	\u265A	\265A	♛	&#9819	\u265B	\265B
♜	&#9820	\u265C	\265C	♝	&#9821	\u265D	\265D
♞	&#9822	\u265E	\265E	♟	&#9823	\u265F	\265F
♔	&#9812	\u2654	\2654	♕	&#9813	\u2655	\2655
♖	&#9814	\u2656	\2656	♗	&#9815	\u2657	\2657
♘	&#9816	\u2658	\2658	♙	&#9817	\u2659	\2659

♣  扑克牌类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
♠	&#9824	\u2660	\2660	♣	&#9827	\u2663	\2663
♥	&#9829	\u2665	\2665	♦	&#9830	\u2666	\2666
♤	&#9828	\u2664	\2664	♧	&#9831	\u2667	\2667
♡	&#9825	\u2661	\2661	♢	&#9826	\u2662	\2662

Ω  希腊字母

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
Α	&#913	\u0391	\0391	Β	&#914	\u0392	\0392
Γ	&#915	\u0393	\0393	Δ	&#916	\u0394	\0394
Ε	&#917	\u0395	\0395	Ζ	&#918	\u0396	\0396
Η	&#919	\u0397	\0397	Θ	&#920	\u0398	\0398
Ι	&#921	\u0399	\0399	Κ	&#922	\u039A	\039A
Λ	&#923	\u039B	\039B	Μ	&#924	\u039C	\039C
Ν	&#925	\u039D	\039D	Ξ	&#926	\u039E	\039E
Ο	&#927	\u039F	\039F	Π	&#928	\u03A0	\03A0
Ρ	&#929	\u03A1	\03A1	Σ	&#931	\u03A3	\03A3
Τ	&#932	\u03A4	\03A4	Υ	&#933	\u03A5	\03A5
Φ	&#934	\u03A6	\03A6	Χ	&#935	\u03A7	\03A7
Ψ	&#936	\u03A8	\03A8	Ω	&#937	\u03A9	\03A9

☩  十字

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
☨	&#9768	\u2628	\2628	☩	&#9769	\u2629	\2629
✝	&#10013	\u271D	\271D	✞	&#10014	\u271E	\271E
✟	&#10015	\u271F	\271F	✠	&#10016	\u2720	\2720
✚	&#10010	\u271A	\271A	†	&#8224	\u2020	\2020
✢	&#10018	\u2722	\2722	✤	&#10020	\u2724	\2724
✣	&#10019	\u2723	\2723	✥	&#10021	\u2725	\2725

©  法律符号

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
®	&#174	\u00AE	\00AE	©	&#169	\u00A9	\00A9
℗	&#8471	\u2117	\2117	™	&#153	\u0099	\0099
℠	&#8480	\u2120	\2120

@  标点和符号

 

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
«	&#171	\u00AB	\00AB	»	&#187	\u00BB	\00BB
‹	&#139	\u008B	\008B	›	&#155	\u009B	\009B
“	&#8220	\u201C	\201C	”	&#8221	\u201D	\201D
‘	&#8216	\u2018	\2018	’	&#8217	\u2019	\2019
•	&#8226	\u2022	\2022	◦	&#9702	\u25E6	\25E6
¡	&#161	\u00A1	\00A1	¿	&#191	\u00BF	\00BF
℅	&#8453	\u2105	\2105	№	&#8470	\u2116	\2116
&	&#38	\u0026	\0026	@	&#64	\u0040	\0040
℞	&#8478	\u211E	\211E	℃	&#8451	\u2103	\2103
℉	&#8457	\u2109	\2109	°	&#176	\u00B0	\00B0
|	&#124	\u007C	\007C	¦	&#166	\u00A6	\00A6
–	&#8211	\u2013	\2013	—	&#8212	\u2014	\2014
…	&#8230	\u2026	\2026	¶	&#182	\u00B6	\00B6
∼	&#8764	\u223C	\223C	≠	&#8800	\u2260	\2260