1、a标签有妙用，很多时候，我们需要提取URL中的域名，参数值，一般我们会通过正则表达式去匹配获取我们需要的东西，但是我们仅需要将需要解析的URL赋值给a标签的href属性，然后我们就可以得到一切我们想要的了。

var a = docuemnt.createElement("a");
a.href = "https://www.deanhan.cn/demo?p=xx";
console.log(a.host);

基于这一原理，稍微扩展一下，我们就可以得到一个健壮的通用URL解析方法了：

function parseURL(url) {
var a =  document.createElement('a');
a.href = url;
return {
     source: url,
     protocol: a.protocol.replace(':',''),
     host: a.hostname,
     port: a.port,
     query: a.search,
     params: (function(){
         var ret = {},
           seg = a.search.replace(/^\?/,'').split('&'),
           len = seg.length, i = 0, s;
         for (;i<len;i++) {
             if (!seg[i]) { continue; }
             s = seg[i].split('=');
             ret[s[0]] = s[1];
         }
         return ret;
     })(),
     file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
     hash: a.hash.replace('#',''),
     path: a.pathname.replace(/^([^\/])/,'/$1'),
     relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
     segments: a.pathname.replace(/^\//,'').split('/')
};
}

2、页面中拥有ID的元素会自动创建全局变量。

在页面加载时，会自动为拥有ID的的元素在JavaScript执行环境中创建对应的全局变量，所以我们可以通过元素的ID直接访问元素节点（id中有‘-’的好像有点问题），这意味着docuemnt.getElementById显得有点多余了，但是这个特性在调试时用用就够了，在实际项目中还是该怎么写就怎么写吧，毕竟常规代码出现错误的机会要小很多，维护也相对简单一些。

<div id="dean"></div>
<script type="text/javascript">
console.log(dean);
</script>

3、加载CDN文件的时候，可以省掉HTTP标示。

网站优化有一个途径就是从第三方加载一些通用的js和css文件，这样下次访问这写文件的时候，就不必再重新请求。处于安全性考虑，有的cdn服务器使用HTTPS方式传输，而有的任然才有的传统的HTTP方式，我们在使用时省略掉http标示，浏览器会根据CDN服务器的传输方式去加载相应的文件。

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

4、利用script标签可以保存任意信息，作为后期模板使用。

<script type="text" id="template">
<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML

5、利用Math.random和toString生成随记字符串

function randomStr(len) {
var str= "";
for (; str.length < len; str+= Math.random().str(36).substr(2));
return str.substr(0, len);
}

6、利用位运算来将浮点性数转化为整性。

|0 和 ~~ 是很好的一个例子，使用这两者可以将浮点转成整型且效率方面要比同类的 parseInt , Math.round 效率要高很多。

var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3

7、不声明中间变量来完成值交换

碎玉交换两个变量的值，常规的做法是声明一个中间变量来暂存，但是利用数组我们可以在不实名中间变量的情况下完成值交换。

var a=1,b=2;a=[b,b=a][0];

8、利用短路写法来精简代码

在js逻辑运算中，0、""、null、false、undefined、NaN都会判为false，其他都为true.

|| 先计算第一个运算数，如果可以被转换成true，则返回左边这个表达式的值，否则计算第二个运算数。即使||运算符的运算数不是布尔值，任然可以将它看作布尔OR运算，因为无论它返回的值是什么类型，都可以被转换为布尔值。

&& 它先计算第一个表达式，若为假，就不会去处理第二个表达；否则继续处理后继表达式。从左到右选取表达式的第一个为非true的表达式的值，如果一直未找到则返回最后一个表达式的值。

所以我们可以将if语句变形，得出一种更简便的写法。

例1：

//传统if语句
if(!name){
name="dean";
}
//短路写法
name = name || "dean";

通过这样简单的写法我们可以实现对一个值给一个默认值，写一些函数方法的时候用的比较多。

例2：

var day = new Date().getDay();
//传统if语句
if(day===0){
alert("Today is Sunday!");
}
//短路写法
day===0 && alert("Today is Sunday!");

对于传统的if语句，如果执行体代码超过了1 条语句，则需要加花括号，而利用逗号表达式，可以执行任意条代码而不用加花括号。

if(conditoin) alert(1),alert(2),console.log(3);

一些经典的例子：

常规代码：

var test = (function(arr){
  return function(i){
    if( arr[i] != undefined ){
      if(i==1){
        return arr[i];
      }
      else if(i==3){
        return arr[i];
      }
      else if(i==6){
        return arr[i];
      }
      else if(i==7){
        return arr[i];
      }
      else if(i==8){
        return arr[i];
      }
      else{
        return "没有权限";
      }
    }else{
      return "错误的参数";
    }
  }
})([1,2,3,4,5,6,7,8,9,10]);
test(3) // -> 4
test(6) // -> 7
test(7) // -> 8
test(2) // -> "没有权限"
test(20) // -> "错误的参数"

精简代码：

var test = (function(arr){
  return function(i){
    return i in arr && 
           ( (i==1||i==3||i==6||i==7||i==8) && arr[i] || "没有权限" ) ||
           "错误的参数";
    }
})([1,2,3,4,5,6,7,8,9,10]);
test(3) // -> 4
test(6) // -> 7
test(7) // -> 8
test(2) // -> "没有权限"
test(20) // -> "错误的参数"

常规代码：

var a = 0;
var b;
function test(i){
  if(i==3){
    b=10;
  }
  else if(i==4){
    b=23;
  }
  else if(i==6){
    b=44;
  }
  else{
   b=null;
  }
}

精简代码：

var a = 0;
var b;
function test(i){
  b = {"3":10, "4":23, "6":44}[i] || null;
}

9、浏览器直接运行html和js代码

javascript:alert('hello from address bar :)');

在浏览器中输入以上代码，直接回车，弹窗就出现了。

需要注意的是如果是通过粘贴代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码。

data:text/html,<h1>Hello, world!</h1>

将以上代码输入到浏览器，熟悉的h1标签效果就出现了。

data:text/html, <html contenteditable>

在浏览器中输入以上代码，浏览器就变成了一个原始而简单的编辑器，与windows自带的记事本一样。