昨天写了这些骚代码,今天上班差点被同事揍了

Souleigh ✨ 等级 729 0 0

昨天写了这些骚代码,今天上班差点被同事揍了

前端开发

微信号 qianduan1024

功能介绍 专注于Web前端技术文章分享,包含JavaScript、HTML5、CSS3等前端基础知识,以及Vue.js,React,Augular等前端框架

收录于话题

来自:掘金,作者:布拉德特皮

链接:https://juejin.cn/post/6844904032146817038

前言

曾经,我接手了一份大佬的代码,里面充满了各种“骚操作”,还不加注释那种,短短几行的函数花了很久才弄懂。

这世上,“只有魔法才能对抗魔法”,于是后来,翻阅各种“黑魔法”的秘籍,总结了一些比较实用的“骚操作”,让我们装X的同时,提升代码运行的效率(请配合健身房一起使用)。

正文

位运算

JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3,因为精度的问题,导致所有的浮点运算都是不安全的,具体原因可详见《0.1 + 0.2不等于0.3?为什么JavaScript有这种“骚”操作?》。

因此,之前有大牛提出,不要在 JS 中使用位运算:

Javascript 完全套用了 Java 的位运算符,包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。这套运算符针对的是整数,所以对 JavaScript 完全无用,因为 JavaScript 内部,所有数字都保存为双精度浮点数。如果使用它们的话,JavaScript 不得不将运算数先转为整数,然后再进行运算,这样就降低了速度。而且"按位与运算符"&同"逻辑与运算符"&&,很容易混淆。

但是在我看来,如果对 JS 的运用达到炉火纯青的地步,能避开各种“Feature”的话,偶尔用一下位运算符也无所谓,还能提升运算性能,毕竟直接操作的是计算机最熟悉的二进制。

位运算的原理可以参考这篇文章 《位运算符在JS中的妙用》

1. 使用左移运算符 << 迅速得出2的次方

1 << 2  // 4, 即 2的2次方  
1 << 10 // 1024, 即 2的10次方  

// 但是要注意使用场景  
a = 2e9;   // 2000000000  
a << 1;    // -294967296  

2. 使用 ^ 切换变量 0 或 1

// --- before ---  
// if 判断  
if (toggle) {  
    toggle = 0;  
} else {  
    toggle = 1;  
}  
// 三目运算符  
togle = toggle ? 0 : 1;  

// --- after ---  
toggle ^= 1;  

3. 使用 & 判断奇偶性

偶数 & 1 = 0
奇数 & 1 = 1

console.log(7 & 1);    // 1  
console.log(8 & 1) ;   // 0  

4. 使用 !! 将数字转为布尔值

所有非0的值都是true,包括负数、浮点数:

console.log(!!7);       // true  
console.log(!!0);       // false  
console.log(!!-1);      // true  
console.log(!!0.71);    // true  

5. 使用~>><<>>>|来取整

相当于使用了 Math.floor()

console.log(~~11.71)     // 11  
console.log(11.71 >> 0)  // 11  
console.log(11.71 << 0)  // 11  
console.log(11.71 | 0)   // 11  
console.log(11.71 >>> 0) // 11  

注意 >>> 不可对负数取整

6. 使用^来完成值交换

这个符号的用法前面提到过,下面介绍一些高级的用法,在 ES6 的解构赋值出来之前,用这种方式会更快(但必须是整数):

// --- before ---  
let temp = a; a = b; b = temp; // 传统,但需要借助临时变量  
b = [a, a = b][0] // 借助数组  

// --- after ---  
let a = 7  
let b = 1  
a ^= b  
b ^= a  
a ^= b  
console.log(a)   // 1  
console.log(b)   // 7  

[a, b] = [b, a]; // ES6,解构赋值  

7. 使用^判断符号是否相同

(a ^ b) >= 0; //  true 相同; false 不相同 

8. 使用^来检查数字是否不相等

// --- before ---  
if (a !== 1171) {...};  

// --- after ---  
if (a ^ 1171) {...};

9. n & (n - 1),如果为 0,说明 n 是 2 的整数幂

10. 使用 A + 0.5 | 0 来替代 Math.round()

如果是负数,只需要-0.5

String

1. 使用toString(16)取随机字符串

Math.random().toString(16).substring(2, 15);  

.substring() 的第二个参数控制取多少位 (最多可取13位)

2. 使用 split(0)

使用数字来做为 split 的分隔条件可以节省2字节

// --- before ---  
"alpha,bravo,charlie".split(",");  

// --- after ---  
"alpha0bravo0charlie".split(0);  

一个鲜为人知的方法,可以快速创建 a 标签

// --- before ---  
let b = `<a herf="www.google.com">google</a>`;  

// --- after ---  
let b = 'google'.link('www.google.com');  

3. 使用 Array 来重复字符

// --- before ---  
for (let a = "", i = 7; i--;) a+= 0;  

// --- after ---  
let b = Array(7).join(0); // "000000"  
let c = Array(7).join('La') // "LaLaLaLaLaLa"  

// ES6  
let d = "0".repeat(7); // "0000000"  

其他一些花里胡哨的操作

1. 使用当前时间创建一个随机数

// --- before ---  
let b = 0 | Math.random() * 100  

// --- after ---  
let a;  
a = new Date % 100; // 两位随机数  
a = new Date % 1000; // 三位随机数  
a = new Date % 10000; // 四位随机数...依次类推  
// 不要在快速循环中使用,因为毫秒可能没有变化;  

2. 一些可以替代 undefined 的操作

  1. ""._, 1.._0[0]
  1. void 0 会比写 undefined 要快一些
let d = void 0;  
console.log(d); // undefined  

3. 使用 1/0 来替代 Infinity

// --- before ---  
[Infinity, -Infinity]  

// --- after ---  
[1/0, -1/0]  

4. 使用 Array.length = 0 来清空数组

5. 使用 Array.slice(0) 实现数组浅拷贝

6. 使用 !+"\v1" 快速判断 IE8 以下的浏览器

7. for 循环条件的简写

// --- before ---  
for(let i = 0; i < arr.length; i++) {...}  

// --- after ---  
for(let i = arr.length; i--;) {...} // 注意 i-- 后面的分号别漏了  

结尾

虽然上述操作能在一定程度上使代码更简洁,但会降低可读性。在目前的大环境下,机器的性能损失远比不上人力的损失,因为升级机器配置的成本远低于维护晦涩代码的成本,所以请谨慎使用这些“黑魔法”。就算要使用,也请加上注释,毕竟,这世上还有很多“麻瓜”需要生存。

还有一些其他骚操作,可以参考这位大神总结的 《Byte-saving Techniques》,有些很常见,有些使用环境苛刻,这里就不一一列出了。

最后,来一个彩蛋,在控制台输入:

(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]  

如果以后有人喷你的代码,你就可以将此代码发给他。

收藏
评论区

相关推荐

昨天写了这些骚代码,今天上班差点被同事揍了
昨天写了这些骚代码,今天上班差点被同事揍了 前端开发 微信号 qianduan1024 功能介绍 专注于Web前端技术文章分享,包含JavaScript、HTML5、CSS3等前端基础知识,以及Vue.js,React,Augular等前端框架 收录于话题 来自:掘金,作者:布拉德特皮 链接:h
别去送死了。Selenium 与 Puppeteer 能被网站探测的几十个特征
摄影:产品经理味道很好的毛血旺 很多人喜欢使用Selenium 或者 Puppeteer(Pyppeteer)通过模拟浏览器来编写爬虫,自以为这样可以不被网站检测到,想爬什么数据就爬什么数据。 但实际上,Selenium 启动的浏览器,有几十个特征可以被网站通过 JavaScript 探测到。Puppeteer 启动的浏览器,也有很多特征能够被网站探测。
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
JS中那些鲜为人知的骚操作
前言 -- 曾经,我接手了一份大佬的代码,里面充满了各种“骚操作”,还不加注释那种,短短几行的函数花了很久才弄懂。![](https://oscimg.oschina.net/oscnet/1849cc3b16479486464799b24f7e6573185.jpg)这世上,“只有魔法才能对抗魔法”,于是后来,翻阅各种“黑魔法”的秘籍,总结了一些比较实用
Java scirpt 简介
### javascript简介:   JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 ### 基本特点:   JavaScri
Java8的这些集合骚操作,你掌握了嘛?
Java8时Lambda表达式的出现,将行为作为参数传递进函数的函数式编程,大大简化了之前冗杂的写法。 对于集合一类,我们来整理一下发生的变化吧。 ![Java8的这些集合骚操作,你掌握了嘛?](https://p6-tt.byteimg.com/origin/dfic-imagehandler/e5ad919f-e84f-4ae7-b7c8-395f5
jabdp之编写javascript(一)
### **1、****概述** Jabdp以“写小量的代码,实现复杂的功能”为宗旨,将大量通用的代码进行抽取封装,减少了开发中80%的代码量。 jabdp因为考虑到javascript是世界上使用人数最多的编程语言,而且javascript的简单易学,所以把javascript作为本平台的编程语言。使用jabdp平台的人需要有一定的javascript
jabdp之编写javascript(二)
### **5、****字段的事件编辑** 在申购单的第二行里是填写供应商的信息,要是每次都一个一个的填会很慢,我们可以先在【基础信息】的【供应商信息】模块里先填写好。然后通过js代码,实现一选供应商名称,其他的联系人、手机号码、地址全部都跳出来。 #### **步骤一:准备好供应商信息** 现在基础信息菜单下建好【供应商信息】模块,然后【供应商信息】
CRLF在过滤XSS语句后打Cookie方式
     看了很长时间的漏洞奖励计划,学到了不少骚姿势,我觉得这个姿势很不错,总结下写篇文章发出来。针对CRLF漏洞打cookie的方法。      这里不讲概念挖掘方式了,以实战为主:           阅读文章前先参考文章:http://www.ruanyifeng.com/blog/2016/04/cors.html           这篇文
JavaScript 代码是如何被 Babel 编译的
![](https://oscimg.oschina.net/oscnet/d47ca52f7cbdb3b7b5f9664f4e956e1a6cb.png) 前言 -- 本文写于 2019 年,如有不对之处欢迎指出。 `Babel` 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。 已经 9102 年了,我们已经能够熟练地使用 `
JavaScript在物联网中的应用
> 凡是能用JavaScript写出来的,最终都会用JavaScript写出来。 —— Atwood定律 在那篇《[最流行的编程语言JavaScript能做什么?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMjM5Mjg
JavaScript的入门简介
#### 什么是 JavaScript JavaScript,我们一般简称为 JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。 JavaScript 现在已经被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并支持面向对象、命令式和声明式风格。 HTML、CSS、JavaScript三者不同的功能:
JavaScript编码规范
1 前言 ---- JavaScript 在百度一直有着广泛的应用,特别是在浏览器端的行为管理。本文档的目标是使 JavaScript 代码风格保持一致,容易被理解和被维护。 虽然本文档是针对 JavaScript 设计的,但是在使用各种 JavaScript 的预编译语言时(如 TypeScript 等)时,适用的部分也应尽量遵循本文档的约定。 2
JavaScript(js)字面量,函数写法
**JavaScript 字面量** 在编程语言中,一般固定值称为字面量,如 3.14。 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。 3.14 1001 123e5 字符串(String)字面量 可以使用单引号或双引号: "John Doe" 'John Doe' 表达式字面量 用于计算:
PHP的cookie与Javascript的cookie的关系
PHP 读写cookie的语句: setcookie("user", "Lilu", time()+3600); echo $_COOKIE["user"]; javascript读写cookie代码: function SetCookie(name,value)//两个参数,一个是cookie的名子,一