脚本宝典收集整理的这篇文章主要介绍了常用JavaScript小技巧及原理详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
善于利用JS中的小知识的利用,可以很简洁的编写代码
1. 使用!!模拟Boolean()函数
原理:逻辑非操作一个数据对象时,会先将数据对象转换为布尔值,然后取反,两个!!重复取反,就实现了转换为布尔值的效果。
2. 使用一元加(+)模拟Number()函数
原理:对非数值类型的数据使用一元加(+),会起到与Number()函数相同的效果。
@H_406_11@
null转换为0
对于字符串:
3. 使用逻辑与(&&)进行短路操作
if(connected){
login();
}
以上代码可以简化为
@H_126_77@connected && LOGin()
也可以用这种方法来检查对象中是否存在某个属性
user && user.login
原理:逻辑与(&&)会首先对第一个操作数进行求值,只有求值结果为true时才会对第二个操作数求值。connected && login()
中,若判断connected不为true,则不再进行下一步操作。
所谓的短路操作即第一个操作数可以决定结果,则不再对第二个操作数进行求值。
4. 使用逻辑或(||)设置默认值
逻辑或(||)也属于短路操作,即当第一个操作数可以决定结果时,不再对第二个操作数进行求值。
利用这个特点,我们可以给赋值语句设置默认值。只有当第一个操作数为null或者undefined时,才会把第二个操作数赋值给目标。
function User(name, age){
this.name = name || "Liming";
}
上述代码中,如果函数中没有传入name参数,name的值为undefined,那么就会给this.name
赋值为"Liming"。
ES6中可以为函数设置默认值,所以这个无需在函数中使用,但是其他地方还是很有用的。
5. 获取数组最后n个元素
可以使用以下代码获取数组中最后n个元素
VAR array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); //[6]
console.log(array.slice(-2)); //[5, 6]
原理:Array.prototype.slice(begin,end)
可以用来裁剪数组,第二个参数的默认值是数组的长度值。若值传入一个参数,则会返回从指定索引开始到数组结尾的所有值。
而slice()方法还可以接收负值,当传入负值时,会自动加上数组的长度值使其转换为正值,于是便得到了最后的n个值。
6. nodelist转换为数组
使用document.querySelectorAll('div')
返回的是NodeList对象,虽然它很像数组,但是并不能使用诸如@R_512_1026@,filter()等方法。你可以将其转换为真正的数组。
var eles = document.querySelectorAll('p'); //NodeList
var arrayElements = [].slice.call(eles); //转化为数组
// 或者
var arrayElements = Array.PRototyPE.slice.call(eles);
// 或者
var arrayElements = Array.From(eles);
原理:
以上是脚本宝典为你收集整理的常用JavaScript小技巧及原理详解全部内容,希望文章能够帮你解决常用JavaScript小技巧及原理详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。