7个冷门JavaScript技巧

简介: 这段内容介绍了多个有趣的JavaScript技巧与实现方法,包括生成随机字符串、整数操作优化、重写原生浏览器方法扩展功能、关于`console`的恶作剧、不声明中间变量的值交换方式、万物皆对象的概念解析,以及如何禁止他人通过iframe加载你的页面。这些技巧不仅展示了JavaScript语言的灵活性和强大功能,还为开发者提供了实用的代码优化和安全防护思路。例如,利用`toString(36)`生成随机字符串、用位运算提升整数处理效率、重写`alert`记录弹窗次数等,都体现了创意与实用性结合的编程艺术。

生成随机字符串

利用Math.random和toString生成随机字符串,来自前一阵子看到的一篇博文。这里的技巧是利用了toString方法可以接收一个基数作为参数的原理,这个基数从2到36封顶。如果不指定,默认基数是10进制。略屌!

    function generateRandomAlphaNum(len) {
        var rdmString = "";
        for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
        return rdmString.substr(0, len);
    }

整数的操作

JavaScript中是没有整型概念的,但利用好位操作符可以轻松处理,同时获得效率上的提升。

|0和~~是很好的一个例子,使用这两者可以将浮点转成整型且效率方面要比同类的parseInt,Math.round 要快。在处理像素及动画位移等效果的时候会很有用。性能比较见此。

    var foo = (12.4 / 4.13) | 0;//结果为3
    var bar = ~~(12.4 / 4.13);//结果为3

顺便说句,!!将一个值方便快速转化为布尔值 !!window===true 。

重写原生浏览器方法以实现新功能

下载的代码通过重写浏览器的alert让它可以记录弹窗的次数。

    (function() {
        var oldAlert = window.alert,
            count = 0;
        window.alert = function(a) {
            count++;
            oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
        };
    })();
    alert("Hello World");

关于console的恶作剧

关于重写原生方法,这里有个恶作剧大家可以拿去寻开心。Chrome的console.log是支持对文字添加样式的,甚至log图片都可以。于是可以重写掉默认的log方法,把将要log的文字应用到CSS的模糊效果,这样当有人试图调用console.log()的时候,出来的是模糊不清的文字。好冷,我表示没有笑。

是从这篇G+帖子的评论里看到的。使用之后的效果是再次调用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的世界,万物皆对象。除了null和undefined,其他基本类型数字,字符串和布尔值都有对应有包装对象。对象的一个特征是你可以在它身上直接调用方法。对于数字基本类型,当试图在其身上调用toString方法会失败,但用括号括起来后再调用就不会失败了,内部实现是用相应的包装对象将基本类型转为对象。所以(1).toString()相当于new Number(1).toString()。因此,你的确可以把基本类型数字,字符串,布尔等当对象使用的,只是注意语法要得体。

同时我们注意到,JavaScript中数字是不分浮点和整形的,所有数字其实均是浮点类型,只是把小数点省略了而以,比如你看到的1可以写成1.,这也就是为什么当你试图1.toString()时会报错,所以正确的写法应该是这样:1..toString(),或者如上面所述加上括号,这里括号的作用是纠正JS解析器,不要把1后面的点当成小数点。内部实现如上面所述,是将1.用包装对象转成对象再调用方法。

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

    if (window.location != window.parent.location) window.parent.location = window.location;
相关文章
|
8月前
|
消息中间件 算法 安全
JUC并发—1.Java集合包底层源码剖析
本文主要对JDK中的集合包源码进行了剖析。
|
存储 监控 Java
Spring6入门 + Log4j2
Spring6入门 + Log4j2
|
Oracle Java Unix
Java/JDK下载、安装与环境变量配置超详细教程(2022更新)保姆级,秒会
Java/JDK下载、安装与环境配置超详细教程(2022更新)保姆级,小白秒会[学习必备,建议收藏]。包含JDK8、JDK11、JDK17、JDK19等,本文将从JDK的下载与安装讲起,在从配置到第一个HelloWrold实践结束。在观看本文前我们需要知道JDK是什么,有什么作用?JDK是Java的开发工具包,包括JVM虚拟机,核心类库,开发工具。
27401 0
Java/JDK下载、安装与环境变量配置超详细教程(2022更新)保姆级,秒会
|
小程序
微信小程序在使用vant组件van-nav-bar出现的边框bug问题解决
微信小程序在使用vant组件van-nav-bar出现的边框bug问题解决
531 0
|
8月前
|
机器学习/深度学习 算法 Java
OpenCV的理解及其应用
以上只是OpenCV的冰山一角,它的功能远不止这些。如果你对计算机视觉有兴趣,我强烈推荐你去尝试使用OpenCV,相信你会在使用过程中发现更多的有趣和实用的功能。
254 8
|
8月前
|
数据采集 机器学习/深度学习 人工智能
数据驱动智能,智能优化数据——大数据与人工智能的双向赋能
数据驱动智能,智能优化数据——大数据与人工智能的双向赋能
562 4
|
8月前
|
存储 弹性计算 人工智能
阿里云服务器ECS g8i实例怎么样?新一代g8i实例技术特性与场景应用解析
阿里云服务器ECS g8i实例怎么样?对于很多企业用户说,云服务器的性能、安全性和AI能力是用户非常关注的。无论是处理大规模数据、运行复杂算法,还是保障业务应用的安全,都需要云服务器具备卓越的性能和强大的功能。阿里云推出的第八代云服务器ECS g8i实例,凭借其卓越的性能、增强的AI能力和全面的安全防护,成为了市场关注的焦点。本文将为大家解析ECS g8i实例的技术特性、产品优势、适用场景及与同类产品的对比,同时介绍其收费标准和活动价格,以供大家了解和选择。
阿里云服务器ECS g8i实例怎么样?新一代g8i实例技术特性与场景应用解析
|
9月前
|
人工智能 自然语言处理 Java
快速带你上手通义灵码 2.0,体验飞一般的感觉
通义灵码个人版为开发者免费提供智能编码能力,专业版限免期内开放更多功能。使用需先注册阿里云账号,支持JetBrains IDEs、Visual Studio Code等开发工具。以Visual Studio Code为例,安装插件并登录后即可体验其强大功能。通义灵码2.0在代码生成、需求理解及单元测试自动化等方面有显著提升,支持多语言和复杂场景,大幅提高开发效率。
235513 39
快速带你上手通义灵码 2.0,体验飞一般的感觉
|
8月前
|
前端开发 UED
网站设计:20个常用技巧
这是一篇关于网站设计技巧的分享文章,涵盖了20多个实用的小技巧,包括设置浏览器兼容性、禁用右键和复制功能、自定义图标、防止页面被另存为、删除确认提示、获取控件位置、光标定位、屏蔽功能键等。这些技巧适用于前端开发,能够提升网页的功能性和用户体验。欢迎补充更多实用技巧!
|
Java Shell Linux
从 am start 的 --user 参数说到 Android 多用户
am start 命令有时并不会乖乖如我们所愿,这时候我们需要知对策并知其所以然。
362 16