JavaScript 中的“黑话”，你知多少？

点击上方“IT平头哥联盟”，选择“置顶或者星标”

你的关注意义重大！

作者：vv13

https://segmentfault.com/a/1190000016595592

因为球是圆的，所以不论发生什么都有可能，对这点我是深信不疑的，但最近我总是在怀疑，JavaScript也是圆的！

什么是“黑话”

黑话，本指旧时江湖帮会人物的暗语、暗号，往往见于小说，后指流行于某一特殊行业中，非局外人所能了解的语言。而本文涉及到的“黑话”，其实是一些利用语言的特征使用的一些不常见的奇淫技巧，JavaScript的语法是十分简单灵活的，在项目中建议大家遵从ESLint规范编写可维护性的代码，各路神仙们也应该进行自我约束，毕竟“黑话”也并不全是什么好的东西，如果很多话可以直接讲，何必拐弯抹角的去说呢？

“算术”

算术中的位运算已被作者列为禁术，因此希望你在工程中使用位运算时，请确保你有充足的理由使用，并在需要时写好Hack注释。

!与!!

!为逻辑非操作符，可以应用于ECMAScript中的任何值，无论这个值是什么类型，它会被强制转化为一个布尔值变量，再对其值取反。

!!只是单纯的将操作数执行两次逻辑非，它能将任意类型的值转化为相应的布尔值，它包含的步骤为：

• 将一个值转化为布尔值；
• 将其取反；
• 再次取反。

假设你需要通过一个布尔型变量表示是否有id值，以下写法推荐你使用最后一种方式来进行转化：

1. const enable1 = !!id；
2. const enable2 = id ? true: false;
3. const enable3 = Boolean(id);

~ 与 ~~

~表示按位取反，~5的运行步骤为：

• 转为一个字节的二进制表示：00000101，
• 按位取反：11111010
• 取其反码：10000101
• 取其补码：10000110
• 转化为十进制：-6

至于原码、反码、补码原理请看原理篇。

~~它代表双非按位取反运算符，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意，对于正数，它向下取整；对于负数，向上取整；非数字取值为0，它具体的表现形式为：

1. ~~null; // => 0
2. ~~undefined; // => 0
3. ~~Infinity; // => 0
4. --NaN; // => 0
5. ~~0; // => 0
6. ~~{}; // => 0
7. ~~[]; // => 0
8. ~~(1/0); // => 0
9. ~~false; // => 0
10. ~~true; // => 1
11. ~~1.9; // => 1
12. ~~-1.9; // => -1

+

在变量值前使用+的本意是将变量转换为数字，在一个函数接受数字类型的参数时特别有用：

1. +'1'// 1
2. +'-1'// '-1
3. +[] // 0
4. +{} // NaN

根据观察，+a与a * 1结果类似。除此之外，使用+也可以作为立即执行函数：+function() {}()，等效于(function(){})()。

字符串与数字相加时会将数值默认转为字符串，因此有了一下将数字转为字符串的快捷方法：'' + 1。

& 与 &&

如何你是从类C语言过来的话，请抛弃之前的刻板印象：&可以充当逻辑操作符号。在JavaScript中，&只能进行位运算。

&，它表示按位与，此运算符需要两个数字并返回一个数字。如果它们不是数字，则会转换为数字。如果执行7 & 3， 则会经过以下步骤：

• 先转换为2进制：111 & 11
• 比较结果为：011
• 将二进制转回十进制，因此：7 & 3 = 3

它也可用于基偶数判断：const isOdd = num => !!(num & 1);

&&，表示逻辑与，通常用于if条件判断，可跟你想象的不太一样，&&并不是单纯的返回true或者false，而是依据：

• 若第一个表达式为false，则返回第一个表达式；
• 若第一个表达式为true，返回第二个表达式。

在这里举几个例子：

1. 0&& false0(both are false-y, but 0is the first)
2. true&& falsefalse(second one isfalse-y)
3. true&& truetrue(both are true-y)
4. true&& 2020(both are true-y)

&&可以连接多个操作符，如：a && b && c && d，返回值的规则与上面一样。除此以外，它还经常被作为短路逻辑使用：若前面表达式不是truthy，则不会继续执行之后的表达式。如在取一个对象的属性，我们需要先判断是否为空才能进行取值，否则会抛出Uncaught TypeError，这种情况下一般我们也会通过逻辑或，给与表达式一个默认值：

1. const value = obj && obj.value || false

当JavaScript压缩工具遇到if判断时，也会使用&&短路逻辑从而节省内存空间：

1. // before
2. if(test) { alert('hello') }
3. // after
4. test && alert('hello')

| 与 ||

它们与&和&&使用方法很相似，不同的是它们表示的是逻辑或，因此使用|会进行按位或运算，而||会返回第一个Truthy值。

使用||进行默认值赋值在JavaScript中十分常见，这样可以省略很多不必要的if语句，比如：

1. // before
2. let res;
3. if(a) {
4. res = a;
5. } elseif(b) {
6. res = b;
7. } elseif(c) {
8. res = c;
9. } else{
10. res = 1;
11. }
12. // after
13. const res = a || b || c || 1;

== 与 ===

==为相等运算符，操作符会先将左右两边的操作数强制转型，转换为相同的操作数，再进行相等性比较。

===为全等运算符，它除了在比较时不会将操作数强制转型，其余相等判断与==一致。

简单而言， ==用于判断值是否相等， ===判断值与类型是否都相等，因此使用全等运算符判断操作数会更准确，新手也在学习JavaScript接收到的前几条Tips就是避免使用相等运算符，真的是这样吗？没错，这样能确保在你不彻底熟悉语言的情况下，尽可能的去避免犯错，但是我们也应该清楚在哪些情况下应该使用相等运算符，规则往往只针对于新手，而对聪明的你来说，最重要的是要清楚自己在做什么。

相等操作符对于不同类型的值，进行的比较如下图所示：

针对于undefined与null：undefined与null互等，与其余任意对象都不相等，因此在某些lib里，你可能会看到如下写法：

1. if(VAR == undefined) {}
2. if(VAR == null) {}

它等效于：

1. if(VAR === undefined|| VAR === null) {}

对于 '', false, 0而言，他们都属于Falsy类型，通过Boolean对象都会转换为假值，而通过==判断三者的关系，他们总是相等的，因为在比较值时它们会因为类型不同而都被转换为false值：

1. console.log((false== 0) && (0== '') && (''== false)) // true

或者有时候我们希望利用强转特性比较字符串与数字：

1. console.log(11== '11') // true
2. console.log(11=== '11') // false

^

按位异或运算符，对比每一个比特位，当比特位不相同时则返回1，否则返回0。很少人在Web开发中使用此运算符吧，除了传说中的一种场景：交换值。

若要交换a与b的值，如果可以的话推荐你使用：

1. [a, b] = [b, a];

或者新建一个c，用于存储临时变量，如果你遇到有人这样书写：

1. // 异或运算，相同位取0，不同位取1，a ^ b ^ b = a， a ^ a ^ b = b
2. a = a ^ b
3. b = a ^ b
4. a = a ^ b

这样通过异或运算进行交换两个数字型变量，请原谅他并忽视它，他只可能是一个醉心于魔法的初心者，并祝愿他早日发现，简洁易读的函数才是最佳实践。

数值表示法

3e9

科学计数法是一种数学术语，将一个数表示为a乘以10的n次方，如光速30万公里每秒，在计算中通常将米做单位，则记为：300000000m/s，而在JavaScript中我们可使用科学计数法 3e9表示。

在这里举几个科学计数法的示例：

1. 1e5; // 100000
2. 2e-4; // 0.0002
3. -3e3; // -3000

Number对象有toExponential(fractionDigits)方法以科学计数法返回该数值的字符串表示形式，参数fractionDigits可选，用于用来指定小数点后有几位数字，例如：(179000).toExponential(); // "1.79e+5"。

以下情况JavaScript会自动将数值转为科学计数法表示：

• 小数点前的数字多于21位。
• 小数点后的零多于5个。

.5px

通常某些人习惯省略0.开头的数字，常见于数值计算、css属性中，比如0.5px可直接写为.5px，0.2 * 0.3可写为：.2 * .3

0x、0o和0b

在十进制的世界里呆久了，请不要忘记还有其他进制的存在，在计算机中它们是同地位的。JavaScript提供了以下进制的表示方法：

• 二进制：只用0和1两个数字，前缀为0b，十进制13可表示为0b1101
• 八进制：只用0到7八个数字，前缀为0o、0，十进制13可表示为0o15、015
• 十六进制：只用0到9的十个数字，和a到f六个字母，前缀为0x，十进制13可表示为0xd

默认情况下，JavaScript 内部会自动将八进制、十六进制、二进制转为十进制再进行运算。从十进制转其他进制请查阅toString方法，从其他进制转十进制请查阅parseInt方法，从其他进制转其他进制请先转为十进制再转为其他方法。

“话术”

Array.prototype.sort

Array.prototype.sort()默认根据字符串的Unicode编码进行排序，具体算法取决于实现的浏览器，在v8引擎中，若数组长度小于10则使用从插入排序，大于10使用的是快排。

而sort支持传入一个compareFunction(a, b)的参数，其中a、b为数组中进行比较的两个非空对象(所有空对象将会排在数组的最后)，具体比较规则为：

• 返回值小于0，a排在b的左边
• 返回值等于0，a和b的位置不变
• 返回值大于0，a排在b的右边

因此利用sort即可写一个打乱数组的方法：

1. [1,2,3,4].sort(() => .5- Math.random())

但是以上的实现并不是完全随机的，究其原因，还是因为排序算法的不稳定性，导致一些元素没有机会进行比较，具体请参考问题，在抽奖程序中若要实现完全随机，请使用 Fisher–Yates shuffle 算法，以下是简单实现：

1. function shuffle(arrs) {
2. for(let i = arrs.length - 1; i > 0; i -= 1) {
3. const random = Math.floor(Math.random() * (i + 1));
4. [arrs[random], arrs[i]] = [arrs[i], arrs[random]];
5. }
6. }

Array.prototype.concat.apply

apply接收数组类型的参数来调用函数，而concat接收字符串或数组的多个参数，因此可使用此技巧将二维数组直接展平：

1. Array.prototype.concat.apply([], [1, [2,3], [4]])

而通过此方法也可以写一个深层次遍历的方法：

1. function flattenDeep(arrs) {
2. let result = Array.prototype.concat.apply([], arrs);
3. while(result.some(item => item instanceofArray)) {
4. result = Array.prototype.concat.apply([], result);
5. }
6. return result;
7. }

经过测试，效率与lodash对比如下：

对上述方法中的Array.prototype.concat.apply([], target)亦可以写成：[].concat(...target)。

Array.prototype.push.apply

在es5中，若想要对数组进行拼接操作，我们习惯于使用数组中的concat方法：

1. let arrs = [1, 2, 3];
2. arrs = arrs.concat([4,5,6]);

但还有酷的方法，利用apply方法的数组传参特性，可以更简洁的执行拼接操作：

1. const arrs = [1, 2, 3];
2. arrs.push.apply(arrs, [4, 5, 6]);

Array.prototype.length

它通常用于返回数组的长度，但是也是一个包含有复杂行为的属性，首先需要说明的是，它并不是用于统计数组中元素的数量，而是代表数组中最高索引的值：

1. const arrs = [];
2. arrs[5] = 1;
3. console.log(arrs.length); // 6

另外，length长度随着数组的变化而变化，但是这种变化仅限于：子元素最高索引值的变化，假如使用delete方法删除最高元素，length是不会变化的，因为最高索引值也没变：

1. const arrs = [1, 2, 3];
2. delete arrs[2]; // 长度依然为3

length还有一个重要的特性，那就是允许你修改它的值，若修改值小于数组本身的最大索引，则会对数组进行部分截取：

1. const arrs = [1, 2, 3, 4];
2. arrs.length = 2; // arrs = [1, 2]
3. arrs.length = 0; // arrs = []

若赋予的值大于当前最大索引，则会得到一个稀疏数组：

1. const arrs = [1, 2];
2. arrs.length = 5; // arrs = [1, 2,,,,]

若将值赋为0，则执行了清空数组的操作:

1. const arrs = [1, 2, 3, 4];
2. arrs.length = 0; // arrs = []

使用此方法会将数组中的所有索引都删除掉，因此也会影响其他引用此数组的值，这点跟使用arrs = []有很大的区别：

1. let a = [1,2,3];
2. let b = [1,2,3];
3. let a1 = a;
4. let b1 = b;
5. a = [];
6. b.length = 0;
7. console.log(a, b, a1, b1); // [], [], [1, 2, 3], []

在对length进行修改的时候，还需要注意：

• 值需要为正整数
• 传递字符串会被尝试转为数字类型

Object.prototype.toString.call

每个对象都有一个toString()，用于将对象以字符串方式引用时自动调用，如果此方法未被覆盖，toString则会返回[object type]，因此Object.prototype.toString.call只是为了调用原生对象上未被覆盖的方法，call将作用域指向需要判断的对象，这样一来就可以通过原生的toString方法打印对象的类型字符串：Object.prototype.toString.call([]) => "[object Array]" ，利用这个特性，可以较为精确的实现类型判断。

在ES3中，获取到的type为内部属性[[Class]]属性，它可以用来判断一个原生属性属于哪一种内置的值；在ES5中新增了两条规则：若this值为null、undefined分别返回：[object Null]、[object Undefined]；在ES6中不存在[[Class]]了，取而代之的是一种内部属性：[[NativeBrand]]，它是一种标记值，用于区分原生对象的属性，具体的判断规则为：

1. 19.1.3.6Object.prototype.toString ( )
2. When the toString method is called, the following steps are taken:
3. If the this value isundefined, return"[object Undefined]".
4. If the this value isnull, return"[object Null]".
5. Let O be ! ToObject(this value).
6. Let isArray be ? IsArray(O).
7. If isArray istrue, let builtinTag be "Array".
8. Elseif O is a String exotic object, let builtinTag be "String".
9. Elseif O has a [[ParameterMap]] internal slot, let builtinTag be "Arguments".
10. Elseif O has a [[Call]] internal method, let builtinTag be "Function".
11. Elseif O has an [[ErrorData]] internal slot, let builtinTag be "Error".
12. Elseif O has a [[BooleanData]] internal slot, let builtinTag be "Boolean".
13. Elseif O has a [[NumberData]] internal slot, let builtinTag be "Number".
14. Elseif O has a [[DateValue]] internal slot, let builtinTag be "Date".
15. Elseif O has a [[RegExpMatcher]] internal slot, let builtinTag be "RegExp".
16. Else, let builtinTag be "Object".
17. Let tag be ? Get(O, @@toStringTag).
18. IfType(tag) isnotString, set tag to builtinTag.
19. Return the string-concatenation of "[object ", tag, and"]".
20. Thisfunctionis the %ObjProto_toString% intrinsic object.
21. NOTE
22. Historically, thisfunction was occasionally used to access the String value of the [[Class]] internal slot that was used in previous editions of this specification as a nominal type tag for various built-in objects. The above definition of toString preserves compatibility for legacy code that uses toString as a test for those specific kinds of built-in objects. It does not provide a reliable type testing mechanism for other kinds of built-inor program defined objects. In addition, programs can use@@toStringTagin ways that will invalidate the reliability of such legacy type tests.

Object.create(null)

用于创建无“副作用”的对象，也就是说，它创建的是一个空对象，不包含原型链与其他属性。若使用const map = {}创建出来的对象相当于Object.create(Object.prototype)，它继承了对象的原型链。

JSON.parse(JSON.stringify(Obj))

很常用的一种深拷贝对象的方式，将对象进行JSON字符串格式化再进行解析，即可获得一个新的对象，要注意它的性能不是特别好，而且无法处理闭环的引用，比如：

1. const obj = {a: 1};
2. obj.b = obj;
3. JSON.parse(JSON.stringify(obj)) // Uncaught TypeError: Converting circular structure to JSON

这样通过JSON解析的方式其实性能并不高，若对象可通过浅拷贝复制请一定使用浅拷贝的方式，不管你使用{...obj}还是Object.assign({}, obj)的方式，而如果对性能有要求的情况下，请不要再造轮子了，直接使用npm:clone这个包或是别的吧。

“理论”

Truthy与Falsy

对每一个类型的值来讲，它每一个对象都有一个布尔型的值，Falsy表示在Boolean对象中表现为false的值，在条件判断与循环中，JavaScript会将任意类型强制转化为Boolean对象。以下这些对象在遇到if语句时都表现为Falsy：

1. if(false)
2. if(null)
3. if(undefined)
4. if(0)
5. if(NaN)
6. if('')
7. if("")
8. if(document.all)

document.all属于历史遗留原因，所以为false，它违背了JavaScript的规范，可以不管它，而NaN这个变量，千万不要用全等或相等对其进行判断，因为它发起疯来连自己都打：

1. console.log(NaN=== 0) // false
2. console.log(NaN=== NaN) // false
3. console.log(NaN== NaN) // false

但是我们可以使用Object.is方法进行判断值是否为NaN，它是ES6新加入的语法，用于比较两个值是否相同，它可以视为比全等判断符更为严格的判断方法，但是不可混为一谈：

1. Object.is(NaN, NaN) // true
2. Object.is(+0, -0) // false

而除了Falsy值，所有值都是Truthy值，在Boolean上下文中表现为true。

原码, 反码, 补码

在JavaScript进行位运算时，采用32位有符号整型，即数字5有以下表示方式：

• 原码：00000000 00000000 00000000 00000101
• 反码：00000000 00000000 00000000 00000101
• 补码：00000000 00000000 00000000 00000101

而数字-5的表示方式为：

• 原码：10000000 00000000 00000000 00000101
• 反码：11111111 11111111 11111111 11111010
• 补码：11111111 11111111 11111111 11111011

综上所述，有以下规律：

• 正数的原码、反码、补码都是它本身
• 负数的反码：在其原码的基础上, 符号位不变，其余各个位取反
• 负数的补码：负数的反码 + 1

那么它们到底有什么用呢？其实位运算就是用计算机底层电路所有运算的基础，为了让计算机的运算更加简单，而不用去辨别符号位，所有值都采用加法运算，因此，人们设计了原码，通过符号位来标识数字的正负：

1. 1= 00000001
2. -1= 10000001

假如计算机要对两个数相加：1 + (-1)，使用原码相加的运算结果为：10000010，很明显-2并不是我们想要的结果，因此出现了反码，若使用反码进行运算会有什么结果呢，让我们来看一下：

1. 1[反码] + (-1)[反码] = 00000001+ 11111110= 11111111[反码] = 10000000[原码]

此时运算结果是正确的，可是这样还存在一个问题，有两个值可以表示0：1000 0000、0000 0000，对于计算机来说，0带符号是没有任何意义的，人们为了优化0的存在，设计出了补码：

1. 1[补码] + (-1)[补码] = 00000001+ 11111111= 00000000[原码]

这样一来，-0的问题就可以解决了。

参考资料

https://modernweb.com/45-useful-javascript-tips-tricks-and-best-practices/ https://dmitripavlutin.com/the-magic-behind-array-length-property/ https://medium.freecodecamp.org/9-neat-javascript-tricks-e2742f2735c3 https://stackoverflow.com/questions/7310109/whats-the-difference-between-and-in-javascript http://javascript.ruanyifeng.com/grammar/number.html

-  end  -

❤️ 看完两件事

如果你觉得这篇内容对你有所帮助，我想邀请你帮我两个小忙：

1. 点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
2. 关注公众号「IT平头哥联盟」，一起进步，一起成长！

推荐阅读：