這十個被嚴重低估的 JS API，效率提升 100%
作者：林三心不學挖掘機
相比傳統的filter + indexOf組合（時間復雜度O(n2)），Set提供了O(1)的查找性能和自動去重功能。與||運算符不同，??專門針對null和undefined，不會誤判0、false、""等有效值。
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
1. Set數據結構：高效去重與快速查找
相比傳統的filter + indexOf組合（時間復雜度O(n2)），Set提供了O(1)的查找性能和自動去重功能。
用戶ID去重示例：
// 處理重復的用戶ID數據
const duplicateIds = [101, 102, 102, 103, 103, 103];
// 一行代碼完成去重
const uniqueIds = [...new Set(duplicateIds)];
console.log(uniqueIds); // [101, 102, 103]防止重復事件綁定：
const registeredEvents = new Set();
// 安全事件注冊函數
function registerEvent(eventName, handler) {
if (!registeredEvents.has(eventName)) {
document.addEventListener(eventName, handler);
registeredEvents.add(eventName);
}
}
// 多次調用也只會注冊一次
registerEvent("click", handleClick);
registerEvent("click", handleClick);2. Object.entries()與Object.fromEntries()：對象與數組輕松轉換
這對組合方法簡化了對象遍歷和數據結構轉換的復雜度。
過濾對象中的空值屬性：
const userProfile = {
name: "李四",
age: 25,
avatar: "",
email: "lisi@example.com"
};
// 兩步完成過濾：對象轉數組→過濾→轉回對象
const cleanedProfile = Object.fromEntries(
Object.entries(userProfile).filter(([key, val]) => val !== "")
);
console.log(cleanedProfile);
// {name: "李四", age: 25, email: "lisi@example.com"}URL參數解析：
// 解析 ?category=tech&page=1&sort=date 這類參數
const queryString = window.location.search.substring(1);
// 無需正則表達式，直接轉換為對象
const params = Object.fromEntries(new URLSearchParams(queryString));
console.log(params); // {category: "tech", page: "1", sort: "date"}3. ?? 與 ??= 運算符：精準的空值判斷
與||運算符不同，??專門針對null和undefined，不會誤判0、false、""等有效值。
正確處理用戶輸入：
const userProvidedValue = 0;
// 錯誤方式：0會被當作假值
const incorrectResult = userProvidedValue || 100;
// 正確方式：只對null/undefined使用默認值
const correctResult = userProvidedValue ?? 100;
console.log(incorrectResult, correctResult); // 100, 0對象屬性默認值設置：
const appSettings = { theme: "dark" };
// 僅當屬性為null/undefined時賦值
appSettings.language ??= "zh-CN";
appSettings.theme ??= "light";
console.log(appSettings); // {theme: "dark", language: "zh-CN"}4. Intl API：原生國際化解決方案
瀏覽器內置的國際化API，無需引入第三方庫即可處理多語言格式。
多貨幣格式化：
const amount = 2567.89;
// 人民幣格式
const cnyFormatter = newIntl.NumberFormat("zh-CN", {
style: "currency",
currency: "CNY"
});
// 美元格式
const usdFormatter = newIntl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
});
console.log(cnyFormatter.format(amount)); // ￥2,567.89
console.log(usdFormatter.format(amount)); // $2,567.89本地化日期顯示：
const currentDate = newDate();
// 中文日期格式
const chineseDate = newIntl.DateTimeFormat("zh-CN", {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long"
}).format(currentDate);
console.log(chineseDate); // "2025年11月3日星期一"5. Intersection Observer：高性能元素觀察
替代傳統的scroll事件監聽，提供更高效的視口檢測能力。
圖片懶加載實現：
// 觀察所有懶加載圖片
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const imgElement = entry.target;
imgElement.src = imgElement.dataset.src;
imageObserver.unobserve(imgElement);
}
});
});
// 為所有懶加載圖片添加觀察
document.querySelectorAll("img[data-src]").forEach(img => {
imageObserver.observe(img);
});無限滾動加載：
const loadMoreObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadNextPage().then(data => {
appendItems(data.items);
});
}
});
// 觀察"加載更多"觸發器
loadMoreObserver.observe(document.getElementById("load-more-trigger"));6. Promise.allSettled()：可靠的并行請求處理
與Promise.all不同，allSettled確保所有請求都能完成處理，不會因單個失敗而中斷。
批量數據請求：
const apiRequests = [
fetch("/api/users"),
fetch("/api/products"),
fetch("/api/orders")
];
Promise.allSettled(apiRequests).then(results => {
const successfulRequests = results
.filter(result => result.status === "fulfilled")
.map(result => result.value);
const failedRequests = results
.filter(result => result.status === "rejected")
.map(result => result.reason);
console.log("成功請求:", successfulRequests.length);
console.log("失敗請求:", failedRequests.length);
});7. Element.closest()：便捷的祖先元素查找
簡化DOM層級遍歷，無需手動逐級查找父元素。
事件委托優化：
document.addEventListener("click", (event) => {
// 查找最近的列表項
const listItem = event.target.closest(".list-item");
if (listItem) {
listItem.classList.toggle("selected");
}
});表單交互增強：
const inputs = document.querySelectorAll("input, textarea");
inputs.forEach(input => {
input.addEventListener("focus", function() {
const formGroup = this.closest(".form-group");
formGroup?.classList.add("focused");
});
input.addEventListener("blur", function() {
const formGroup = this.closest(".form-group");
formGroup?.classList.remove("focused");
});
});8. URL與URLSearchParams：專業的URL處理
提供完整的URL解析和操作能力，告別復雜的字符串處理。
URL解析與構建：
// 解析當前URL
const currentUrl = new URL(window.location.href);
// 獲取特定參數
const page = currentUrl.searchParams.get("page");
const search = currentUrl.searchParams.get("search");
console.log(`當前頁碼: ${page}, 搜索詞: ${search}`);動態構建URL：
// 創建新URL實例
const newUrl = new URL("https://api.example.com/data");
// 添加查詢參數
newUrl.searchParams.append("limit", "20");
newUrl.searchParams.append("offset", "0");
newUrl.searchParams.set("sort", "name");
// 刪除參數
newUrl.searchParams.delete("offset");
console.log(newUrl.toString());
// "https://api.example.com/data?limit=20&sort=name"9. for...of循環：靈活的迭代控制
相比forEach，提供更完整的循環控制能力。
可中斷的數組遍歷：
const tasks = [
{ id: 1, name: "設計", completed: true },
{ id: 2, name: "開發", completed: true },
{ id: 3, name: "測試", completed: false }
];
// 查找第一個未完成的任務
for (const task of tasks) {
if (!task.completed) {
console.log("找到未完成任務:", task.name);
break; // 找到后立即停止遍歷
}
}Map結構遍歷：
const userMap = new Map([
[1, "張三"],
[2, "李四"],
[3, "王五"]
]);
// 同時獲取鍵和值
for (const [id, name] of userMap) {
console.log(`用戶ID: ${id}, 姓名: ${name}`);
}10. 頂層await：簡化模塊異步初始化
在ES模塊中直接使用await，簡化異步依賴管理。
配置預加載：
// config.js - 模塊加載時自動獲取配置
const configResponse = await fetch("/api/configuration");
export const settings = await configResponse.json();
// app.js - 直接使用預加載的配置
import { settings } from "./config.js";
export function initializeApp() {
console.log("應用配置:", settings);
}動態模塊導入：
// 按需加載大型組件
asyncfunction loadDashboard() {
const { Dashboard, Chart, Table } = awaitimport("./dashboard-components.js");
return { Dashboard, Chart, Table };
}
// 用戶操作時觸發加載
document.getElementById("show-dashboard").addEventListener("click", async () => {
const components = await loadDashboard();
renderDashboard(components);
});責任編輯：武曉燕
來源：
前端之神
