在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。
使用!!
操作符转换布尔值
有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true
值。为了做这样的验证,我们可以使用!!
操作符来实现是非常的方便与简单。对于变量可以使用!!variable
做检测,只要变量的值为:0
、null
、" "
、undefined
或者NaN
都将返回的是false
,反之返回的是true
。比如下面的示例:
1 2 3 4 5 6 7 8 9 10 11 |
function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // true var emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false |
在这个示例中,只要account.cash
的值大于0
,那么account.hasMoney
返回的值就是true
。
使用+
将字符串转换成数字
这个技巧非常有用,其非常简单,可以交字符串数据转换成数字,不过其只适合用于字符串数据,否则将返回NaN
,比如下面的示例:
1 2 3 4 5 |
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN |
这个也适用于Date
,在本例中,它将返回的是时间戳数字:
1 |
console.log(+new Date()) // 1461288164385 |
并条件符
如果你有一段这样的代码:
1 2 3 |
if (conected) { login(); } |
你也可以将变量简写,并且使用&&
和函数连接在一起,比如上面的示例,可以简写成这样:
1 |
conected && login(); |
如果一些属性或函数存在于一个对象中,你也可以这样做检测,如下面的代码所示:
1 |
user && user.login(); |
使用||
运算符
在ES6中有默认参数这一特性。为了在老版本的浏览器中模拟这一特性,可以使用||
操作符,并且将将默认值当做第二个参数传入。如果第一个参数返回的值为false
,那么第二个值将会认为是一个默认值。如下面这个示例:
1 2 3 4 5 6 7 8 9 10 11 |
function User(name, age) { this.name = name || "Oliver Queen"; this.age = age || 27; } var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27 var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25 |
1 2 3 4 5 6 7 8 9 10 11 |
function Account(cash) { this.cash = cash; this.hasMoney = !!cash; } var account = new Account(100.50); console.log(account.cash); // 100.50 console.log(account.hasMoney); // true var emptyAccount = new Account(0); console.log(emptyAccount.cash); // 0 console.log(emptyAccount.hasMoney); // false |
在这个示例中,只要account.cash
的值大于0
,那么account.hasMoney
返回的值就是true
。
使用+
将字符串转换成数字
这个技巧非常有用,其非常简单,可以交字符串数据转换成数字,不过其只适合用于字符串数据,否则将返回NaN
,比如下面的示例:
1 2 3 4 5 |
function toNumber(strNumber) { return +strNumber; } console.log(toNumber("1234")); // 1234 console.log(toNumber("ACB")); // NaN |
这个也适用于Date
,在本例中,它将返回的是时间戳数字:
1 |
console.log(+new Date()) // 1461288164385 |
并条件符
如果你有一段这样的代码:
1 2 3 |
if (conected) { login(); } |
你也可以将变量简写,并且使用&&
和函数连接在一起,比如上面的示例,可以简写成这样:
1 |
conected && login(); |
如果一些属性或函数存在于一个对象中,你也可以这样做检测,如下面的代码所示:
1 |
user && user.login(); |
使用||
运算符
在ES6中有默认参数这一特性。为了在老版本的浏览器中模拟这一特性,可以使用||
操作符,并且将将默认值当做第二个参数传入。如果第一个参数返回的值为false
,那么第二个值将会认为是一个默认值。如下面这个示例:
1 2 3 4 5 6 7 8 9 10 11 |
function User(name, age) { this.name = name || "Oliver Queen"; this.age = age || 27; } var user1 = new User(); console.log(user1.name); // Oliver Queen console.log(user1.age); // 27 var user2 = new User("Barry Allen", 25); console.log(user2.name); // Barry Allen console.log(user2.age); // 25 |