HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1902|回复: 1

某个姑娘告诉我的 JavaScript(JS) 技巧

[复制链接]

该用户从未签到

发表于 2015-9-12 10:47:08 | 显示全部楼层 |阅读模式
目的:简单高效的获得包含20个”<li></li>”的方法。
当我听到这个需求的时候,我脑海中很快出现了下面这个方法:
  1. function getHtmlByString(len) {
  2.     var html = "";
  3.     for (var i = 0; i < len; i++) {
  4.         html += "<li></li>";
  5.     }
  6.     return html;
  7. }
复制代码
然而,既然姑娘是有意提问,想必答案不会如此简单。于是我又换了个角度,得出了以下这个方法:
  1. function getHtmlByLoop(len) {
  2.      var arr = [];
  3.      for (var i = 0; i < len; i++) {
  4.           arr.push("<li></li>");
  5.      }
  6.      return arr.join("");
  7. }
复制代码
我自信满满,以为这就是最好的答案。却不想,姑娘嘚瑟的告诉我,她知道一个只需要一行简短的代码就能搞定的方法。虽然我心有不甘,但更多的是好奇心泛滥,忍不住追问理想的答案应该是什么?
  1. function getHtmlByArray(len) {
  2.      return new Array(len + 1).join("<li></li>");
  3. }
复制代码
我一听,也许在别人看来这是简单得不能再简单的答案,然而我却傻眼了,因为我确实不知道,原来真的可以如此简单!!
今天突然心血来潮,想验证下所谓的最优方法,是否真的是最优!于是,动手写了一个简单的验证示例:
  1. var t1, t2, t3, t4, str1, str2, str3;
  2. t1 = new Date();
  3. str1 = getHtmlByString(100000);
  4. t2 = new Date();
  5. str2 = getHtmlByLoop(100000);
  6. t3 = new Date();
  7. str3 = getHtmlByArray(100000);
  8. t4 = new Date();
  9. console.log("str1 === str2 -> " + (str1 === str2));
  10. console.log("str2 === str3 -> " + (str2 === str3));
  11. console.log("t2 - t1 = " + (t2 - t1),"\nt3 - t2 = " + (t3 - t2),"\nt4 - t3 = " + (t4 - t3));
复制代码
验证了三个方法的耗时,以及结果是否一致。经过Chrome、IE8的测试,虽然在IE下的运行效率并不算太明显,但是结合代码量等因素,综合起来我完全接受了这个最优答案!!!而且这个测试结果似乎推翻了我一直以为使用 arr.join(“”)  效率优于 字符串拼接的结论…
虽然这个案例比较特殊,而且不能代表大多数应用场景。但是,我们却可以从这个案例中得出一些结论:
  • 很多方法不是我们不知道,而是我们没想到
  • 当我们完成一个任务之后,也许多一秒钟的思考,就能得到更优的结果
  • 代码的多少,不能决定功能的优劣
  • 也许你技能掌握还算马马虎虎,但是还有很多细节/奇技淫巧,值得你去挖掘思考
突然觉得这是拿别人的成果来写自己的文章,有些掉节操啊,打住,Over~
    作者:Mr.Zheng

该用户从未签到

 楼主| 发表于 2015-11-29 11:06:36 | 显示全部楼层
不知道Array.join方法内部是怎么实现的,竟能有这个高的效率?

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-2-23 11:27

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表