总结下 js 在日常使用中更简洁,更易读的写法

操作符的妙用

1.利用按位与“&”判断奇偶数

按位与运算的逻辑是这样: 0001 & 0011 = 0001,也就是两个位都是 1,才是 1,其它位都是 0。
我们经常要做一个条件,判断一个数的奇偶性,会这样写:

function fn(n) {
    if(n % 2 === 1) {
        //奇数
    } else {
        //偶数
    }
}

2.利用按位与运算,则可以简写为这样:

function fn(n) {
    if(n & 1) {
        //奇数
    } else {
        //偶数
    }
}

3.利用按位或“|”取整

按位或运算的逻辑是这样: 0001 | 0011 = 0011,也就是两个位都是 0,才是 0,其它位都 1。

0 | 0 //0
0 | 1 //1
1 | 0 //1
1 | 1 //1
3 | 5 //7 即 0000 0011 | 0000 0101 = 0000 0111   因此,3|5的值得7

按位或|有一个作用,通过搭配 0 进行运算可以用来实现数字取整。

1.1 | 0 //1
-2.0 | 0 //-2

//非数字,则根据值强转为 0 或者 1 再取整,不过这种没啥意义
null | 0 //0
true | 0 //1

Tips: 其实浮点数是不支持位运算的,所以会先把 1.1 转成整数 1 再进行位运算,就好像是对浮点数向下求整。所以 1 | 0 的结果就是 1。

还有一个就是在设计 vue 组件的时候,也常用到的地方如下:(具体为啥这么用,我也说不清楚,没研究过原理,知道的同学可以告诉我)。

export default {
    //... 其它参数
    props {
        params: Object | Array //只要其中任意一个满足条件即可
    }
}

4.利用按位非“~”简化表达式

普及一下~运算符,这个符号学名叫“按位非”,它是一个一元运算符。按位非操作符由一个波浪线(~)表示,按位非就是求二进制的反码。不管什么值使用了这个运算符,结果总是一个数字。按位非运算符,简单的理解就是改变运算数的符号并减去 1。

~5 //-6
~0 //-1
~-2 //1
~true //-2 这里true被强转为1
~null //-1 这里null被强转为0
~undefined //-1 这里undefined被强转为0

利用这个原理,我们可以在实际工作中这样应用:

var str = 'hello world!'
if(str.indexOf('w') != -1) { /*...*/ }
//或者
if(str.indexOf('w') > -1) { /*...*/ }

//根据str.indexOf('w')的值,无外乎两种情况: -1, 0及正整数,
//则,从-1到正整数中,经过按位运算~之后,则为:0或者任意负数,
//实际表示为:false与true
//上面的条件语句,可以改为:
if(~str.indexOf('w')) { /*...*/ }

Tips: 按位运算,简单的地方,可以使用。但一些比较复杂的、难理解的,我觉得应该尽量少用,因为会给阅读者带来困难,也会给自己带来麻烦。

5.左移<<求 2 的 n 次方

//二进制运算:
01 << 2 //0100,十进制为4

//实际运用可以这样:
1 << 2 //4 即2的平方
1 << 3 //8 即2的立方
1 << 4 //16 即2的4次方

6.无符号右移>>>判断数的正负

正数的无符号右移与有符号右移结果是一样的。负数的无符号右移会把符号位也一起移动,而且无符号右移会把负数的二进制码当成正数的二进制码。即:

1 >>> 0 //1
2 >>> 0 //2
4 >>> 0 //4
4 >>> 1 //2
4 >>> 2 //1
-4 >>> 0 //4294967292
-4 >>> 1 //2147483646
-2 >>> 0 //4294967294
-1 >>> 0 //4294967295

观察上面的例子,我们得出一个结论,正数右移 0 位,值不变,而负数右移 0 位,值已经变化了。即可以通过这种关系判断一个数的正负:

function isPos(n) {
    return n === n >>> 0
}
isPos(-1) //false
isPos(1) //true

7.利用&&连结条件与表达式

通常,我们为了给一个变量赋值,正常的逻辑是:if 语句判断,通过 if 逻辑控制语句,则赋值成功。利用&&符号,则可以直接在前面写上条件语句,后面写上执行语句。

var a;
if(true) {
    a = 10
}

//也可以写成
var a;
true && (a = 10);
//或者
var a = true && 10; //这种情况尽量不要使用,因为如果条件不成立,则会给a赋上一个false值。

//常见使用:
function fn(obj) {
    obj && (return true);
    return false;
}

var a = b = c = true, d;
a && b && c && (d = 10);
console.log(d) //10

Tips: 对于&&,需要注意以下几点:

  • 对于布尔值,逻辑与是非常简单的,只要有一个 false,就返回 false;
  • 对于不是布尔值的情况则:
    如果第一个操作数是对象,则返回第二个数
    如果第二个操作数是对象,则只有在第一个操作数的求值结果为 true 的情况下才会返回该对象;
    如果第两个操作数都是对象,则返回第二个数操作数
    如果有一个操作数是 null,则返回 null
    如果有一个操作数是 NaN,则返回第 NaN
    如果第一个操作数是 undefined,则返回 undefined

8.利用||取值(设置默认值)

通常,我们声明一个变量,可能要根据条件进行赋值。正常的逻辑是:if … else if … else 或者使用 switch 这两种语句块。

var a, b;
if(b === 0) {
    a = 1
} else if(b === 1) {
    a = 2
} else {
    a = 3
}
//或者
var a, b = 1;
switch(b) {
    case 0:
        a = 1;
        break;
    case 1:
        a = 2;
        break;
    default:
        a = 3;
        break;
}

如果直接使用||或运算符,则按从左到右,取第一个非空的一个值,否则直接使用 false 作为值使用。

var b = 4;
var a = (b === 0 && 1) || (b === 1 && 2) || 3; // 3

//常用到的或运算取值方式一般是在函数里面。
function doSomething(obj) {
    var o = obj || {} //如果obj不存在,则使用默认值
    var oo;
    o && (oo = obj || {}) //结合与运算,作变判断的前置条件
}

Tips: 关于||,需要注意以下几点:

  • 对于布尔值,逻辑或是非常简单的,只要有一个 true,就返回 true;
  • 对于不是布尔值的情况则:
    如果第一个操作数是对象,则返第一个操作数
    如果第一个操作数的求值结果为 false,则返回第二个操作数
    如果两个操作数都是对象,则返回第一个操作数
    如果两个操作数是 null,则返回 null
    如果两个操作数是 NaN,则返回 NaN
    如果两个操作数是 undefined,则返回 undefined

9.利用~ ~取整

如果要将一个小数取整数部分,正常的逻辑是:parseInt()强转为整数方法,或者 Math.floor()向下取整。其实,使用~ ~操作符可以更快速的取整。

parseInt(12.55) //12
Math.floor(12.55) //12
~ ~12.55 //12

其实,除了取整的作用,它还可以达到强转数字的作用,比如:

~ ~true //1
~ ~false //0
~ ~[] //0
~ ~{} //0
~ ~undefined //0
~ ~!undefined //1
~ ~null //0
~ ~!null //1

Tips: 虽然~ ~用起来比较骚气,但是为了可读性,本人还是建议使用 Math.floor()更为稳妥,谁知道领导 review 代码的时候,会不会说你过于装逼,要被喷死。

10.利用+将字符串转为数字

如果要将一个表现字符串的数字转化为真正的数字,正常逻辑是:Number()或者 parseInt()、parseFloat()实现转化。实际上,我们还可以更简捷,只需要在前面添加一个+就可以了。当然,你也可以用-来实现,只不过,这样子,则值就成了负数。

Number('123') //123
parseInt('123') //123
parseFloat('123') //123
parseFloat('123.0') //123
parseFloat('123.0') //123
parseFloat('123.1') //123.1

//只要使用+,则可以实现数字的转化
+'123' //123
+'12.22' //12
-'12.1' //-12.1

//如果要取整并且转数字的话,使用~~
~~'123.33' //123

实际上,+也适用于 Date 对象。

var date = new Date //Fri Oct 27 2017 14:38:49 GMT+0800 (中国标准时间)
date.getTime() //1509086332914

//使用+直接输出时间缀
+new Date //1509086332914

11.利用!逻辑非强转布尔值

逻辑非会将所有值,转为布尔值:

!{} //false 一个空对象,实际上是一个引用,属于存在的引用地址值
![] //false 存在引用地址值
!'' //true
!0 //true
!'hello' //false
!null //true
!NaN //true
!undefined //true

利用逻辑非运算符,可以省去一些多余的判断。比如经常要判断一个值非空:

var a, b;
if(a !== undefined && a !== null && a !== '' && a !== {} && a!== 0 && a!== undefined) {
    b = true;
}

实际上,如果像这面这种判断,只需要一个逻辑非。

var a, b;
!a && (b = true);

12.利用!!实现变量检测

如果要将一个值强转为布尔类型,正常的逻辑是:Boolean()强转为布尔值。

Boolean(123) //true
Boolean('hello') //true
Boolean('false') //true
Boolean(null) //false
Boolean(undefined) //false
Boolean('undefined') //true

然而,通过!!两个非逻辑符,则可以将一个值强转为布尔值。

!!123 //true
!!'hello' //true
!!'false' //true
!!null //false
!!undefined //false
!!0 //false 注意,0也会转为false,在数字中,只有0会转为false,其它非0值,都会转为true
!!'' //false
!!NaN //false

Tips: 任意的 javascript 的值都可以转换成布尔值。这些值会被转换成 false:undefined,null,0,-0,NaN,””,而其它都变强转为 true。通常,利用!!符号来检测一个变量是否存在。 ###表达式的妙用

1.自执行函数

函数,只是声明,并不能直接执行,需要调用才会执行。而如果,变成了表达式,则会自动执行。自执行函数,则是利用了表达式的这种特性。那些匿名函数附近使用括号或一些一元运算符来引导解析器,指明运算符附近是一个表达式。
按照这个理解,可以举出五类,超过十几种的让匿名函数表达式立即调用的写法:

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

Tips:另外值得再次注意的是,括号的含混使用——它可以用来执行一个函数,还可以做为分组运算符来对表达式求值。比如使用圆括号或方括号的话,可以在行首加一个分号,避免被用做函数执行或下标运算:

;( function() {}() )
;(function(){})()

2.isNaN 判断是否为合法数字

isNaN(x) 函数用于检查其参数是否是非数字值。如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false。
经常,我们在页面功能模块开发过程中,拿到的交互数据,有很大可能是字符串形式的“数字”。这时,我们如果要做计算,就得先判断是否合法的数字。

isNaN('111') //false
isNaN(111) //false
isNaN(12.2) //false
isNaN('12.2') //false
isNaN('aa11') //true
isNaN(undefined) //true 一切非数字,返回都是true

Tips: 我们可以这样总结,只要是表现得像数字(字符串形式,或者真正数字)的都可以检测出是属于“数字”,否则属于不合法数字。

3.缓存 Array.length

写 for 循环的时候,经常是这样:

var arr = [1,2,3]
for(var i = 0; i < arr.length; i++) {/**/}

在处理一个很大的数组循环时,对性能的影响将是非常大的。为了提升运行性能,需要将数组使用一个变量缓存起来使用。

for(var i = 0, len = arr.length; i < len; i++){/**/}

4.判断属于是否存在于对象中

a、使用 in 运算符

var obj = { a: 11 }
'a' in obj //true
'b' in obj //false

b、使用!!

var obj = { a: 11 }
!!obj.a //true
!!obj.b //false

//或者使用undefined来判断,但是可能也会属于值本身就是undefined,这样子就判断不出来了。
obj.a !== undefined //true
obj.b !== undefined //false

c、hasOwnProperty()方法

var obj = { a: 11 }
obj.hasOwnProperty('a') //true
obj.hasOwnProperty('b') //false
//该方法只能判断自有属性是否存在,对于继承属性会返回false。

5.获取数组最后一个元素

获取数组最后一个元素的方式有多种,常用的有 array.pop 或者 array[array.length - 1]方式。实际上,还可使用 Array.slice(-1)

var arr = [1,2,3,4,5]
arr.pop() //5 此方法会改变数组的结构,不推荐
arr[arr.length - 1] //5
arr.slice(-1)[0] //5 不需要计算数组的长度,直接拿到最后一个元素

6.数组截断

数组有时候需要设置一个上限,或者删除数组中的一些元素,使用 array.length = [长度值] 这种方式非常有用。

var arr = [1,2,3,4,5]
arr.slice(0,3)
console.log(arr) //[1,2,3]
arr = arr.splice(0,3) //splice方法会改变数组结构
console.log(arr) //[1,2,3]

//直接设置长度值
arr.length = 3
console.log(arr) //[1,2,3]

//还可以实现数组的清空操作
arr.length = 0; //arr => []

7.数组合并

合并数组常用的方法是:concat。不过现有一种更快速的合并方式:Array.push.apply(arr1,arr2)

var arr1 = [1,2,3], arr2 = [4,5];

arr1 = arr1.concat(arr2) //常规方式
//或者
arr1 = arr1.push.apply(arr1,arr2); //装逼方式,但运行速度更快!

console.log(arr1) //[1,2,3,4,5] 两种方式都可以达到合并的结果

8.类数组利用数组的方法

类数组拥有 length 属性,但不具有数组所具有的方法。为了方便操作,常需要将其转化为数组结构。

var arrLike = { '0': 'a', '1': 'b', length: 2 }; //下标为 '0' '1'才符合数组的数据结构
Array.prototype.join.call(arrLike, '-'); //a-b 模拟数组的join()方法,使用-分隔。
Array.prototype.slice.call(arrLike); //['a','b'] //模拟数组slice方法,返回一个新的数组

function fn() {
    var args = Array.prototype.slice.call(arguments); //获取所有参数的列表
}

9.利用 arguments.callee 实现递归

普通的递归方法是这样写的:

function fn(n) {
    if(n <= 1) {
        return 1
    } else {
        return n * fn(n - 1)
    }
}

但是当这个函数变成了一个匿名函数时,我们就可以利用 callee 来递归这个函数。

function fn(n) {
    if(n <= 1) {
        return 1
    } else {
        return n * arguments.callee(n - 1)
    }
}

Tips: 这个方法虽然好用,但是有一点值得注意,ECMAScript4 中为了限制 js 的灵活度,让 js 变得严格,新增了严格模式,在严格模式中我们被禁止不使用 var 来直接声明一个全局变量,当然这不是重点,重点是 arguments.callee 这个属性也被禁止了。

10.给回调函数传递参数

经常,函数一般是可以当作参数来使用。但是有时候,一些函数自身需要带参,这时候,把函数当参数使用的话,就显得比较麻烦。一般的处理方法是,通过附加的传参的办法。

function callback(obj) {
    console.log(obj)
}

function fn(callback, obj) {
    callback(obj)
}

但是有些时候,函数的参数限定了,只能传一个回调函数,这时,这种附加传参的显得无力了。采用闭包的方式可以解决此问题。

function callback(obj) {
    return function() {
        console.log(obj)
    }
}

document.body.addEventListener('click',callback('hello')); //执行callback('hello'),则返回的是一个函数

11.利用正则表达式处理实际问题

a、获取有价值部分

经常,在项目中,可能会获取到一些带有带有各种干扰因素的值。而我们需要提取相应的数字部分,可以使用正则表达式获取。

var val = "98.8元/斤";
val.replace(/[^(0-9).]/ig,'') //98.8

2、获取 URL 中的 value 值

经常,我们会从 url 中获取到 location.search,但却是一个字符串,然后还需要将这个字符串进行分拆才能得到想要的值,而使用正则,则快速方便得多。

//假设当前url为:https://www.baidu.com?name=jawil&age=23

//普通实现:
function fn(key) {
    var obj = {}
    var searchStr = window.location.search.substring(1);
    searchStr.split('&').forEach(function(item) {
        var arr = item.split('=');
        obj[arr[0]] = arr[1];
    });
    return obj[key]
}

console.log(fn('name')) //jawil
console.log(fn('age')) //23

//使用正则实现:
function fn(key) {
    var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)"); //url正则表达式
    var flag = window.location.search.substring(1).match(reg);
    return flag != null ? unescape(flag[2]) : null;
}

console.log(fn('name')) //jawil

3、格式化数字

通常,我们需要将一个大的数字 19456212 转化为 19,456,212 这种样子。使用正则表达式可以很好的处理:

var num = 19456212.85;
num.toLocaleString() //19,456,212.85 toLocaleString()会根据你机器的本地环境来返回字符串,它和toString()返回的值在不同的本地环境下使用的符号会有微妙的变化

//为了保险起见,可以使用方法实现
function fn(s, n) {
    n = n > 0 && n <= 20 ? n : 2;
    s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
    var l = s.split('.')[0].split('').reverse(),
        r = s.split('.')[1];
    t = '';
    for (i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '');
    }
    return t.split('').reverse().join('') + '.' + r;
}

console.log(fn(19456212.85)) //19,456,212.85