js简写

js的一些小技巧

个人写js到现在还是感觉js简写是很重要的.首先，即使我们不写，也要认识其他人的这种写法（比如VUE源码）；其次，代码执行效率比较高(上述我都是在扯淡)，最后也是最重要的是：装逼！，对，就是装逼，学技术不装逼还学什么技术?人生的一大乐趣就是装逼 >_<
比如如下例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var a = b =1 ;
// 这个需要好好谈一下，首先我是希望自己和别人都不写这种代码，但是大家放心，一定有很多人这么写 -_-!
// 先说一下根源，根源是因为像C、C++、java、javascript这样的语言中，都有一个潜规则，赋值语句都有返回值

// 原始写法
var a =1;
var b =1;
// 这样是不是有点麻烦，改变一下
var a =1,
    b=1;
// 有人再进一步
var a=b=1;   
// 看起来这样很帅，很牛逼，也确实达到了这个效果，但是有时有一定的问题
// 我们来看一下这个例子：
function test(){
  var a=b=c=1
}
test()
console.log(b)  // 1
console.log(c)  // 1
console.log(a)  // a is not defined
// 原因是什么呢？这个多连等等价于
var a // 声明提升，处于函数作用域内 
c=1   // 未定义，在当前作用域链找不到，向上寻找，最终挂载在Global对象上（浏览器的window对象）
b=1   // 同理
a=1   // a已定义，直接赋值

// 这就是我为什么不推荐这种精简写法的原因，不可控
// 你说你写着代码，突然有个哥们提交了代码，
// 里面有个和你重名的变量这样写，你还以为变量在函数作用链中，就没加注意，好了gg，可能要找一会了
// "这什么鬼东西？为什么结果不对？-_-！" ， 那哥们可能还很无辜，我没做什么啊，我又没改你代码.....

简单举例(从项目中取几个):

1
!!res.data && next()  || ~~res.statusCode < 10 && to()
1
res.data.OrderStatus == '确认数据' && this.seatProgressAdd() || res.data.OrderStatus == '等待数据' && this.countTime()
1
var result = (para>12 && 4) || (para>10 && 3) || (para>5 && 2) || (para>0 && 1) || 0;
1
var showData= {'运营组':1,'渠道组':2,'测试部门':3,'后台':4}[res.data.num] || 0;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function testMethod(obj,callback){
      xxxxxx
      xxxxxx
      xxxxxx
      callback && callback(res, req)
}
```  


## 短路运算


提到js的简写，短路运算是不可不提的,所谓的“短路运算”是什么呢，其实就是电路学里面经常提到的逻辑符号.“或”“非”

js里的“或”“非” 指的就是 "||"  "&&"

官方的话可以自己查，用自己的话说，算路运算"&&" "||"就是： 
"&&" 所在的表达式语句块中,只要上一个表达式为假，就不会往下执行 , 那"&&" 很明显可以简写 if else 
"||" 所在的表达式语句块中,只要上一个表达式为真，就不会往下执行



```bash
var result = (para>12 && 4) || (para>10 && 3) || (para>5 && 2) || (para>0 && 1) || 0;

我们现在来分析这个写法： 参数para>12的话，result = 4 ,不执行下面的了 ; 参数para不大于12的基础上，para大于10吗，大于的话，result= 3 ,下面的不执行 ….. 如此往下

!!写法

!是取反, !!是强制转换成 布尔类型 ,用这个判断更靠谱，也不容易错

这里面常用的其实是上面举例的第3、4、5中情况

3

1
var result = (para>12 && 4) || (para>10 && 3) || (para>5 && 2) || (para>0 && 1) || 0;

第三种情况是常见的接口传递过来具体的值，前端将具体数组转化成等级，比如95=>优秀

4

1
var showData= {'运营组':1,'渠道组':2,'测试部门':3,'后台':4}[res.data.num] || 0;

第四种情况就更加常见了，数据库中可能存的是1、2、3、4，但是页面中要显示‘运营组’、‘渠道组’、‘测试’、‘后台’，‘前台’等等，这个时候如果用if x==3 ，x== ‘测试’这种就非常繁琐，可以定义一个类对象做映射，直接类{}[传递过来的数值],这样转化，方便快捷

5

1
2
3
4
5
6
function testMethod(obj,callback){
      xxxxxx
      xxxxxx
      xxxxxx
      callback && callback(res, req)
}

这种是非常常见的回调写法，一般的框架和很多人写的方法中常见这种写法，具体含义是，如果在某个文件调用这个方法时，传递了回调函数，执行callback(res，req) ,没有传递则什么都不做。这里其实还是利用的短路运算和js默认的类型转换
callback && callback(res, req) 等价于 !!callback && callback(res, req) ，!!将回调转化成布尔值，存在为true，执行回调

一个js函数的小技巧

有时候可能我们会遇到这种需求：希望这个函数执行一次后就改变函数体，比如: 只有第一次click出发函数，接下来什么都不做

函数如下：

1
2
3
4
5
6
7

function a() { 
    console.log("1");
     a = function() {
           console.log("2");
         } 
}
赏

给我一点关爱 :)

支付宝

扫一扫，分享到微信

微信分享二维码