十個JS裝逼技巧,高逼格代碼,讓你驚嘆不已


除了三目運算,你還知道其他的裝逼姿勢嗎?留言走你~~

單行簡潔的代碼很難維護(有時甚至難以理解),但這並不能阻止廣大攻城獅們腦洞,在編寫簡潔的代碼后獲得一定的滿足感。

以下我最近的一些收藏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不斷!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM