首页 > 新闻中心> 广州校区 >正文

粤嵌web前端培训:你可能不知道的JavaScript技巧

更新时间: 2017-08-01 16:06:05来源: 粤嵌教育

JavaScript有很多有趣的小技巧,有些在某些情况下非常实用,也有些能做出小小的恶作剧,粤嵌web前端培训在这简单介绍几个。

web前端培训

关于console的恶作剧

Chromeconsole.log是支持对文字添加样式的,甚至log图片都可以。于是可以重写掉默认的log方法,把将要log的文字应用到CSS的模糊效果,这样当有人试图调用console.log()的时候,出来的是模糊不清的文字。

var _log = console.log;

console.log = function() {

   _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');

};

不声明第三个变量的值交换

我们都知道交换两个变量值的常规做法,那就是声明一个中间变量来暂存。但鲜有人去挑战不声明中间变量的情况,下面的代码给出了这种实现。蛮有创意的。

var a=1,b=2;a=[b,b=a][0];

万物皆对象

JavaScript的世界,万物皆对象。除了nullundefined,其他基本类型数字,字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型,当试图在其身上调用toString方法会失败,但用括号括起来后再调用就不会失败了,内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此,你的确可以把基本类型数字,字符串,布尔等当对象使用的,只是粤嵌web前端培训提醒,注意语法要得体。

If语句的变形

当你需要写一个if语句的时候,不妨尝试另一种更简便的方法,用JavaScript中的逻辑操作符来代替。

var day=(new Date).getDay()===0;

//传统if语句

if (day) {

alert('Today is Sunday!');

};

//运用逻辑与代替if

day&&alert('Today is Sunday!');

比如上面的代码,我们知道逻辑操作存在短路的情况,对于逻辑与表达式,只有两者都真才结果才为真,如果前面的day变量被判断为假了,那么对于整个与表达式来说结果就是假,所以就不会继续去执行后面的alert了,如果前面day为真,则还要继续执行后面的代码来确定整个表达式的真假。利用这点达到了if的效果。

对于传统的if语句,如果执行体代码超过了1 条语句,则需要加花括号,而利用逗号表达式,可以执行任意条代码而不用加花括号。

if(conditoin) alert(1),alert(2),console.log(3);

上面if语句中,如果条件成立则执行三个操作,但我们不需要用花括号将这三句代码括起来。当然,这是不推荐的

禁止别人以iframe加载你的页面

if (window.location != window.parent.location) window.parent.location = window.location;

以上就是粤嵌web前端培训带来的JavaScript小技巧。

 

 

 

免费预约试听课

推荐阅读