詳解JavaScript 中 if / if...else...替換方式

// if 版本
var a = 1;
if(a > 1 && a < 5) {
 return 1
} else if(a > 5 && a < 10){
 return 5
}else{
 return 10
}

// switch 改版
switch(true){
 case (a > 1 && a < 5):
  return 1
 case (a > 5 && a < 10):
  return 5
 default:
  return 10
}

// if 版本
if (bool) {
 value = 1;
} else {
 value = 2;
}

// 三元運(yùn)算符 版本
value = bool ? 1 : 2;
// 三元預(yù)算符 多個(gè)運(yùn)算需要括號(hào)包裹 此處用了逗號(hào)表達(dá)式
return typeof foo === 'object'?(console.log(1),1):(console.log(2),2);

TIPS: 三元運(yùn)算符后面不能帶return
// 錯(cuò)誤用法，運(yùn)算符號(hào)后不能帶return
bool ? return 1 : return 2;

// if為真
if (bool) {
 value = getYes();
}
// &&改版
bool && (value = getYes());

// if為假
if (!bool) {
 value = getNo();
}
bool || (value = getNo());

// 錯(cuò)誤用法，運(yùn)算符號(hào)后不能帶return
boll || return true;

// 錯(cuò)誤用法
function getResult(value) {
 value ? 'yes' : 'no';
}
var result = getResult(true); // 并不會(huì)有值返回
1.js邏輯運(yùn)算中，0/""/null/false/undefined/NaN都會(huì)判為false，其它都為true；
2.很多開源代碼中可見if(!!attr)，為什么不直接寫if(attr)， 其實(shí)這是一種更嚴(yán)謹(jǐn)?shù)膶懛ǎ?!attr會(huì)強(qiáng)制轉(zhuǎn)化為boolean類型。typeof !!attr == true 比 typeof attr == true 更加嚴(yán)謹(jǐn)。
--------------------------------------------------------------------------------
對(duì)象屬性
// if版本
if (a == 1) {
 return 'one';
} else if (a == 2) {
 return 'two';
} else if (a == 3) {
 return 'three';
} else {
 return '';
}
// 對(duì)象屬性 改版
var ret = {
 1: 'one',
 2: 'two',
 3: 'three'
};
return ret[a] ? ret[a] : '';
TIPS：

// html
<form id = "registerForm" method="post" action="http://xxxx.com/api/register">
 用戶名：<input type="text" name="userName">
 密碼：<input type="text" name="password">
 手機(jī)號(hào)碼：<input type="text" name="phoneNumber">
 <button type="submit">提交</button>
</form>
// js
// 策略對(duì)象
var strategies = {
 isNoEmpty: function (value, errorMsg) {
  if (value === '') {
   return errorMsg;
  }
 },
 isNoSpace: function (value, errorMsg) {
  if (value.trim() === '') {
   return errorMsg;
  }
 },
 minLength: function (value, length, errorMsg) {
  if (value.trim().length < length) {
   return errorMsg;
  }
 },
 maxLength: function (value, length, errorMsg) {
  if (value.length > length) {
   return errorMsg;
  }
 },
 isMobile: function (value, errorMsg) {
  if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
   return errorMsg;
  }    
 }
}
// 驗(yàn)證類
var Validator = function() {
 this.cache = [];
}
Validator.prototype.add = function(dom, rules) {
 var self = this;
 for(var i = 0, rule; rule = rules[i++];) {
  (function(rule) {
   var strategyAry = rule.strategy.split(':');
   var errorMsg = rule.errorMsg;
   self.cache.push(function() {
   var strategy = strategyAry.shift();
   strategyAry.unshift(dom.value);
   strategyAry.push(errorMsg);
   return strategies[strategy].apply(dom, strategyAry);
   })
  })(rule)
 }
};
Validator.prototype.start = function() {
 for(var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
  var errorMsg = validatorFunc();
  if (errorMsg) {
   return errorMsg;
  }
 }
};
// 調(diào)用代碼
var registerForm = document.getElementById('registerForm');
var validataFunc = function() {
 var validator = new Validator();
 validator.add(registerForm.userName, [{
  strategy: 'isNoEmpty',
  errorMsg: '用戶名不可為空'
 }, {
  strategy: 'isNoSpace',
  errorMsg: '不允許以空白字符命名'
 }, {
  strategy: 'minLength:2',
  errorMsg: '用戶名長(zhǎng)度不能小于2位'
 }]);
 validator.add(registerForm.password, [ {
  strategy: 'minLength:6',
  errorMsg: '密碼長(zhǎng)度不能小于6位'
 }]);
 validator.add(registerForm.phoneNumber, [{
  strategy: 'isMobile',
  errorMsg: '請(qǐng)輸入正確的手機(jī)號(hào)碼格式'
 }]);
 var errorMsg = validator.start();
 return errorMsg;
}
registerForm.onsubmit = function() {
 var errorMsg = validataFunc();
 if (errorMsg) {
  alert(errorMsg);
  return false;
 }
}