JavaScript之糟粕

0、导言

在上篇《JavaScript之毒瘤》中，列举了一些在JavaScript中难以避免的问题特性。本篇将会展示JavaScript中有问题的特性，但我们很容易就能便面它们。通过这些简单的做法，让JavaScript称为一门更好的语言。

1、==

JavaScript有两组相等运算符。 === 和 !==，以及 == 和 !==。 === 和 !== 不会进行类型转换，一般会按照你期望的方式工作。由于JavaScript的类型转换系统相当复杂，如果要确保==和 != 不出错，就必须要牢记转换规则。另外==运算符缺乏传递性。

//关于传递性
if a === b, b === c then a === c;
if a == b, b == c then a 不一定等于 c，破坏了传递性

小测验：

'' == '0'
0 == ''
0 == '0'

false == 'false'
false == '0'

false == undefined
false == null
null == undefined

'\t\t\n' == 0

总结：推荐使用===和!==，尽量避免使用==和!=。

2、with语句

JavaScript提供了一个with语句，本意是用它来快速访问对象，不幸的是，它的结果可能有时不可预料。

小测验：

window.a = 1;
var obj={};
with(obj){
  console.log(a);
}
obj.a = 2;
with(obj){
  console.log(a);
}

结论：避免使用with。

3、eval

eval函数传递一个字符串给JavaScript编译器，并且执行结果。有问题问题呢？首先是代码难以阅读，另外需要运行编译器，导致性能低下；同时，还减弱了程序的安全性。注：Function构造函数，setTimeout、setInterval的字符串参数形式和eval是执行方式一致。

结论：避免使用eval，setTimeout、setInterval的字符串参数和Function构造函数。

4、continue

continue语句跳到循环顶部，性能比较低下。

小测验：

var counter = 10;
console.time('t1');
var sum = 0;
for(var i = 0; i < counter; i++){
  if(i % 3 !== 0){
    continue;
  }
  sum = sum + i;
}
console.log(sum);
console.timeEnd('t1');

console.time('t2');
var sum = 0;
for(var i = 0; i < counter; i++){
  if(i % 3 === 0){
    sum = sum + i;
  }
}

console.log(sum);
console.timeEnd('t2');

结论：尽量优化代码，减少continue的使用。

5、switch

switch语句中，除非明确的中断流程，否则每次条件判断后，都可以穿越到下一个case条件。这很容易造成bug。

小测验：

var a = 15;
switch(a){
  case a * 1 :
    console.log('a*1');
  case a / 1:
    console.log('a/1');
  default:
    console.log('a');
}

结论：不要刻意的使用case条件穿越。

6、缺少块的语句

if、while、do或for可以接受代码块，也可以接受单行语句。单行语句的形式是一种带刺的玫瑰。虽然它可以节约2个字节，但它模糊了程序的结构。

小测验：

if(1 == '0')
  console.log('1 == 0');
  console.log('my god');

// VS
if(1 == '0'){
  console.log('1 == 0');
}
console.log('my god');

结论：避免使用模糊程序结构的单行语句。

7、++ --

递增和递减使得可以用非常简洁的风格去编码。但是它可能造成缓冲区溢出、同时往往让代码变得拥挤也不易于理解。

小测验：

var a = 1;
a = a++ + ++a;
console.log(a);
a = 1;
a = a++ + a++;
console.log(a);

结论：避免使用++ --。

8、位运算符

JavaScript有着和Java相同的一套位运算符。Java中位运算符处理整数，非常快。在JavaScript中，只有双精度浮点数，所以位运算非常慢。另外，&非常容易误写为&&，使得bug容易被隐藏起来。

小测验：

var counter = 10000;
var a = 5;
var sum = 0;
console.time('t1');
for(var i = 0; i < counter; i++){
  sum += a << 1;
}
console.log(sum);
console.timeEnd('t1');

sum = 0;
console.time('t2');
for(var i = 0; i < counter; i++){
  sum += a * 2;
}
console.log(sum);
console.timeEnd('t2');

结论：避免使用位运算符。

9、function语句 与 function表达式

JavaScript中既有function语句，也有function表达式，这令人困惑，似乎看起来也差不多。function语句在解析时会产生变量提升，放宽了函数必须先申明后使用的的要求。同时，JS在if语句中使用function语句也是被禁止的，但实际上大多数浏览器允许在if中使用function语句，这有可能会导致兼容性问题。

由于一个语句不能以一个函数表达式开头，如下如下写法，可以改写为另外一种形式。

function (){}(); //Error 

(function(){}()); // Right

小测验：

// function语句
function fun(){}

// function表达式
var fun = function(){};

结论：合理使用function语句和function表达式。

10、类型的包装对象

JavaScript有一种类型的包装对象，如 new Number(1);这很容易令人困惑。

小测验:

var num1 = new Number(1);
var num2 = 1;
console.log(typeof num1);
console.log(num1 === num2);

结论：避免使用包装对象，如new Boolean(),new String(),new Number()等

11、new

new运算符创建一个继承于其原型的新对象，并将新创建的对象绑定给this。但是，如果忘记使用new，那么就得到一个普通的函数调用，对象属性也会被绑定到全局对象上。这不会导致什么编译警告，也没有运行警告。

根据惯例，需要用new的函数，以首字母大写命名。这能部分程度上便于我们发现错误。

小测验：

function Person(){
  this.name = 'Default';
  this.sex = undefiend;
}

Person();
new Person();

//更好的实现
function Person(){
  if(this === window){
    return new Person();
  }
  this.name = 'Default';
  this.sex = undefiend;
}

结论：合理的避免使用new。另外可以先判断this，再做对应处理。

12、void

大部分语言中，void是一种类型，在Js中，void是一种运算符，接收一个运算数，并返回undefined

小测验： void 0 void true

结论：有限的使用void

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->