你不了解的JS运算符小技巧

Question

yinguangyao opened this issue 3 years ago · comments

JavaScript中提供了不同种类的运算符，每种运算符有不同的作用，常用的运算符大家应该都知道作用是什么，这篇文章来介绍一些运算符使用中的小技巧。

一元运算符

void 运算符对任何值返回undefined。那为什么不直接使用undefined呢？
因为undefined不是保留字，在低版本浏览器或者局部作用域中是可以被当做变量赋值的，这样就会导致我们拿不到正确的undefined值，在很多压缩工具中都是将undefined用void 0来代替掉了。

var a = void 0; // undefined

加号一般都是用于计算数值，但是对两种不同类型使用加号会有一些意想不到的效果。在上一篇我们介绍类型转换的时候已经讲过加号是怎么进行类型转换的。

// 这里会触发隐式类型转换，最后得到hello1
var str = 'hello' + 1; // 'hello1'

利用+触发隐式类型转换的规则，我们可以用+将字符串转换为数字。

var count = +'100'; // 100

和<常用于比较两个数字大小，但在对字符串进行大小比较的时候，一般会依次比较两者每个字符ASCII码。

var bResult = "Blue" < "alpha"; // 输出 true

利用这一特性，我们可以巧妙地来比较一些日期的大小，这样就不需要再将日期拆开分别比较。

var date1 = '2018-09-10',
    date2 = '2018-09-11';
date1 > date2; // false

在ES7中，将扩展运算符引入到了对象中。
扩展运算符可以用来进行浅拷贝。

var a = { name: 'ygy', age: 20 };
var b = { ...a };

扩展运算符也可以用于函数参数，尤其是对于不能使用arguments的箭头函数。

const func = (...rest) => {
    console.log(rest[1])
}
func(1, 2, 3)

短路运算符在一定程度上可以代替if语句，这在React中非常常用。

// old
if (callback) callback();
// new
callback && callback();

短路运算符也经常用于深层取值。

var obj = {
    info: {
        name: 'ygy'
    }
}
obj.info && obj.info.name; // 'ygy'

||常被用于给变量赋默认值。

var b = a || 10; // 如果a是空值，那么b就是10

利用!可以将变量转换为布尔类型，最好使用!!来进行转换，这样对类型比较友好。

var a = {name: 'ygy'};
var b = !!a; // true

|可以用来对数值进行向下取整。

var a = 10.1;
var b = 10.1 | 0' // 10

利用1和其他数字进行&操作后得到1或0来判断这个数字是奇偶。

const num = 4;
const isEvenNum = num & 1 ? false : true;

可以使用双位操作符来替代Math.floor()，和|的用法基本上保持一致。

var a = 10.1;
var b = ~~a; // 10

运算符是我们在JS中最常用的，也有各种奇奇怪怪不为人知的用法，掌握了这些用法，在一定程度上可以提高我们的开发效率。