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;
相关文章
Threejs实现天空盒,全景场景,地面草地
Threejs实现天空盒,全景场景,地面草地
2349 0
Threejs实现天空盒,全景场景,地面草地
|
移动开发 前端开发 iOS开发
记录一下前端H5的复制功能在ios端的兼容性问题
记录一下前端H5的复制功能在ios端的兼容性问题
1652 0
|
5月前
|
人工智能 自然语言处理 监控
5 分钟上手 AgentRun:从注册到第一个 Agent 运行
阿里云函数计算AgentRun让Agent上线仅需5分钟!告别繁琐运维,模型、提示词、工具由你掌控,容器、扩缩容、监控、灰度等全由平台自动托管。支持快速创建、代码部署、工作流编排等5种模式,开箱即用生产级能力。(239字)
|
12月前
|
存储 弹性计算 安全
阿里云渠道商:阿里云镜像服务器怎么收费?
阿里云镜像服务提供镜像全生命周期管理,支持ECS实例快速部署。采用存储与流量分层计费,含基础、标准、企业三版本。合理选择版本、优化存储与流量可有效降本增效。
|
7月前
|
运维 安全 API
网络安防实战:如何用IP查询工具精准定位风险IP?
本文基于对200+真实攻击案例的分析,总结出风险IP的5种典型特征,并提出一套基于IP查询工具的自动化识别方案。实测数据显示,该方案可将告警误报率降低40%以上,将单次IP研判时间从分钟级压缩到秒级。
|
7月前
|
人工智能 JSON API
Laravel 13 正式发布 使用 Laravel AI 无缝平滑升级
Laravel 13 正式发布!要求 PHP 8.3+,支持原生 PHP Attributes、内置 JSON:API Resources、语义向量搜索、Cache::touch()、Passkey 认证、数据库驱动 Reverb 等重磅特性,并推出 Laravel AI SDK 与 AI 辅助升级工具 Laravel Boost。(239字)
602 0
|
监控 数据可视化 物联网
点晴PMS:港口码头管理的智能引擎,驱动效率革命
在全球贸易蓬勃发展的今天,港口码头作为连接世界的枢纽,正面临着效率提升和成本优化的双重挑战。点晴PMS港口码头管理系统,凭借其强大的核心功能和创新的管理理念,为港口码头企业提供了一站式解决方案,开启智慧运营的新篇章。
474 7
|
数据可视化 数据挖掘 API
5 款热门的表单设计器推荐
5 款热门的表单设计器推荐
|
机器学习/深度学习 自然语言处理 图形学
CVPR 2024:文本一键转3D数字人骨骼动画,阿尔伯塔大学提出MoMask框架
【5月更文挑战第12天】CVPR 2024将展出阿尔伯塔大学的MoMask框架,该框架创新性地将文本转化为3D数字人骨骼动画,推动计算机图形学和动画制作的发展。MoMask结合NLP和计算机视觉,由文本编码器解析输入文本,动作生成器则将其转化为骨骼动画。该技术提升动画制作效率,降低门槛,但面临训练数据需求大和生成动画可能有偏差的挑战。[论文链接](https://arxiv.org/abs/2312.00063)
719 2