刷刷题16

如何优化以下代码的执行效率？

javascript 复制代码

const data = Array(1e5).fill({ value: Math.random() });

function process() {
  return data.map(item => ({
    ...item,
    score: item.value * 100
  }));
}

‌答案‌：

ini 复制代码

// 优化方案：避免展开操作符和频繁对象创建
function optimizedProcess() {
  const result = new Array(data.length);
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    result[i] = { 
      value: item.value, 
      score: item.value * 100 
    };
  }
  return result;
}

如何设计一个支持 Tree-shaking 的 JavaScript 工具库？

‌代码规范‌：
- 使用 ES Modules 语法（import/export）
- 避免副作用（如全局变量修改）
‌构建配置‌：

arduino 复制代码

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.esm.js',
    format: 'esm' // 输出 ESM 格式
  },
  treeshake: {
    moduleSideEffects: false
  }
};

‌实践验证‌：
- 使用 webpack-bundle-analyzer 分析产物
- 确保未使用代码被正确剔除

如何实现前端错误监控的"全栈可追溯"？

javascript 复制代码

window.addEventListener('error', (event) => {
  const log = {
    message: event.message,
    stack: event.error?.stack,
    component: getCurrentComponent(), // 通过 Context API 获取
    user: getUserID(),
    env: navigator.userAgent
  };
  sendToServer(log); // 使用 Beacon API 发送
});

// Promise 错误捕获
window.addEventListener('unhandledrejection', (e) => {
  e.preventDefault();
  logError(e.reason);
});

‌全栈链路‌：

前端埋点 → 分布式日志收集（Kafka） → 存储（Elasticsearch） → 可视化（Grafana）

实现一个支持最大并发数的 Promise 调度器 `Scheduler`，要求最多同时执行 2 个任务。

‌答案‌：

kotlin 复制代码

class Scheduler {
  constructor(limit = 2) {
    this.queue = [];
    this.running = 0;
    this.limit = limit;
  }

  add(promiseFn) {
    return new Promise((resolve) => {
      const execute = () => {
        this.running++;
        promiseFn().then(resolve).finally(() => {
          this.running--;
          this.next();
        });
      };

      if (this.running < this.limit) {
        execute();
      } else {
        this.queue.push(execute);
      }
    });
  }

  next() {
    if (this.queue.length && this.running < this.limit) {
      this.queue.shift()();
    }
  }
}

‌测试用例‌：

scss 复制代码

const scheduler = new Scheduler(2);
const delay = (time) => () => new Promise(r => setTimeout(r, time));

scheduler.add(() => delay(1000)()).then(() => console.log(1));
scheduler.add(() => delay(500)()).then(() => console.log(2));
scheduler.add(() => delay(300)()).then(() => console.log(3));
// 输出顺序：2 → 3 → 1（任务1和2先执行，任务3在任务2完成后执行）

如何优化以下代码的执行效率？

如何设计一个支持 Tree-shaking 的 JavaScript 工具库？

如何实现前端错误监控的"全栈可追溯"？

实现一个支持最大并发数 的 Promise 调度器 Scheduler，要求最多同时执行 2 个任务。

实现一个支持最大并发数的 Promise 调度器 `Scheduler`，要求最多同时执行 2 个任务。