這15個前端冷門知識點太香了，90%的程序員竟從沒用過！
一、瀏覽器地址欄變身“代碼編輯器”
直接運行JavaScript
在地址欄輸入 javascript:alert('Hello from URL!')，瀏覽器會立即執行這段代碼并彈窗！但注意：Chrome和IE會默認去掉javascript:前綴，需手動補全，而Firefox不支持此功能。
運行HTML代碼
輸入 data:text/html,<h1>Hello World!</h1>，瀏覽器會渲染成一個簡易頁面。
瀏覽器變編輯器
輸入 data:text/html,<html contenteditable>，瀏覽器瞬間變成一個可編輯的記事本！
二、隱藏的DOM魔法：ID元素全局化
為元素設置id屬性后，JavaScript會自動將其作為全局變量！例如：
<div id="demo"></div>
<script>console.log(demo); // 直接輸出div元素</script>雖然方便，但項目中建議仍用document.getElementById，避免命名沖突。
三、用a標簽解析URL，告別正則！
創建一個a標簽并賦值URL，瀏覽器會自動解析出協議、域名、路徑等：
const a = document.createElement('a');
a.;
console.log(a.hostname); // "example.com"
console.log(a.search); // "?key=value"封裝成工具函數，輕松提取URL各部分參數。
四、CSS黑科技：多重邊框與模糊文字
多重邊框
用box-shadow疊加實現：
div {
box-shadow: 0 0 0 5px red, 0 0 0 10px blue;
}文字模糊效果
結合透明顏色和陰影：
p {
color: transparent;
text-shadow: 0 0 5px #000;
}五、不聲明變量，如何交換值？
一行代碼實現變量交換：
let a = 1, b = 2;
a = [b, b = a][0]; // a=2, b=1原理是利用數組解構賦值，極簡但可讀性較差，適合炫技場景。
六、浮點數快速取整：位運算符的妙用
用|0或~~替代Math.floor()，性能更高：
const num = 3.14;
console.log(num | 0); // 3
console.log(~~num); // 3適用于動畫、像素計算等高頻操作。
七、實時編輯頁面樣式
在控制臺輸入：
document.body.contentEditable = 'true';整個頁面變為可編輯狀態！結合style標簽的contenteditable屬性，還能實時修改CSS并預覽效果。
八、CDN引入的協議自適應技巧
省略URL的http:或https:，讓瀏覽器自動匹配當前頁面協議：
<script src="http://cdn.example.com/library.js"></script>避免混合內容錯誤，提升安全性。
九、用script標簽存儲任意數據
設置type="text"的script標簽，可存儲HTML模板或配置信息：
<script type="text" id="config">
{ "theme": "dark", "lang": "zh" }
</script>
<script>
const config = JSON.parse(document.getElementById('config').innerHTML);
</script>十、惡搞console.log：模糊輸出與炫酷樣式
重寫console.log，讓輸出內容模糊或添加樣式：
const _log = console.log;
console.log = (...args) => {
_log.call(console, '%c' + args.join(' '), 'color: red; font-size: 20px;');
};
console.log('這是紅色大字！');甚至可以用text-shadow讓文字模糊，整蠱同事必備！
十一、浮點數快速取整
使用位運算符|0或~~實現高效向下取整，性能優于parseInt和Math.floor：
console.log(3.14 | 0); // 3
console.log(~~3.14); // 3十二、隨機字符串生成
利用Math.random().toString(36)將隨機數轉為36進制字符串，截取片段生成隨機ID：
const randomStr = Math.random().toString(36).substr(2, 10);十三、隱藏鼠標光標
通過CSS禁用頁面光標，制造“無指針”效果：
* { cursor: none !important; }十四、Object.fromEntries快速反轉對象鍵值
將對象鍵值對反轉（需確保值唯一）：
const obj = { a: 1, b: 2 };
const reversed = Object.fromEntries(
Object.entries(obj).map(([k, v]) => [v, k])
); // {1: 'a', 2: 'b'}十五、document.designMode開啟全局編輯
讓整個頁面變為可編輯狀態（類似開發者工具）：
document.designMode = 'on'; // 輸入后頁面任意區域可編輯
