代码艺术家之JS

摘要：大话先给大家意淫一下前端的目前的应该是工业革命时代了。即在每个变量名前加上一个或多个字符表示相应的类型。这对于大型查找是非常有好处的。当然，一般的技术人员也不会手贱写这么麻烦的。由于是弱类型的，所以可以直接使用或者进行连续赋值。

先给大家意淫一下前端的futrue.
目前的JS应该是工业革命时代了。以前js就只是作为什么移动一下图片，更换一下背景颜色等, 比较废的活. 但是现在h5,nodeJS,ECMA-6,gulp,grunt,webpack,react...等等各种框架，工具的出现，基本上颠覆了js的角色。以前js就是作为一个配角，html+CSS才是主要的，现在，你说你写网页的不会用js，呵呵，U ~= 渣渣. 而且庸俗一点来说，现在前端的薪资range应该是其他技术类职业变化最大的，年薪2w+ 到 200w+ 的都有。所以js对于前端来说莫过于一块金子招牌，如果你js真的吃透了，相信你的路真的是太宽了~
意淫完毕，该谈正事了，JS最佳实践应该是很多地方都会提到的。我这里引用的是高级程序设计里面的内容，如有出错的地方，欢迎纠正.

由于js是一门弱类型的语言，所以往往造成了类型的不清楚，有可能胡乱使用不同类型上的方法，导致出错。
所以，一般给js的变量加上一些类型注释是很有好处的。 通常我们会缺少加注释的动力，这样想吧，如果未来的某一天，你需要接手别人的项目的时候，而别人的项目里面一条注释也没有，你的想不想死。。。所以, 有因才有果，一个良好的注释真的很有用.

</>复制代码 
var found = "s";  //"string"
var abc = true;  //boolean

这应该算是一种简单的吧
还有一种是匈牙利标记法。即在每个变量名前加上一个或多个字符表示相应的类型。
通常，"o"为对象，"s"为string,"b"为Boolean,"i"表示整数,"a"表示数组等

</>复制代码 
var sName ="string"; 

但是由于看起来很丑，推荐只在函数参数里面使用就足够了。

这也是面试时候会常常问到的。

一个一个解释:

表示你无论有多少值，获取常量值的时间都一样。

</>复制代码 
var value = 5;
var num = value + 4;
console.log(num);

上面的复杂度整体为1，因为这只是简单的变量查找。 O(1)的操作还有,数组的读取

</>复制代码 
var value = [1,2,3,4,5];
console.log(value[1]);  //2

同样也是1，不管你是多少次查找都一样。
所以说算法复杂度为O(1)的情况:只有在获取变量以及数组的时候

最常用的是在你进行属性查找的时候。因为查找属性的时候，会遍历所有的对象上的属性，然后才返回。所以他的复杂度为O(n).

</>复制代码 
var obj = {
    name:"jimmy",
    age:19
};
console.log(obj.name);

上面访问obj.name的属性的复杂度为O(n).还有一个例子:

</>复制代码 
var name = window.location.href.substring(window.location.href.indexOf("."));

可以数一下，上面算法的复杂度为6个O(n)因为存在了6个"."进行属性访问。这种情况下，可以优化一下，使用变量进行保存，要知道变量始终是O(1)的

</>复制代码 
var href = window.location.href;
var name = href.substring(href.indexOf("."));

上面就缩减到了4次"."，节约了33%的查询成本。 这对于大型查找是非常有好处的。但是如果你只是一次两次的查找，则使用变量和未使用变量是没有差别的。
另外对于变量的复杂度和属性的复杂度，一般来说，如果可以使用arr[xxx]形式的遍历的话，最好使用。

</>复制代码 
//jquery对象---$val
for(var i = 0;i<$val.length;i++){
    $val.eq(i).html(); //输出innerHTML
}
//优化过后
for(var i in $val){
    $val[i].innerHTML;  //输出的innerHTML
}

-----------分割线----------
这里感谢@Dreamacro 童鞋的提醒。这里特此说明一下，在V8里面引擎对于对象属性的查找其实是O(1)的操作。
(Ps:我操，你到底再说什么鬼)
其实在V8里面对于对象属性的存储同样是散列hash，但是V8就是快，为了实现向java一样的遍历速度，于是做了一点改动。在你每次新建属性的时候，V8会使用hidden class，新建一份原来对象的Copy并且添加上新属性。于是在你下次查找属性的时候他都会直接从这个新建的Class info寻找。 如果你一不小心手贱使用了delete的话，你查找的复杂度便会退化为O(n).
参考: hidden Class, V8引擎对象优化

关于O(log n)和 O(n^2),由于目前对算法不精通，还是别误导人了。

一个常见的循环

</>复制代码 
for(var i= 0 ;i
这个循环可以，但是不是很高效，因为每一次循环你都会去调用一次nodelist.length这个值，造成了 nodelist.length * O(n)这样一个复杂度. 优化的办法就是将length提出去
</>复制代码 
for(var i= 0,len = nodelist.length;i
上面的循环的复杂度就变为1O(1) + 1O(n);  当然上面那种简单而且更高效.
但是试想一下，如果你在循环体还需要使用nodelist[i]
</>复制代码 
for(var i= 0,len = nodelist.length;i
想一想，nodelist[i]乍看起来并不是循环体内所需要的。那我们应该怎么做呢？
很简单，利用null为false的条件自动转换
</>复制代码 
for(var i = 0,node; node = nodelist[i++];){
    node...
}
//当然你也可以直接使用
for(var node of nodelit){  //这种方式更加方便简洁，但是是es6的一个新特性
    node
    ...
}
另外循坏可以通过以下几个点来进行优化
</>复制代码 
1.减值迭代
</>复制代码 
2.简化终止条件
3.简化循环体
4.使用后测试循环--for和while都是前测试循环, do-while是后测试循环
减值迭代
: 从最大值开始减值，而不是从最小值减值迭代。
简化终止条件
: 即就是想上面例子一样，对终止条件寄存在变量当中.
简化循环体
: 这应该是一个复杂的活，简单的就是把不需要参与循环的语句提出来
使用后测试
:  这其实就是防止对空值进行循环
</>复制代码 
var len = nodelist.length,
    i = 0;
if(len>0){
    do{
        ...
    }while(++i===len);
}
这一部分可以参考一下Naraku_的读书笔记。
还有一个例子，是我在腾讯面试的时候遇到的。
</>复制代码 
从一篇全英文的文章中找到频率次数最高的单词
这里是我写的一部分代码，可以看一看
筛选单词
Duff优化
每次看的时候，都会被他的精髓刺瞎了我24K金钛合金*眼.
将循环次数展开书写
这是Andrew B.King 写出的一个比较著名的Duff装置.将do-while分成两个多带带的循环。简单易懂。
</>复制代码 
var iter = Math.floor(values.length/8);
var leftover = values.length%8;
var i = 0;
if(leftover>0){
    do{
        process(values[i++]);
    }while(--leftover>0);
}
do {
    process(values[i++]); //8次处理
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
}while(--iter>0);
感觉比一般的for循环更加复杂，没错。Duff一般是用来处理比较多的循环次数的时候才会真正显示他的效率。如果你使用的循环次数就50+。那使用for效率会更高一点. 通常我们前端也用不到，因为TM这是给后端用的。
避免双重解释
这种情况一般只会发生在3种情况下, 即使用eval,Function,setTimeout里面.
</>复制代码 
eval("alert("hehe")");
var sayHi = new Function("alert("hehe")");
setTimeout("alert("hehe")",500);
以上3中会发生双重解释，原因是,原本的js解析器不能直接解析上面的string字符串，需要额外新开一个解析器来进行解释，导致的结果就是速度被拖屎了。 当然，一般的技术人员也不会手贱写这么麻烦的。
修改
</>复制代码 
alert("hehe");
var sayHi = function(){alert("hehe")}
setTimeout(function(){alert("hehe")},500);
这样写就没什么问题了。
最小化语句
即就是整合语句了。由于js是弱类型的，所以可以直接使用var或者let进行连续赋值。而且这也是JIT编译器帮你干的事.(JIT是一种能让你代码越运行越快的编译器)
</>复制代码 
//用了5条语句声明5个变量
var count = 5;
var color = "red";
var values = [1,2,3];
var now = new Date();
//用了1条语句声明5个变量,注意每个变量用逗号隔开
var count = 5,
    color = "red",
    values = [1,2,3],
    now = new Date();
还有就是使用数组和对象字面量
: 因为语句量减少，解析器的压力也减小了
</>复制代码 
// 创建两个对象 ----不好的方式
//one 四条语句
var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
//two 四条语句
var person = new Object();
person.name = "jozo";
person.age = 21;
person.sayName = function(){
    alert(this.name);
};
// 创建两个对象 ----推荐的方式
//one 1条语句
var values = [123,456,789]
//two 1条语句
var person = {
    name : "jozo",
    age : 21,
    sayName : function(){
    alert(this.name);
};
总的来说, js优化之路漫漫，没有年年月月的积累，是不可能达到什么特别高的level的。所以说，活到老学到老，这是永恒的真理~~