几种Javascript技巧

  本文展示了Javascript几种技巧:使用"!!"操作符转换为布尔;使用"+"操作符转换为数字型;缺省值使用"||"操作符。

"!!"操作符转换为布尔

有时我们会检查某个变量是否存在或是否有效值,如果有就用true布尔型表达,只需要用两个感叹号放在变量前: ”!!变量名“。这会自动将任何类型数据转为boolean布尔类型,这个变量将会返回true或false,如果这些值是0、null 、""(注:这是空字符)、undefined或NaN,那么就返回false;否则就返回true。

function Account(cash) {
this.cash = cash;
this.hasMoney = !!cash; //注意这里双感叹号转换成boolean
}
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

 

"+"操作符转换为数字型

通过在变量前面增加加号“+”,能够将字符串类型的数字转为数字型的数字,参与运算。如果不能转换会返回NaN(不是一个Number数字型):

function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN

下面对Date类似进行这种操作符,会返回时间戳数字型:

console.log(+new Date()) // 1461288164385

 

缺省值使用"||"操作符

自从ES6以后增加了默认参数特性,但是在不支持ES6等环节,你可以使用“||”操作符将第二个参数作为默认参数值使用。如果第一个参数返回false,那么第二个将会作为默认值:

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

 

在循环中缓存array.length

一般循环遍历数组如下:

for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}

改为如下可缓存数组的长度值,提升性能:

for(var i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}

探测对象中属性

有时会检查某个对象中属性是否存在,避免运行undefined函数或属性,比如我们在老的IE6中需要使用document.querySelector("#id");如果不是则正常使用document.getElementById("id"); 那么我们需要判断document中是否有querySelector函数或属性:

if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}

将NodeList转为Array数组

当你运行document.querySelectorAll("p")时会返回DOM元素的数组,元素类型是NodeList,单子这种类型数组不支持所有数组操作,如sort(), reduce(), map(), filter(). 为了使用这些操作,你需要转换到普通数组:

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // 现在NodeList是一个数组了
var arrayElements = Array.from(elements); // 这是另外一个转换 NodeList到 Array方式

简短条件判断

通常有如下代码:

if (conected) {
login();
}

可以使用“&”简写为:

conected && login();

同样,可以用来检测一个对象中是否存在某个属性和函数:

user && user.login();

 

Javascript专题