js简洁优美写法技巧
作者：秋了秋 发表时间：2016年09月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', ' //netblog.cn/index.js');
document.getElementById("content").appendChild(script);
good:(如果第一个不确定选择器不存在的话就用后备的选择器)
var content=document.getElementById("content") || document.body;
var script=document.createElemnt("script");
script.setAttribute('src', ' //netblog.cn/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
}
1
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/460.html