1.Intersection Observer:

• 用途： 监听元素与其父元素或视口的交叉情况。
• 使用场景： 懒加载图片、实现无限滚动。

const callback = (entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {console.log('Element is in the viewport!');}});
};const options = {root: null, // use the viewport as the rootthreshold: 0.5 // trigger when 50% of the element is visible
};const observer = new IntersectionObserver(callback, options);
observer.observe(myElement);

2.Promise 和 异步/await:

• 用途： 更优雅地处理异步操作。
• 使用场景： 异步数据请求、避免回调地狱。

function fetchData() {return new Promise(resolve => {// 异步操作resolve(data);});
}async function fetchDataAsync() {const data = await fetchData();console.log(data);
}

3.Map 和 Set 数据结构:

• 用途： 提供更灵活的键值对存储或存储唯一值。
• 使用场景： 数据集合、唯一值存储。

const myMap = new Map();
myMap.set('key', 'value');const mySet = new Set([1, 2, 3, 4, 5]);

4.Proxy 和 Reflect:

• 用途： 对对象的操作进行自定义处理。
• 使用场景： 拦截对象操作、监控对象变化。

const handler = {get(target, prop) {console.log(`Getting property ${prop}`);return target[prop];}
};const proxy = new Proxy(myObject, handler);

5.函数柯里化 (Function Currying):

• 用途： 将多参数函数转化为一系列单参数函数。
• 使用场景： 部分应用函数、参数复用。

const curry = fn => (...args) =>args.length >= fn.length ? fn(...args) : curry(fn.bind(null, ...args));const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);

6.Generator 函数:

• 用途： 暂停和继续执行的函数。
• 使用场景： 数据流控制、异步流程管理。

function* generateSequence() {yield 1;yield 2;yield 3;
}const myGenerator = generateSequence();
console.log(myGenerator.next().value); // 1

7.WeakMap 和 WeakSet:

• 用途： 提供弱引用的集合，不阻止垃圾回收。
• 使用场景： 隐藏信息、轻量级缓存。

const myWeakMap = new WeakMap();
const keyObject = {};
myWeakMap.set(keyObject, 'value');

8.扩展运算符和剩余参数 (Spread Operator and Rest Parameters):

• 用途： 扩展数组、对象，或使用剩余参数收集函数参数。
• 使用场景： 合并数组、对象，动态参数传递。

const newArray = [...oldArray, newValue];
function sum(...args) { return args.reduce((acc, val) => acc + val, 0); }

9.Web Workers:

• 用途： 在后台线程中运行 JavaScript 代码，提高性能。
• 使用场景： 复杂计算、并发请求。

// In main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello from main.js!');// In worker.js
onmessage = event => {console.log('Message received in worker.js:', event.data);
};

10.异步迭代器:

• 用途： 迭代异步数据流。
• 使用场景： 从 API 获取流数据、处理异步序列。

const fetchData = async () => {const response = await fetch('https://api.example.com/data');const dataStream = response.body.getReader();while (true) {const { done, value } = await dataStream.read();if (done) break;console.log(value);}
};fetchData();

11.Object.freeze():

• 用途： 使对象不可变，防止更改。
• 使用场景： 确保数据完整性，防止意外修改。

const myObject = { prop1: 'value1', prop2: 'value2' };
const frozenObject = Object.freeze(myObject);// 试图修改将在严格模式下导致错误
frozenObject.prop1 = 'new value';

12.记忆化:

• 用途： 缓存函数结果，避免重复计算。
• 使用场景： 大场景的函数调用、递归算法。

const memoize = (func) => {const cache = {};return (...args) => {const key = JSON.stringify(args);if (cache[key]) {return cache[key];} else {const result = func(...args);cache[key] = result;return result;}};
};const expensiveCalculation = memoize((n) => {console.log('进行昂贵的计算...');return n * 2;
});console.log(expensiveCalculation(5));  // 执行计算
console.log(expensiveCalculation(5));  // 返回缓存的结果

13.自定义事件:

• 用途： 实现自定义事件系统进行通信。
• 使用场景： 组件通信、发布/订阅模式。

const eventEmitter = new EventTarget();const handleCustomEvent = (event) => {console.log(`触发自定义事件：${event.detail}`);
};eventEmitter.addEventListener('customEvent', handleCustomEvent);
eventEmitter.dispatchEvent(new CustomEvent('customEvent', { detail: '传递的数据' }));

14.代理验证:

• 用途： 验证和拦截对象属性访问。
• 使用场景： 输入验证、强制数据约束。

const validator = (target, prop, value) => {if (prop === 'age' && (typeof value !== 'number' || value < 0)) {throw new Error('无效的年龄值');}target[prop] = value;return true;
};const person = new Proxy({}, { set: validator });person.age = 25; // 有效
person.age = -5; // 抛出错误

15.Object.fromEntries():

• 用途： 将键值对数组转换为对象。
• 使用场景： 处理 API 返回的键值对数组。

const keyValueArray = [['key1', 'value1'], ['key2', 'value2']];
const myObject = Object.fromEntries(keyValueArray);console.log(myObject); // { key1: 'value1', key2: 'value2' }

16.AbortController 和 AbortSignal:

• 用途： 允许通过 AbortController 取消异步操作。
• 使用场景： 中止不再需要的网络请求。

const controller = new AbortController();
const signal = controller.signal;fetch('https://api.example.com/data', { signal }).then(response => response.json()).then(data => console.log(data)).catch(error => {if (error.name === 'AbortError') {console.log('Request was aborted');} else {console.error(error);}});// 取消请求
controller.abort();

17.Blob 和 URL.createObjectURL():

• 用途： 在浏览器中创建可下载的二进制大对象（Blob）。
• 使用场景： 文件下载、图像预览。

const textContent = 'Hello, Blob!';
const blob = new Blob([textContent], { type: 'text/plain' });const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'example.txt';
link.click();

18.IndexedDB:

• 用途： 客户端存储大量结构化数据。
• 使用场景： 离线应用、大规模数据存储。

const request = indexedDB.open('myDatabase', 1);request.onupgradeneeded = event => {const db = event.target.result;const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};request.onsuccess = event => {const db = event.target.result;const transaction = db.transaction('myObjectStore', 'readwrite');const objectStore = transaction.objectStore('myObjectStore');objectStore.add({ id: 1, data: 'example' });
};

19.Speech Recognition API:

• 用途： 识别用户的语音输入。
• 使用场景： 语音搜索、语音指令。

const recognition = new SpeechRecognition();
recognition.lang = 'en-US';recognition.onresult = event => {const transcript = event.results[0][0].transcript;console.log(`User said: ${transcript}`);
};recognition.start();

20.Resize Observer:

• 用途： 观察元素的大小变化。
• 使用场景： 响应式布局、动态调整 UI。

const observer = new ResizeObserver(entries => {entries.forEach(entry => {console.log(`Element size changed to ${entry.contentRect.width}x${entry.contentRect.height}`);});
});const targetElement = document.getElementById('resizeMe');
observer.observe(targetElement);