Js實用小技巧

Js實用小技巧

這是一份Js實用小技巧，也能夠是一份Js捱打小技巧，下面的一系列操做雖然可以在必定程度上使代碼更加簡潔，可是在缺乏註釋的狀況下會下降可讀性，因此須要謹慎使用這些黑魔法。

位元算

取整

console.log(~~(11.11));     // 11
console.log(11.11 >> 0);    // 11
console.log(11.11 << 0);    // 11
console.log(11.11 | 0);     // 11
console.log(11.11 >>> 0);   // 11 // 注意 >>> 不可對負數取整

判斷奇偶

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

轉換布爾值

console.log(!!7);               // true
console.log(!!0);               // false
console.log(!!-1);              // true
console.log(!!0.71);            // true
console.log(!!"");              // false
console.log(!![]);              // true
console.log(!!{});              // true
console.log(!!null);            // false
console.log(!!undefined);       // false

移位運算

console.log(16 >> 1);      // 8
console.log(16 << 2);      // 64
console.log(1 >>> 1);      // 2

進行值交換

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

// 也能夠藉助數組
b = [a, a = b][0];

// 固然解構賦值更簡單
[a, b] = [b, a];

判斷符號是否相同

let a = 1;
let b = 1;
console.log((a ^ b) >= 0);    // true
console.log((a ^ -b) >= 0);   // false

檢查數字是否不相等

let a = 111;
if(a ^ 111) console.log("Not equal");
if(a !== 111) console.log("Not equal");
if(a ^ 11111) console.log("Not equal"); // Not equal

判斷是否2的整數冪

const check = n => !(n & (n - 1));
console.log(check(7)); // false
console.log(check(8)); // true

條件語句

let bool = true;
if(bool) console.log(1); // 1
console.log(bool && console.log(1)); // 1

四捨五入取整

const round = n => n + 0.5 * (n > 0 ? 1 : -1) | 0;
console.log(round(0));     // 0
console.log(round(1.1));   // 1
console.log(round(1.6));   // 2
console.log(round(-1.1));  // -1
console.log(round(-1.6));  // -2

字符串

取隨機字符串

console.log(Math.random().toString(16).slice(2)); // c21f331e6ce2b

重複字符串

const repeat = (n, str) => Array(n+1).join(str);
console.log(repeat(5, "ab")); // ababababab
console.log("ab".repeat(5));  // ababababab // ES6

建立連接

console.log("Google".link("www.google.com")); // <a href="www.google.com">Google</a>

其餘

正確處理異常的方法

try {
    // something
} catch (e) {
    window.location.href = "http://stackoverflow.com/search?q=[js]+" +  e.message;
}

優雅地證實本身NB

console.log(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]);

能夠替代undefined的操做

console.log(void 0);   // undefined
console.log(""._);     // undefined
console.log(1.._);     // undefined
console.log(0[0]);     // undefined

替代Infinity

console.log([-1/0, 1/0]); // [-Infinity, Infinity]

清空數組

let arr = [1];
arr.length = 0;
console.log(arr); // []

快速判斷IE8如下的瀏覽器

var isIE8 = !+"1";
console.log(isIE8); // false // Chrome 87

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://zhuanlan.zhihu.com/p/150556186
https://zhuanlan.zhihu.com/p/262533240
https://github.com/jed/140bytes/wiki/Byte-saving-techniques