20个超实用的JavaScript高级技巧_js 高级用法

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 root
  threshold: 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);