前端开发常见问题与面试-01

以下是问题的简要回答：

---

1. 页面左右部分传值

• 父子组件通信：通过 props 和 $emit（Vue）或 props 和回调函数（React）。
• 状态管理：使用 Vuex、Redux 或 Pinia 全局状态共享。
• 事件总线：通过事件发布/订阅模式（如 Vue 的 EventBus）。
• 本地存储：localStorage 或 sessionStorage（适合非实时场景）。

---

2. 数据类型

• 基本类型：number, string, boolean, undefined, null, symbol (ES6), bigint (ES11)。
• 引用类型：object, array, function。

---

3. 判断数据类型

• typeof 的局限性：
  • typeof [] 和 typeof {} 都返回 "object"。
  • 正确方法：用 Array.isArray() 判断数组，或 Object.prototype.toString.call(obj)。

---

4. 数组方法

• 常用方法：
  • 修改原数组：push, pop, shift, unshift, splice, sort, reverse。
  • 返回新数组：map, filter, slice, concat, flat。
  • 查找：find, findIndex, includes。
  • 迭代：forEach, reduce, some, every。

---

5. 地图 WebGL 和 Three.js

• Three.js：用于 3D 图形渲染的库，可结合 WebGL 实现复杂 3D 地图。
• 使用场景：三维可视化、GIS 系统、游戏开发等。

---

6. 闭包

• 定义：函数与其词法作用域的结合，内部函数可访问外部函数的变量。
• 应用：私有变量、函数工厂、模块化。
• 注意：不当使用可能导致内存泄漏。

---

7. 前端项目部署

• 步骤：
  1. 打包构建（如 npm run build）。
  2. 上传静态文件到服务器（如 Nginx、CDN）。
  3. 配置服务器路由（History 模式需重定向到 index.html）。

---

8. Webpack 按文件名打包

• 入口配置：在 webpack.config.js 中设置多入口：

  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  }
  

---

9. 移动端适配

• 方案：
  • 设置 viewport 的 meta 标签。
  • 使用 rem 或 vw/vh 单位。
  • 媒体查询（@media）适配不同屏幕。
  • 框架方案：postcss-px-to-viewport、flexible.js。

---

10. WebSocket

• 用法：

  const ws = new WebSocket('ws://example.com');
  ws.onmessage = (event) => { console.log(event.data); };
  

• 场景：实时聊天、股票行情、在线游戏。

---

11. JS 处理海量任务

• Web Workers：将任务分片到多线程。
• 分批处理：用 requestIdleCallback 或 setTimeout 分批次执行，避免阻塞主线程。

---

12. 表格和分页组件拆分

• 组件拆分：
  • TableComponent：接收 data 和 columns 渲染表格。
  • PaginationComponent：通过 currentPage 和 pageSize 控制分页，触发 @page-change 事件。
• 通信：父组件管理数据，通过 props 和事件更新。

---

13. 开发流程与分支

• 流程：需求评审 → 技术设计 → 编码 → 测试 → 部署。
• 分支策略：
  • master：生产环境代码。
  • develop：开发分支。
  • feature/xxx：功能开发分支。
  • hotfix：紧急修复分支。

---

14. 学习新技术的路径

1. 官方文档和教程。
2. 实践小项目。
3. 阅读源码或社区案例。
4. 参与技术论坛（如 GitHub、Stack Overflow）。

---

15. CSS 盒子居中

• Flex 布局：

  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

• 绝对定位：

  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

---

16. 父子组件传值

• 父 → 子：通过 props 传递数据。
• 子 → 父：子组件通过 $emit（Vue）或回调函数（React）触发父组件事件。

---

17. Vuex 与异步处理

• 组成：state, mutations, actions, getters, modules。
• 异步处理：在 actions 中调用异步 API，提交 mutations 修改状态。

---

18. let 和 const 区别

• let：块级作用域，可重新赋值。
• const：块级作用域，不可重新赋值（但对象属性可修改）。

---

19. const 相关问题

• const A = 1; A = 'string'; → 报错（不可重新赋值）。
• const A = { name: 'test' }; A.name = 'new'; → 修改成功（对象属性可变）。

---

20. 其他协议

• 常用协议：WebSocket（实时通信）、FTP（文件传输）、TCP/IP（底层网络协议）、HTTP/2、HTTPS。

---

21. 节流与防抖

• 节流（Throttle）：固定时间执行一次（如滚动事件）。
• 防抖（Debounce）：停止操作后延迟执行（如搜索输入）。

---

22. Vue2 和 Vue3 中 v-if 与 v-for 优先级

• Vue2：v-for 优先于 v-if。
• Vue3：v-if 优先于 v-for。
• 最佳实践：避免同时使用，用计算属性过滤数据。

---

23. v-if vs v-show

• v-if：条件为假时移除 DOM 元素。
• v-show：通过 display: none 隐藏元素，DOM 仍存在。

---

24. 计算属性 vs watch

• 计算属性：依赖缓存，适合派生数据（如拼接字符串）。
• watch：监听数据变化执行副作用（如请求 API）。

---

25. 前端优化

• 方向：
  • 减少 HTTP 请求（合并文件、雪碧图）。
  • 代码压缩（JS/CSS 压缩、Tree Shaking）。
  • 图片懒加载、CDN 加速。
  • 使用 Webpack 分包（splitChunks）。

---

26. 小程序跳转与传参

• 跳转方法：
  • wx.navigateTo：保留当前页面跳转。
  • wx.redirectTo：关闭当前页面跳转。
• 传参：通过 URL 拼接参数，目标页在 onLoad 中获取。

---

27. 小程序上传与分包

• 上传：通过微信开发者工具上传代码到微信后台。
• 文件过大：使用分包功能，将代码拆分为多个包（主包 + 子包），通过 subpackages 配置。

---

以上答案可根据具体技术栈进一步扩展。