本文章来给各位同学介绍提升js代码可读性的小技巧,这里从各方法来介绍,有需要了解的朋友可参考。
逻辑扁平化
我们工作中,可能会碰到一些比较复杂的逻辑,比如:满足条件1,不然XX;满足条件2,不然XX……如此都满足了才OO,写出来大概是这样:
代码如下 复制代码
if (condition1) {
if (condition2) {
if (condition3) {
// do
// a
// lot
} else {
// do zz
}
} else {
// do oo
}
} else {
// do xx
}
这样带来的结果就是逻辑嵌套后显得很复杂,不好读。如果再赶上缩进没搞好或者换行就更惨了。这个时候,通常可以提前中断代码执行来使得逻辑扁平化。提前中断的方法包括return、throw,以及PHP中的die()和exit()。重新整理后的代码如下:
代码如下 复制代码
if (!condition1) {
// do xx
return;
}
if (!condition2) {
// do oo
return;
}
if (!condition3) {
// do zz
return;
}
// do
// a
// lot
当然,有例外情况要排除的地方也很适用这种方法。甚至有激进的言论,表示不应该使用else,而都要这样提前中断。我觉得那样也有点过分,if ... else ... 的意义还是非常明确的。
缩短超长逻辑判断
有个从上古时期传下的不成文的规定,一行代码80个字符。随着显示器变大,这个老规矩应该打破。但是单行代码太长的话左右看起来也会很累,所以我们还是有必要控制。超长的代码经常出现在逻辑判断里,比如游戏中常见的检测子弹有没有打中玩家的代码,用较好的格式写出来大概是这样:
代码如下 复制代码
if (bullet.x > enemy.x + enemy.width || bullet.y > enemy.y + enemy.height || bullet.x + bullet.width < enemy.x || bullet.y + bullet.width < enemy.y) {
console.log('没打中');
}
这就已经不短了。有些时候我们还要加上enemy.damagable、!enemy.immunePhysical之类的其它条件判断,把这一行写的特别长。这个时候就需要我们用点小技巧将它缩短了。方法可能有多种,思路是一致的,就是提炼“目的”——将某一组判断的目的提炼成一个变量,既好读又能缩短代码。接下来还是用一段代码来说明吧:
代码如下 复制代码
var isGod = !enemy.damagable || eneymy.immunePhysical, // 判断敌人是否不能攻击/上帝模式
isHit = bullet.hitTest(eneymy); // 将刚才那一大串抽出方法“碰撞检测”
if (!isGod && isHit) {
enemy.die();
}
总结
这两个小技巧都很简单,但对代码的可读性提高却很显著。各种各种的小技巧叠加起来,会让代码更好读,更容易维护。
Javascript数组排序方法有很多,js本身就提供了大量的数据排序函数,下面我们除使用本身来实现排序之外,其它的自定排序方法也介绍介绍。
单数组排序
sort()函数
数组对象的sort方法可以按照一定的顺序把数组元素重新排列起来。通常情况下,都是按照字幕顺序排列。在使用sort()排序时,每次比较两个元素时都会执行比较函数,并将两个元素作为参数传递给比较函数。比较函数有以下两种返回值。
1、如果返回值大于0,则交换两个元素的位置
2、如果返回值小于或等于0,则不进行操作。
JavaScript代码
例1
假定有如下数组:
代码如下 复制代码
var homes = [{
"h_id": "3",
"city": "Dallas",
"state": "TX",
"zip": "75201",
"price": "162500"
}, {
"h_id": "4",
"city": "Bevery Hills",
"state": "CA",
"zip": "90210",
"price": "319250"
}, {
"h_id": "5",
"city": "New York",
"state": "NY",
"zip": "00010",
"price": "962500"
}];
可以通过下面方法对数组按价格进行排序:
代码如下 复制代码
homes.sort(function(a,b) { return parseFloat(a.price) - parseFloat(b.price) } );
单个数组中的元素排序
代码如下 复制代码
<script type="text/javascript">
function sort_desc(str)//对数组降序的函数
{
str.sort(function compare(a,b){return b-a;});//是指对数组中1的对象中的第k个元素进行降序
return str;
}
function sort_asc(str)//对数组升序的函数
{
str.sort(function compare(a,b){return a-b;});//是指对数组中1的对象中的第k个元素进行升序
return str;
}
var tt=[4,10,8,98,2];
var bb=[];
bb=sort_desc(tt);
document.write(bb+"***降序输出");
var cc=[89,2,100,5];
var dd=[];
dd=sort_asc(cc);
document.write("<hr/>");//直线
document.write(dd+"***升序输出");
</script>
二维数组的排序。
1、按数值排序
假设有如下数组
代码如下 复制代码
var arr = [[1, 2, 3], [7, 2, 3], [3, 2, 3]];
这里如果我们要按每个子数组的第一列来排序要如何做呢,我们可以定义一个比较函数:
代码如下 复制代码
arr.sort(function(x, y){
return x[0] – y[0];
});