這 10 個 Web API，不常用但是很實用！！
JavaScript 中有些 API 可能使用率比較低，下面我們逐一介紹它們的用法和使用場景。
至於標題，主要是想讓你進來看看，兄弟們別打我！
Blob API
Blob API 用於處理二進制數據，可以方便地將數據轉換爲 Blob 對象或從 Blob 對象讀取數據。
// 創建一個Blob對象
const myBlob = new Blob(["Hello, world!"], { type: "text/plain" });
// 讀取Blob對象的數據
const reader = new FileReader();
reader.addEventListener("loadend", () => {
console.log(reader.result);
});
reader.readAsText(myBlob);使用場景：在 Web 應用中，可能需要上傳或下載二進制文件，使用 Blob API 可以方便地處理這些數據。
WeakSet
WeakSet 類似於 Set，但可以存儲弱引用的對象。這意味着，如果沒有其他引用指向一個對象，那麼這個對象可以被垃圾回收器回收，而不需要手動從 WeakSet 中刪除。
const myWeakSet = new WeakSet();
const obj1 = {};
const obj2 = {};
myWeakSet.add(obj1);
myWeakSet.add(obj2);
console.log(myWeakSet.has(obj1)); // true
obj1 = null;
console.log(myWeakSet.has(obj1)); // false使用場景：在某些情況下，可能需要存儲一些臨時的對象，但又不希望這些對象佔用太多的內存。使用 WeakSet 可以方便地管理這些對象。
TextEncoder 和 TextDecoder
TextEncoder 和 TextDecoder 用於處理字符串和字節序列之間的轉換。它們可以方便地將字符串編碼爲字節序列或將字節序列解碼爲字符串。
const encoder = new TextEncoder();
const decoder = new TextDecoder();
const myString = "Hello, world!";
const myBuffer = encoder.encode(myString);
console.log(myBuffer); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33]
const decodedString = decoder.decode(myBuffer);
console.log(decodedString); // "Hello, world!"使用場景：在 Web 應用中，可能需要將字符串轉換爲二進制數據，或將二進制數據轉換爲字符串。使用 TextEncoder 和 TextDecoder 可以方便地進行這些轉換。
Proxy API
Proxy API 可以用於創建代理對象，可以攔截對象屬性的讀取、賦值等操作。這個功能可以用於實現元編程、數據劫持等功能。
const myObject = {
name: "John",
age: 30,
};
const myProxy = new Proxy(myObject, {
get(target, property) {
console.log(`Getting property ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting property ${property} to ${value}`);
target[property] = value;
},
});
console.log(myProxy.name); // "John"
myProxy.age = 31; // Setting property age to 31使用場景：在某些情況下，可能需要攔截對象屬性的讀取、賦值等操作，以實現更高級的功能。使用 Proxy API 可以方便地實現這些功能。
Object.entries() 和 Object.values()
Object.entries() 用於獲取對象的可枚舉屬性和值的數組，Object.values() 用於獲取對象的可枚舉屬性值的數組。
const myObject = {
name: "John",
age: 30,
};
console.log(Object.entries(myObject)); // [["name", "John"], ["age", 30]]
console.log(Object.values(myObject)); // ["John", 30]使用場景：在某些情況下，可能需要獲取對象的可枚舉屬性或屬性值。使用 Object.entries() 和 Object.values() 可以方便地實現這些功能。
IntersectionObserver
IntersectionObserver 可以用於檢測元素是否進入視口，可以用於實現無限滾動、懶加載等功能。
const myObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log(`${entry.target.id} is now visible`);
observer.unobserve(entry.target);
}
});
});
const myElement = document.getElementById("myElement");
myObserver.observe(myElement);使用場景：在 Web 應用中，可能需要實現無限滾動、懶加載等功能，使用 IntersectionObserver 可以方便地實現這些功能。
Symbol
Symbol 可以用於創建唯一標識符，可以用於定義對象的私有屬性或方法。
const mySymbol = Symbol("mySymbol");
const myObject = {
[mySymbol]: "This is a private property",
publicProperty: "This is a public property",
};
console.log(myObject[mySymbol]); // "This is a private property"
console.log(myObject.publicProperty); // "This is a public property"使用場景：在某些情況下，可能需要定義對象的私有屬性或方法，使用 Symbol 可以方便地實現這些功能。
Reflect API
Reflect API 可以用於實現元編程，例如動態調用對象的方法或構造函數。
class MyClass {
constructor(value) {
this.value = value;
}
getValue() {
return this.value;
}
}
const myObject = Reflect.construct(MyClass, ["Hello, world!"]);
const myMethod = Reflect.get(myObject, "getValue");
const myValue = myMethod.call(myObject);
console.log(myValue); // "Hello, world!"使用場景：在某些情況下，可能需要動態調用對象的方法或構造函數，使用 Reflect API 可以方便地實現這些功能。
Generator API
Generator API 可以用於生成迭代器，可以用於實現異步操作或惰性計算。
function* myGenerator() {
yield "Hello";
yield "world";
yield "!";
}
const myIterator = myGenerator();
console.log(myIterator.next().value); // "Hello"
console.log(myIterator.next().value); // "world"
console.log(myIterator.next().value); // "!"使用場景：在某些情況下，可能需要實現異步操作或惰性計算，使用 Generator API 可以方便地實現這些功能。
Web Workers
Web Workers 可以用於在後臺線程中執行 JavaScript 代碼，可以用於提高性能或實現複雜的計算。
// main.js
const myWorker = new Worker("worker.js");
myWorker.postMessage("Hello, worker!");
myWorker.onmessage = (event) => {
console.log(`Message received from worker: ${event.data}`);
};
// worker.js
onmessage = (event) => {
console.log(`Message received in worker: ${event.data}`);
postMessage("Hello, main!");
};使用場景：在 Web 應用中，可能需要處理大量計算密集型任務或執行長時間運行的操作，使用 Web Workers 可以提高性能或避免阻塞用戶界面。
AudioContext
AudioContext 可以用於處理音頻，可以用於實現音頻播放、音效處理等功能。
const audioContext = new AudioContext();
fetch("https://example.com/audio.mp3")
.then((response) => response.arrayBuffer())
.then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
.then((audioBuffer) => {
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();
});使用場景：在 Web 應用中，可能需要實現音頻播放、音效處理等功能，使用 AudioContext 可以方便地實現這些功能。
總結
以上 Web API 和它們的使用場景，這些 API 可以幫助我們更方便地實現 Web 應用的各種功能。當然，除了這些 API 之外，還有很多其他有用的 API 和工具，建議大家多多探索，以便更好地應對 Web 開發的各種挑戰。
關於本文
來源：布衣 1983
https://juejin.cn/post/7221813031813054501
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/mShgcinxeij6xCSjS-Pplw