JS-编程黑科技，开发技巧，高逼格代码

1.如何装逼用代码骂别人SB

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

2.如何用代码优雅的证明自己NB

([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]

3.另外一种 undefined   void后面跟任何变量都会返回undefined

var data = void 0; // undefined

4.论如何优雅的向下取整

var a = ~~2.33 //这种方法还可以将字符串转换成数字类型
var b= 2.33 | 0
var c= 2.33 >> 0

5.如何优雅的实现金钱格式化：1234567890 –> 1,234,567,890

var test1 = '1234567890'
var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

console.log(format) // 1,234,567,890

非正则的优雅实现：

 function formatCash(str) {
       return str.split('').reverse().reduce((prev, next, index) => {
            return ((index % 3) ? next : (next + ',')) + prev
       })
}
console.log(formatCash('1234567890')) // 1,234,567,890

6.打乱一个数字数组的顺序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */

7.保留指定位数的小数点 toFixed

var num = 2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432

注意， toFixed() 方法返回的是字符串而不是一个数字。

8.有些网站为了不让用户复制，设置了div禁止选择的功能，设置如下属性

unselectable="on" onselectstart="return false;"

具体代码：

<div class="box" unselectable="on" onselectstart="return false;">
   muzidigbig
</div>

9.数字运算符和字符串拼接'+'

当表达式中出现字符串，就是字符串拼接，否则就是数字运算。(通常)

1 + true >= 2;//true
1 + 'true' >= '1true';//true

但是，[66] + 10的结果是什么？

[66] + 10;//'6610'
10 + [66];//"1066"

从上面可知引用类型会转换为字符串，如：

[{}] + 10;//"[object Object]10"
({}) + 88;//"[object Object]88"

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

返回值为 number类型

~~null;      // => 0
~~undefined; // => 0
~~Infinity;  // => 0
--NaN;       // => 0
~~0;         // => 0
~~{};        // => 0
~~[];        // => 0
~~(1/0);     // => 0
~~false;     // => 0
~~true;      // => 1
~~1.9;       // => 1
~~-1.9;      // => -1
~~ '22.454'  // => 22

11.  | 的用法，通常用来取整(字符串类型的纯数字也可)

1.2|0  // 1
1.8|0 // 1
-1.2|0 // -1

12. >>通常用来取整(字符串类型的纯数字也可)

1.2 >> 0  // 1
1.8 >> 0 // 1
-1.2 >> 0 // -1

13. >>>通常用来正数取整(字符串类型的纯数字也可)

2.9 >>> 0  // 2

14.乘方运算： a ** b 等同于 Math.pow(a,b)

// 同 Math.pow(2, 4) = 16
const a = 2 ** 4

15.清空数组

var myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].
// 或者 myArray = []

16.使用length属性截断数组

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

与此同时，如果把length属性变大，数组的长度值变会增加，会使用undefined来作为新的元素填充。length是一个可写的属性。

myArray.length = 10; // the new array length is 10 
myArray[myArray.length - 1] ; // undefined

17.不要直接从数组中delete或remove元素

如果对数组元素直接使用delete，其实并没有删除，只是将元素置为了undefined。数组元素删除应使用splice。

切忌：

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items 结果为 [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119] */

而应：

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items 结果为 [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154, 119]

删除对象的属性时可以使用delete。

18.使用switch/case代替一大叠的if/else

当判断有超过两个分支的时候使用switch/case要更快一些，而且也更优雅，更利于代码的组织，当然，如果有超过10个分支，就不要使用switch/case了。

19.不要在循环内部使用try-catch-finally

try-catch-finally中catch部分在执行时会将异常赋给一个变量，这个变量会被构建成一个运行时作用域内的新的变量。

切忌：

var object = ['foo1', 'bar2'], i;  
for (i = 0, len = object.length; i <len; i++) {  
    try {  
        // do something that throws an exception 
    }  
    catch (e) {   
        // handle exception  
    } 
}

而应该：

var object = ['foo1', 'bar2'], i;  
try { 
    for (i = 0, len = object.length; i <len; i++) {  
        // do something that throws an exception 
    } 
} 
catch (e) {   
    // handle exception  
}

20.使用XMLHttpRequests时注意设置超时

XMLHttpRequests在执行时，当长时间没有响应（如出现网络问题等）时，应该中止掉连接，可以通过setTimeout()来完成这个工作：

var xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function () {  
    if (this.readyState == 4) {  
        clearTimeout(timeout);  
        // do something with response data 
    }  
}  
var timeout = setTimeout( function () {  
    xhr.abort(); // call error callback  
}, 60*1000 /* timeout after a minute */ ); 
xhr.open('GET', url, true);  
xhr.send();

同时需要注意的是，不要同时发起多个XMLHttpRequests请求。

21.处理WebSocket的超时

通常情况下，WebSocket连接创建后，如果30秒内没有任何活动，服务器端会对连接进行超时处理，防火墙也可以对单位周期没有活动的连接进行超时处理。

为了防止这种情况的发生，可以每隔一定时间，往服务器发送一条空的消息。可以通过下面这两个函数来实现这个需求，一个用于使连接保持活动状态，另一个专门用于结束这个状态。

var timerID = 0; 
function keepAlive() { 
    var timeout = 15000;  
    if (webSocket.readyState == webSocket.OPEN) {  
        webSocket.send('');  
    }  
    timerId = setTimeout(keepAlive, timeout);  
}  
function cancelKeepAlive() {  
    if (timerId) {  
        cancelTimeout(timerId);  
    }  
}

keepAlive()函数可以放在WebSocket连接的onOpen()方法的最后面，cancelKeepAlive()放在onClose()方法的最末尾。