1. Blob API
Blob API，是一个处理二进制数据的好帮手。无论是图片、音频还是视频，只要是二进制数据，Blob都能轻松搞定。想象一下，在你的应用中，需要上传或下载一个二进制文件，用Blob API来处理就再合适不过了。
// 创建一个Blob对象
const myBlob = new Blob(["Hello, Web API!"], { type: "text/plain" });// 使用FileReader读取Blob对象
const reader = new FileReader();
reader.onloadend = () => {console.log(reader.result); // 输出: Hello, Web API!
};
reader.readAsText(myBlob);
Blob API常用于Web应用中处理文件上传或下载，比如将用户的输入转换成一个可以下载的文件，或是读取一个已上传文件的内容。
2. WeakSet
WeakSet与Set类似，不过有个大不同：它存储的是对象的弱引用。简单来说，如果一个对象的唯一引用是WeakSet中的话，那么这个对象是可以被垃圾回收掉的，听起来有点酷，对吧？
let obj = { name: "Tiger" };
const myWeakSet = new WeakSet();
myWeakSet.add(obj);console.log(myWeakSet.has(obj)); // trueobj = null; // 让对象失去引用console.log(myWeakSet.has(obj)); // false
WeakSet非常适合用于管理生命周期短暂的对象，比如在处理临时数据缓存时，确保内存不被长期占用。
3. TextEncoder 和 TextDecoder
这两个API是字符串和字节序列之间转换的利器。有时候，我们需要将字符串转化为二进制数据，或者反过来，这时候就能用到TextEncoder和TextDecoder了。
const encoder = new TextEncoder();
const decoder = new TextDecoder("utf-8");const myString = "Hello, World!";
const encodedData = encoder.encode(myString);console.log(encodedData); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100, 33]const decodedString = decoder.decode(encodedData);console.log(decodedString); // Hello, World!
它们在处理网络请求、文件读写时特别有用，可以有效地转换数据格式，比如将用户输入转成字节再存储到服务器中。
4. Proxy API
Proxy API能够创建一个代理对象，可以拦截并自定义对象的基本操作，比如属性的读取、赋值、枚举、函数调用等等。这让它在实现数据劫持和动态代理上有极大的优势。
const targetObject = {message: "Hello, Proxy!",
};const handler = {get: (target, prop) => {console.log(`Getting ${prop}`);return target[prop];},set: (target, prop, value) => {console.log(`Setting ${prop} to ${value}`);target[prop] = value;},
};const proxyObject = new Proxy(targetObject, handler);console.log(proxyObject.message); // Hello, Proxy!proxyObject.message = "New message"; // Console: Setting message to New message
Proxy API常用于框架内部实现数据劫持，比如Vue.js中的响应式数据绑定，就是通过Proxy API实现的。
5. Object.entries() 和 Object.values()
这两个方法提供了便利的方式来获取对象的键值对或值，使用起来非常直观。
const person = {name: "Tiger",age: 30,
};console.log(Object.entries(person)); // [["name", "Tiger"], ["age", 30]]
console.log(Object.values(person)); // ["Tiger", 30]
当你需要遍历一个对象，并对其每个属性进行操作时，Object.entries()和Object.values()都能派上用场。比如将对象的属性和值生成一个表格，或是将对象的值用作另一数据结构的输入。
6. IntersectionObserver
IntersectionObserver用于监测元素是否进入视口，这对于实现懒加载或无限滚动来说非常重要。它能大幅提升性能，因为它能帮你只在需要的时候加载资源。
const callback = (entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {console.log(`${entry.target.id} is visible`);observer.unobserve(entry.target);}});
};const observer = new IntersectionObserver(callback);
const target = document.getElementById("myElement");
observer.observe(target);
IntersectionObserver非常适合实现图片懒加载、无限滚动列表等功能，能有效减少不必要的资源加载，提高用户体验。
7. Symbol
Symbol是ES6中引入的一种新数据类型，代表独一无二的值。它常用于定义对象的私有属性，避免与其他属性发生冲突。
const uniqueId = Symbol("id");const user = {name: "Tiger",[uniqueId]: 12345,
};console.log(user[uniqueId]); // 12345
Symbol可以用于实现对象的私有属性或方法，让外部无法直接访问，保护代码安全。
8. Reflect API
Reflect API提供了与Proxy API相配合的方法集，用于操作对象和属性。它们更加安全和规范，比如动态调用对象的方法、构造函数等。
const obj = {name: "Tiger",sayHello() {console.log(`Hello, ${this.name}`);},
};Reflect.apply(obj.sayHello, { name: "John" }, []); // Hello, John
Reflect API在框架设计和元编程中非常有用，可以用来修改、调用对象的内置行为。
9. Generator API
Generator函数是一种能返回迭代器的特殊函数。它们能用来实现惰性计算和复杂的异步操作，让代码更加高效和可控。
function* simpleGenerator() {yield "Hello";yield "Generator";
}const generator = simpleGenerator();console.log(generator.next().value); // Hello
console.log(generator.next().value); // Generator
Generator可以帮助我们在处理异步操作时避免回调地狱，比如与async/await一起使用来管理复杂的异步流程。
10. Web Workers
Web Workers允许在后台线程中运行JavaScript代码，这意味着你可以在不阻塞用户界面的情况下进行复杂的计算任务。
// main.js
const worker = new Worker("worker.js");worker.postMessage("Hello, worker!");worker.onmessage = event => {console.log(`Message from worker: ${event.data}`);
};// worker.js
onmessage = event => {console.log(`Received message: ${event.data}`);postMessage("Hello from worker!");
};
Web Workers非常适合处理大量的计算密集型任务，如图像处理、数据分析等，在这些任务中能显著提高应用的性能。
11. AudioContext
AudioContext提供了在Web上处理音频的强大功能，包括音频播放、混音和音效处理等。你可以用它来创建复杂的音频应用。
const audioContext = new AudioContext();fetch("https://www.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();});
AudioContext广泛应用于音频编辑、实时音效处理、游戏开发等领域，让你在浏览器中创建复杂的音频体验。
12. Fetch API
Fetch API是现代浏览器中用于进行网络请求的标准接口，它比旧的XMLHttpRequest更加灵活且易用。Fetch API支持Promise，让异步操作更加直观。
// 发起一个GET请求
fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
Fetch API几乎在所有需要进行网络请求的场景中都能应用，比如从服务器获取数据、提交表单、与第三方API进行交互等。
13. Service Workers
Service Workers是Web应用离线能力的核心，允许开发者拦截网络请求、缓存资源，并提供离线访问功能。它们运行在后台线程中，可以在页面未打开时接收推送通知。
// 注册Service Worker
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js').then(registration => {console.log('Service Worker registered with scope:', registration.scope);}).catch(error => {console.error('Service Worker registration failed:', error);});
}
Service Workers用于实现离线访问、缓存资源、提高性能、接收推送通知等，特别适合PWA（渐进式Web应用）开发。
14. Notification API
Notification API允许Web应用向用户发送桌面通知，极大地增强了用户互动体验。它是用户与Web应用保持联系的有力工具。
// 请求通知权限
Notification.requestPermission().then(permission => {if (permission === "granted") {new Notification("Hello, this is a notification!");}
});
Notification API常用于提醒用户重要的更新，如社交媒体的消息提醒、电商网站的订单状态更新、新闻网站的最新头条等。
15. Geolocation API
Geolocation API能够获取设备的地理位置信息，这在需要提供基于位置的服务时非常有用。比如可以用于地图应用、地理围栏、位置推荐等功能。
if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(position => {console.log('Latitude:', position.coords.latitude);console.log('Longitude:', position.coords.longitude);});
}
Geolocation API用于需要获取用户位置的应用，比如打车软件、导航系统、位置分享等。
16. WebSocket API
WebSocket API提供了在客户端与服务器之间建立全双工通信的能力，使得实时应用成为可能。WebSocket连接比传统HTTP更高效，非常适合需要低延迟通信的场景。
const socket = new WebSocket('wss://example.com/socket');socket.addEventListener('open', () => {socket.send('Hello Server!');
});socket.addEventListener('message', event => {console.log('Message from server:', event.data);
});
WebSocket适用于实时通信的场景，比如即时聊天应用、在线游戏、实时数据更新等。
17. URL API
URL API提供了一种简单而强大的方法来解析和构建URL。它能够方便地获取URL的各个组成部分，并对其进行操作。
const url = new URL('https://example.com/path?name=Tiger&age=30');console.log(url.hostname); // "example.com"
console.log(url.pathname); // "/path"
console.log(url.searchParams.get('name')); // "Tiger"
URL API在处理URL操作时非常有用，比如获取查询参数、更新URL路径、构建新的请求URL等。
18. History API
History API用于操作浏览器的会话历史记录。它允许开发者在不重新加载页面的情况下更改浏览器的URL，从而实现单页面应用的路由管理。
// 推送一个新的状态到历史记录
history.pushState({ page: 1 }, "Title", "/page1");// 在用户按下浏览器的返回按钮时处理历史记录
window.addEventListener('popstate', event => {console.log('Location changed to:', document.location.href);
});
History API适用于单页面应用的路由管理，用户可以通过浏览器的前进和后退按钮在不同页面状态之间切换，而不需要刷新页面。
19. Performance API
Performance API为开发者提供了对页面性能的详细洞察。它能精确地测量资源加载时间、页面渲染时间等，帮助优化Web应用的性能。
// 记录时间点
performance.mark('start');// 执行一些操作
for (let i = 0; i < 1000000; i++) {}// 记录结束时间点
performance.mark('end');// 计算操作时间
performance.measure('My Operation', 'start', 'end');const measure = performance.getEntriesByName('My Operation')[0];
console.log('Operation took:', measure.duration, 'ms');
Performance API适用于需要对性能进行监控和分析的场景，比如优化页面加载速度、分析用户体验、查找性能瓶颈等。
20. Clipboard API
Clipboard API使得Web应用可以访问剪贴板的内容，实现剪贴、复制和粘贴功能。这为用户提供了更高效的交互体验。
// 复制文本到剪贴板
navigator.clipboard.writeText('Hello, Clipboard!').then(() => {console.log('Text copied to clipboard!');
}).catch(err => {console.error('Failed to copy text:', err);
});
Clipboard API在文本编辑器、数据输入表单、代码示例复制等场景中非常有用。