当前位置:秋叶网络博客 前端设计 ◊ js简洁优美写法技巧

js简洁优美写法技巧

作者:秋叶 发表时间:2016年9月30日

1.压缩稀疏数组:
bad:

var a=[2,5,undefind,6,8,undefined,9];
function (){
   var b=[];
   for(var i=0;i<a.length;i++){
       if(a[i]!=undefined){
          b.push(a[i]);
       }
   }
   return b;
}

good:(数组过滤,只返回真值元素)

var a=[2,5,undefind,6,8,undefined,9];
a=a.filter(function(){
   return true;
});

2.判断真假
bad:

if (result !== null || result !== undefined || result !== '' || result !== false || result !== 0) {
   //do somthing
}

good:(所有null,undefined,空,false,0都是假)

if (result) {
    //do somthing
}

3.实例化对象
bad:

var a = new Array();
var b = new Object();
var c = new String("秋叶");

good:(字面量写法简洁且更容易理解)

var a = [];
var b = {};
var c = "秋叶";

4.单一判断
bad:

if (result) {
   console.log("秋叶");
}
if (!result) {
   console.log("秋叶");
}

good:

result && console.log("秋叶");
result || console.log("秋叶");

5.条件选择
bad:

if(result=="yes"){
   a="111";
}else{
   a="000";
}

good:(简单的三元表达式比if更好~)

a=result=="yes"?"111":"000";

6.for循环
bad:

for (var i = 0; i < arr.length; i++)

good:

for(var i in arr)

7.文本框输入触发
bad:

document.getElementById("input").onkeyup(function(){
   console.log("输入内容了");
});

good:(解决keyup键盘触发不能捕捉鼠标粘贴进去的动作)

document.getElementById("input").oninput(function(){
   console.log("输入内容了");
});

8.函数返回
bad:

function test(){
   var test=false;
   var obj=[{content:0,detail:"hahaha"},{content:1,detail:"yes"},{content:0,detail:"no"}];
   for(var i=0;i<obj.length;i++){ 
      if(obj[i].content==1){ 
         test=true; 
      } 
   } 
   return test; 
}

good:(提前返回结束循环,避免做没必要的工作)

function test(){ 
   var test; 
   var obj=[{content:0,detail:"hahaha"},{content:1,detail:"yes"},{content:0,detail:"no"}]; 
   for(var i in obj){ 
      if(obj[i].content){ 
         return true; 
      } 
   } 
   return test; 
}

9.判断元素是否在数组中
bad:

var a=[48,56,65,77,6,80,92]; 
for(var i in a){ 
   if(i===6){ 
      console.log("包含6"); 
   } 
}

good:

var a=[48,56,65,77,6,80,92]; 
a.indexOf(6)>-1 && console.log("包含6");

10.做好后备工作
bad:

var script=document.createElemnt("script");
script.setAttribute('src', ' //www.mizuiren.com/index.js');
document.getElementById("content").appendChild(script);

good:(如果第一个不确定选择器不存在的话就用后备的选择器)

var content=document.getElementById("content") || document.body;
var script=document.createElemnt("script");
script.setAttribute('src', ' //www.mizuiren.com/index.js');
content.appendChild(script);

11.增值简化
bad:

var i=0;
if(value==="yes"){
   var sName = aValues[i]; i++;
}

good:

var i=0;
if(value==="yes"){
   var sName = aValues[i++];
}

12.尽量减少在for循环中的工作
bad:

for(var i=0;i<obj.length;i++){
   //do something
}

good:(避免每次循环都计算obj的length,把length缓存起来)

for(var i=0,len=obj.length;i<len;i++){ 
   //do something 
}

13.使用字典替代switch
bad:

var a="s3"; 
switch (a) { 
   case "s1": 
      result = "zero"; 
      break; 
   case "s2": 
      result = "one"; 
      break; 
   case "s3": 
      result = "three"; 
      break; 
   default: 
      result = "unknown"; 
}

good:

var b={s1:"zero",s2:"one",s3:"three"} 
var result=b[a];

14.return布尔值时
bad:

(function (){ 
   if (age > 18) {
      return true;
   } else {
      return false;
   }
})();

good:

(function (){
   return age > 18;
})();

15.不嵌套else的if
bad:

if (user.id === 10) {
   if (user.name !== "") {
      if (user.email === "email") {
         //do something...
      }
   }
}

good:

if(user.id === 10 && user.name !=="" && user.email === "email") {
   //do something...
}

16.定义多个变量
bad:

var a = "aa";
var b = "bb";
var c = "cc";

good:

var a = "aa",
   b = "bb",
   c = "cc";

17.避免在循环中频繁对dom的操作
bad:

for (var i = 0; i < 1000; i++){
   str += str;
   document.getElementById("box").innerHTML = str;
}

good:(循环完成后再操作dom)

for (var i = 0; i < 1000; i++){
  str += str;
}
document.getElementById("box").innerHTML = str;

18.谨慎产生全局变量
bad:(无形中产生了全局变量b)

function (){
   var a = b = 1;
}

good:

function (){
   var a = 1,
   b = 1;
}

19.参数的传递
bad:

function regist(userName, userPwd, userEmail, userPhone) {
   //do something...
}

good:(过多参数把它们整合到一个json里面)

var user={userName:"", userPwd:"", userEmail:"", userPhone:""}
function regist(user) {
   //do something
}
转载请保留链接:js简洁优美写法技巧 | 出处:秋叶个人博客| 本文链接地址:http://www.mizuiren.com/460.html
目录: 前端设计 | 标签: | 6825次阅读