记录–使用率比较低的10个Web API

// 创建一个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!"

使用场景：在某些情况下，可能需要拦截对象属性的读取、赋值等操作，以实现更高级的功能。使用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);

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"

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!"

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); // "!"

// 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!"); };

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();   });