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