12个非常实用的JavaScript小技巧
来源:原创 时间:2017-04-30 浏览:0 次在这篇文章中将给咱们共享12个有关于JavaScript的小窍门。这些小窍门也许在你的实际工作中或许能协助你处理一些问题。
运用!!操作符转换布尔值
有时候咱们需求对一个变量查检其是不是存在或许查看值是不是有一个有效值,假如存在就回来true值。为了做这么的验证,咱们能够运用!!操作符来完成是十分的便利与简略。关于变量能够运用!!variable做检查,只需变量的值为:0、null、" “、undefined或许NaN都将回来的是false,反之回来的是true。比方下面的示例:
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,比方下面的示例:
function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
这个也适用于Date,在本例中,它将回来的是时刻戳数字:
console.log(+new Date()) // 1461288164385
并条件符
假如你有一段这么的代码:
if (conected) {
login();
}
你也能够将变量简写,而且运用&&和函数衔接在一同,比方上面的示例,能够简写成这么:
conected && login();
假如一些特点或函数存在于一个目标中,你也能够这么做检查,如下面的代码所示:
user && user.login();
运用||运算符
在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
var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25
在循环中缓存array.length
这个窍门很简略,这个在处理一个很大的数组循环时,对功用影响将是十分大的。基本上,咱们都会写一个这么的同步迭代的数组:
for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}
假如是一个小型数组,这么做极好,假如你要处理的是一个大的数组,这段代码在每次迭代都将会从头核算数组的巨细,这将会致使一些延误。为了防止这种景象呈现,能够将array.length做一个缓存:
var length = array.length;
for(var i = 0; i < length; i++) {
console.log(array[i]);
}
你也能够写在这么:
for(var i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}
检查目标中特点
当你需求检查一些特点是不是存在,防止运转未定义的函数或特点时,这个小窍门就显得很有用。假如你打算定些一些跨兼容的浏览器代码,你也也许会用到这个小窍门。例如,你想运用document.querySelector()来挑选一个id,而且让它能兼容IE6浏览器,但是在IE6浏览器中这个函数是不存在的,那么运用这个操作符来检查这个函数是不是存在就显得十分的有用,如下面的示例:
if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}
在这个示例中,假如document不存在querySelector函数,那么就会调用docuemnt.getElementById("id")。
获取数组中最终一个元素
Array.prototype.slice(begin,end)用来获取begin和end之间的数组元素。假如你不设置end参数,将会将数组的默许长度值当作end值。但有些同学也许不知道这个函数还能够承受负值作为参数。假如你设置一个负值作为begin的值,那么你能够获取数组的最终一个元素。如:
var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]
数组切断
这个小窍门首要用来确定数组的巨细,假如用于删去数组中的一些元素来说,是十分有用的。例如,你的数组有10个元素,但你只想只需前五个元素,那么你能够经过array.length=5来切断数组。如下面这个示例:
var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]
更换一切
String.replace()函数答应你运用字符串或正则表达式来更换字符串,自身这个函数只更换第一次呈现的字符串,不过你能够运用正则表达多中的/g来模仿replaceAll()函数功用:
var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"
兼并数组
假如你要兼并两个数组,通常状况之下你都会运用Array.concat()函数:
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];
然后这个函数并不合适用来兼并两个大型的数组,因为其将耗费很多的内存来存储新创立的数组。在这种状况之个,能够运用Array.pus().apply(arr1,arr2)来代替创立一个新数组。这种办法不是用来创立一个新的数组,其仅仅将第一个第二个数组兼并在一同,一同削减内存的运用:
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
将NodeList转换成数组
假如你运转document.querySelectorAll(“p”)函数时,它也许回来DOM元素的数组,也即是NodeList目标。但这个目标不具有数组的函数功用,比方sort()、reduce()、map()、filter()等。为了让这些原生的数组函数功用也能用于其上面,需求将节点列表转换成数组。能够运用[].slice.call(elements)来完成:
var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array
数组元素的洗牌
关于数组元素的洗牌,不需求运用任何外部的库,比方Lodash,只需这么做:
var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]
总结
如今你学会了些有用的JavaScript小窍门。期望这些小窍门能在工作中协助你处理一些费事,或许说这篇文章对你有所协助。假如你有一些优秀的JavaScript小窍门,欢迎在评论中与咱们一同共享。