13个非常实用的JavaScript小技巧
使用!!操作符转换布尔值
有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值。为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测,只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false,反之返回的是true。比如下面的示例:
class Account {
constructor(cash) {
this.cash = cash;
this.hasMoney = !!cash;
}
}
let account = new Account(10.2);
console.log(account.cash); //10.2
console.log(account.hasMoney); //true
let account2 = new Account(0);
console.log(account2.cash); //0
console.log(account2.hasMoney); //false
在这个示例中,只要account.cash的值大于0,那么account.hasMoney返回的值就是true。
使用+将字符串转换成数字
这个技巧非常有用,其非常简单,可以交字符串数据转换成数字,不过其只适合用于字符串数据,否则将返回NaN,比如下面的示例:
class ToNumber{
constructor(num){
this.num = num
};
to(){
return +this.num
}
}
let num1 = new ToNumber("10");
let num01 = num1.to();
console.log(num01+1); //返回11
let num2 = new ToNumber("10d");
let num02 = num2.to();
console.log(num02); //返回NaN
这个也适用于Date,在本例中,它将返回的是时间戳数字:
console.log(+new Date()); //返回的是当前时间的时间戳
并条件符
如果你有一段这样的代码:
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")。
使用按位异或|进行取整
按位异或操作符|有体格尿性,就是两边只要是0的话才为0,有一个不为0的数返回的就是整数
let num = 2.2 | 0;
console.log(num); //返回2
获取数组中最后一个元素
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.push().apply(arr1,arr2)
来替代创建一个新数组。这种方法不是用来创建一个新的数组,其只是将第一个第二个数组合并在一起,同时减少内存的使用:
var array1 = [1,2,3];
var array2 = [4,5,6];
array1.push.apply(array1, array2); //6
console.log(array1);// [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() { return Math.random() - 0.5 })); // [2,1,3]
13个非常实用的JavaScript小技巧的更多相关文章
- 12个十分实用的JavaScript小技巧
12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 非常实用的JavaScript小技巧
使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...
- 三个实用的javascript小技巧
从后向前获取数组元素 如果你想从后向前获取一个数组的元素,可以这样写: var newArray = [1, 2, 3, 4] console.log(newArray.slice(-1)) // [ ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
- 11个教程中不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...
- python实用30个小技巧
python实用30个小技巧 展开1.原地交换两个数字Python 提供了一个直观的在一行代码中赋值与交换(变量值)的方法,请参见下面的示例: In [1]: x,y = 10 ,20 In [2]: ...
- 常用的一些javascript小技巧
(转载)常用的一些javascript小技巧: http://bbs.blueidea.com/thread-2201069-1-1.html
随机推荐
- Zookeeper研究和应用
http://www.searchtb.com/2011/01/zookeeper-research.html zookeeper简介 zookeeper是一个开源分布式的服务,它提供了分布式协作,分 ...
- Java中Math类的几个四舍五入方法的区别
JAVA取整以及四舍五入 下面来介绍将小数值舍入为整数的几个方法:Math.ceil().Math.floor()和Math.round(). 这三个方法分别遵循下列舍入规则:Math.ceil()执 ...
- Quartz 2D中CGContextSaveGState与UIGraphicsPushContext
CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context是图形上下文 ...
- CBiontCache
/************************************************************************/ /* 预先加载一些生物以备将来使用 */ /* 专 ...
- 源码分析:Java堆的创建
虚拟机在内存中申请一片区域,由虚拟机自动管理,用来满足应用程序对象分配的空间需求,即堆空间. 由于程序运行的局部特性,程序创建的大多数对象都具有非常短的生命周期,而程序也会创建一些生命周期特别长的对象 ...
- dp之01背包hdu3466(带限制的,当你所拥有的钱数大于某个限定值时才可以购买该物品)
题意:买东西,每个东西有三个特征值,p代表价格,q代表你手中钱必须不低于q才能买这个物品,v代表得到的价值. mark:又是变种01背包,每做一个变种的,就是一种提高.. 按照q - p以由大到小的顺 ...
- java strtus2 拦截器(Interceptors)
在strtus2 中有一个比较重要的东西就是拦截器(Interceptors) 拦截器可以做到在已有的业务中插入一块共通的,比如在一个业务中,直接插入一串登录功能,就不用去每个页面一个个去显示是否登录 ...
- 浏览器中F5和CTRL F5的行为区别
前言 在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为也是刷新页面,但是会清除浏览器缓存,这在前端调试时候会常用.二者真正的区别是什么呢?在stackove ...
- js 拼接字符串 穿参数 带有单引号
var html="<a href=\"#\" onclick=Unlock(\""+flid+"\",1)>弹出& ...
- jquery mobile小经验
现在网站上关于jquery mobile的demo和帖子可真少啊,我刚开始接触,遇到了一些问题,都找不到人请教. 这是我的个人经验总结,或多或少会对刚入门的童鞋有点帮助吧. 如果想一开始进入页面的时候 ...