文/北媽 (轉自微信：https://mp.weixin.qq.com/s/bGz3HXPCnSV5khkPqBAv7w)
閱讀本文需要 3.5分鐘
一
今天北媽來點收藏干貨，以下代碼部分來自網絡總結，我們總追求簡短有效的方式，有時候一行代碼的奇技淫巧能帶來很多代碼篇幅減少
單行簡潔的代碼很難維護（有時甚至難以理解），但這并不能阻止廣大攻城獅們腦洞，在編寫簡潔的代碼后獲得一定的滿足感。
當然有的代碼除了看起來裝逼，并沒有什么用，還增加了閱讀難度。
原文: 12 Amazing JavaScript Shorthand Techniques
1. 空(null, undefined)驗證
當我們創建了一個新的變量，我們通常會去驗證該變量的值是否為空(null)或則未定義(undefined)。這對于 JavaScript 編程來說，是一個經常要考慮到的驗證。
如果直接寫，那么像下面這樣：
if (variable1 !== null || variable1 !== undefined || variable1 !== "") {
let variable2 = variable1;
}
我們可以使用一個更加簡潔的版本：
let variable2 = variable1 || "";
如果你不信，在谷歌瀏覽器開發者面板的控制臺下試試！
2. 如何優雅的表示大數字
在 JavaScript 中，有一個簡寫數字的方法，也許你忽略了。1e7表示 10000000。
簡化前：
for (let i = 0; i < 10000; i++) {
簡化后：
for (let i = 0; i < 1e7; i++) {
3. 函數調用還可以更短
簡化前：
function x() {
console.log("x");
}
function y() {
console.log("y");
}
let z = 3;
if (z == 3) {
x();
} else {
y();
}
簡化后：
function x() {
console.log("x");
}
function y() {
console.log("y");
}
let z = 3;
(z == 3 ? x : y)();
你說四不四很短？
3.1. 另外一種undefined
var data = void 0; // undefined
4.論如何優雅的向下取整
var a = ~~2.33 //這種方法還可以將字符串轉換成數字類型var b= 2.33 | 0var c= 2.33 >> 0
5.如何裝逼用代碼罵別人SB
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
6.如何用代碼優雅的證明自己NB
([][[]]+[])[+!![]]+([]+{})[!+[]+!![]]
二 以下我最近的一些收藏javascript精簡代碼集合。它們都可以在你的開發控制臺中運行，你可以從控制臺中查看運行結果。
作者：megatron
https://juejin.im/post/5cc55eb5e51d456e577f93f0
1.日歷
創建過去七天的數組，如果將代碼中的減號換成加號，你將得到未來7天的數組集合
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
2.生成隨機ID
在原型設計時經常使用的創建ID功能。但是我在實際項目中看到有人使用它。其實這并不安全
Math.random().toString(36).substring(2);
3.獲取URL的查詢參數
這個獲取URL的查詢參數代碼，是我見過最精簡的 QAQ
?foo=bar&baz=bing => {foo: bar, baz: bing}
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;
4.本地時間
通過一堆HTML，您可以創建一個本地時間，其中包含您可以一口氣讀出的源代碼，它每秒都會用當前時間更新頁面
<body onload="setInterval(()=>document.body.innerHTML=new Date().toLocaleString().slice(10,19))"></body>
5.數組混淆
隨機更改數組元素順序，混淆數組
(arr) => arr.slice().sort(() => Math.random() - 0.5)
6.生成隨機十六進制代碼（生成隨機顏色）
使用JavaScript簡潔代碼生成隨機十六進制代碼
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');`
7.一個面試題
這是一個臭名昭著的面試題，讓你寫出他的運行結果，受不了~
for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'
8.數組去重
這是一個原生的JS函數但是非常簡潔，Set接受任何可迭代對象，如數組[1,2,3,3]，并刪除重復項
[...new Set(arr)]
9.創建特定大小的數組
方便快捷創建特定大小的數組
[...Array(3).keys()]
10.返回一個鍵盤（驚呆了）
這是一個很難看懂的簡潔代碼，但是運行后你會驚呆的，他竟然返回一個圖形鍵盤
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join``)()
這是它的打印結果：
驚呆不，不得不說有才的人真多！
