除了三目運算,你還知道其他的裝逼姿勢嗎?留言走你~~
單行簡潔的代碼很難維護(有時甚至難以理解),但這並不能阻止廣大攻城獅們腦洞,在編寫簡潔的代碼后獲得一定的滿足感。
以下我最近的一些收藏javascript
精簡代碼集合。它們都可以在你的開發控制台中運行,你可以從控制台中查看運行結果。同時,我希望你能在評論中分享一些自己的藏品!
日歷
創建過去七天的數組,如果將代碼中的減號換成加號,你將得到未來7天的數組集合
// 創建過去七天的數組
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
生成隨機ID
在原型設計時經常使用的創建ID功能。但是我在實際項目中看到有人使用它。其實這並不安全
// 生成長度為11的隨機字母數字字符串
Math.random().toString(36).substring(2);
// hg7znok52x
獲取URL的查詢參數
這個獲取URL的查詢參數代碼,是我見過最精簡的QAQ
?foo=bar&baz=bing => {foo: bar, baz: bing}
// 獲取URL的查詢參數
q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;
本地時間
通過一堆HTML,您可以創建一個本地時間,其中包含您可以一口氣讀出的源代碼,它每秒都會用當前時間更新頁面
// 創建本地時間
<body onload="setInterval(()=>document.body.innerHTML=new Date().toLocaleString().slice(10,19))"></body>
數組混淆
隨機更改數組元素順序,混淆數組
// 隨機更改數組元素順序,混淆數組
(arr) => arr.slice().sort(() => Math.random() - 0.5)
/*
let a = (arr) => arr.slice().sort(() => Math.random() - 0.5)
let b = a([1,2,3,4,5])
console.log(b)
*/
生成隨機十六進制代碼(生成隨機顏色)
使用JavaScript簡潔代碼生成隨機十六進制代碼
// 生成隨機十六進制代碼 如:'#c618b2'
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
一個面試題
這是一個臭名昭著的面試題,讓你寫出他的運行結果,受不了~
for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'
數組去重
這是一個原生的JS函數但是非常簡潔,Set接受任何可迭代對象,如數組[1,2,3,3],並刪除重復項
// 數組去重
[...new Set(arr)]
創建特定大小的數組
方便快捷創建特定大小的數組
[...Array(3).keys()]
// [0, 1, 2]
返回一個鍵盤(驚呆了)
這是一個很難看懂的簡潔代碼,但是運行后你會驚呆的,他竟然返回一個圖形鍵盤
// 用字符串返回一個鍵盤圖形
(_=>[..."`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`
`)()
這是它的打印結果:
驚人!
最后
為了讓大家快速精通JavaScript,在這里免費分享給大家一份Javascript學習指南。
Javascript學習指南文檔涵蓋了javascript 語言核心、詞法結構 、類型、值和變量 、表達式和運算符 、語句、對象 、數組 、函數 、類和模塊 、 正則表達式的模式匹配、 javascript的子集和擴展 、服務器端javascript /客戶端javascript 、web瀏覽器中的javascript 、window對象 、腳本化文檔、腳本化css 、事件處理等22章知識點。內容豐富又詳細,拿下互聯網一線公司offfer的小伙伴都在看。
每個知識點都有左側導航書簽頁,看的時候十分方便,由於內容較多,下面列舉的部分內容和圖片。
對象
- 創建對象
- 屬性的查詢和設置
- 刪除屬性
- 檢測屬性
- 枚舉屬性
- 屬性getter和setter
- 屬性的特性
數組
- 創建數組
- 數組元素的讀和寫
- 稀疏數組
- 數組長度
- 數組元素的添加和刪除
- 數組遍歷
- 多維數組
函數
- 函數定義
- 函數調用
- 函數的實參和形參
- 作為值的函數
- 作為命名空間的函數
- 閉包
- 函數屬性、方法和構造函數
類和模塊
- 類和原型
- 類和構造函數
- javascript中java式的類繼承
- 類的擴充
- 類和類型
- javascript中的面向對象技術
- 子類
正則表達式的模式匹配
- 正則表達式的定義
- 用於模式匹配的string方法
- regexp對象
javascript的子集和擴展
- javascript的子集
- 常量和局部變量
- 解構賦值
- 迭代
- 函數簡寫
- 多catch 從句
- e4x: ecmascript for xml
web瀏覽器中的javascript
- 客戶端javascript
- 在html里嵌入javascript
- javascript程序的執行
- 兼容性和互用性
- 可訪問性
- 安全性
- 客戶端框架
window對象
- 計時器
- 瀏覽器定位和導航
- 瀏覽歷史
- 瀏覽器和屏幕信息
- 對話框
- 錯誤處理
- 作為window對象屬性的文檔元素
如果你有其他語言的編程經歷,這份文檔會有助你了解JavaScript是一門高端的、動態的、弱類型的編程語言,非常適合面向對象和函數式的編程風格。
我在這里將這份完整版的JS學習指南電子版文檔提供出來,感興趣的朋友都可以找我拿一份學習!(純免費的一個分享,希望能給大家帶來實質性的幫助)
快速入手通道:【點擊這領取Javascript學習指南電子版】
你的支持,我的動力;祝各位前程似錦,offer不斷!!!