阿里巴巴-社招-2年 · 第 1 轮 · 二面

Mon, 28 Jul 2025 12:14:53 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： call、apply和bind、性能优化、浏览器渲染过程、浏览器的缓存机制

本轮共 10 道题。答案默认折叠，便于先自行作答。

1. 假设现在有一个老项目需从React 17升级至React 18，你会怎么做

题目要点

先升级 react/react-dom 版本，再更改根渲染方式为 createRoot
理解 React 18 并发特性，调整相关组件代码
确认并升级第三方依赖，保证兼容性
充分测试，监控性能，平滑迁移

参考答案

一、考察点

理解 React 18 的新特性及其对应用的影响
掌握 React 18 升级步骤及兼容性处理
了解新版本的渲染机制变化（如并发特性）
熟悉常见问题排查与升级风险规避

二、参考答案

2.1 升级前准备

阅读官方升级指南（React 官方文档提供详尽升级说明）
检查项目依赖版本，确保 React 相关依赖（如 ReactDOM、react-scripts 等）兼容 React 18
备份代码及建立测试环境，保证升级过程可回滚

2.2 主要升级步骤

1）升级 React 和 ReactDOM 版本

npm install react@18 react-dom@18

或

yarn add react@18 react-dom@18

2）更新根节点渲染方式

React 18 引入了新的根 API：createRoot，替代 React 17 的 ReactDOM.render。

阿里巴巴-社招-2年 · 第 1 轮 · 一面

Mon, 28 Jul 2025 12:07:25 +0000

← 已是第一轮 · 返回本次面经 · 第 1 轮 →

本轮要点： react hooks、WeakMap 和 WeakSet

本轮共 12 道题。答案默认折叠，便于先自行作答。

1. ES6相关属性都用过那些

题目要点

熟悉 ES6 关键新特性和语法糖
了解特性设计目的，提升代码可维护性和性能
结合项目场景合理运用，避免滥用带来的副作用
使用 ESLint 及 Babel 保证兼容性和规范

参考答案

一、考察点

全面了解 ES6（ECMAScript 2015）新特性
掌握模块化、变量声明、函数、对象、数组、字符串、类、Promise 等核心特性
能说明特性使用场景、优势及与旧版本对比
具备在项目中合理应用 ES6 特性的能力

二、参考答案

1.1 变量声明

let 和 const：块级作用域，解决 var 变量提升和重复声明问题
推荐使用 const 声明常量，let 声明可变变量，避免全局污染

1.2 模板字符串（Template Literals）

使用反引号 ` 支持多行字符串和内嵌表达式 ${expr}
替代传统字符串拼接，提升可读性

1.3 解构赋值（Destructuring）

支持数组和对象解构，简化变量赋值
常用于函数参数处理、数据提取

1.4 箭头函数（Arrow Functions）

简洁函数表达式，自动绑定 this
不可作为构造函数，不绑定 arguments
常用于回调和函数简写

1.5 扩展运算符（Spread）和剩余参数（Rest）

扩展运算符 ... 用于数组和对象展开
剩余参数用于函数参数收集

1.6 对象字面量增强

属性简写、方法简写、计算属性名
支持简洁声明和动态键名

1.7 类（Class）

ES6 引入基于原型的语法糖，支持继承、构造函数、静态方法
提升面向对象编程体验

1.8 Promise 和异步编程

用于异步流程控制，解决回调地狱
支持链式调用和错误捕获

1.9 模块（Module）

import 和 export 语法，支持静态分析和按需加载
替代传统的 CommonJS、AMD 模块规范

1.10 Symbol 类型

新增基本类型，表示独一无二的值
常用于定义对象的私有属性和常量

1.11 Set 和 Map 数据结构

Set：无重复元素集合
Map：键值对集合，键可以是任意类型

1.12 Iterator 和 Generator

统一遍历接口
Generator 生成器函数，用于异步流程和惰性计算

1.13 其他

for...of 循环：遍历可迭代对象
默认参数和函数参数尾逗号
数组新增方法如 Array.from、find、findIndex

三、常见使用场景及优势

特性	使用场景	优势与改进点
`let`/`const`	代替 `var`，块级作用域变量声明	避免变量提升和作用域污染
模板字符串	拼接复杂字符串和多行文本	可读性高，减少错误
解构赋值	参数提取、数组拆包、函数返回值拆分	代码简洁，语义清晰
箭头函数	回调函数、简化函数定义	自动绑定 `this`，代码更短
扩展运算符	数组合并、对象拷贝	简化代码，避免手动循环
Promise	异步请求、链式调用	解决回调地狱，增强异步流程可读性
模块化	项目拆分、代码复用	标准化模块，支持静态分析
Set/Map	需要高效查找、去重、键值映射的场景	性能优于传统对象和数组

四、常见误区或面试陷阱

❌ 误区一：滥用箭头函数导致 `this` 绑定错误

不适合需要动态 this 的场景（如对象方法）

❌ 误区二：未充分利用解构赋值，写出冗长代码

理解解构赋值提升代码清晰度

❌ 误区三：Promise 误用未捕获异常，导致异常丢失

应正确使用 .catch 或 try...catch 包裹 async/await

2. 为什么WeakMap的键必须是对象

题目要点

WeakMap 键必须是对象，因为弱引用机制只能作用于对象
对基本类型无法进行弱引用，无法参与垃圾回收机制
WeakMap 设计用于保存对象私有数据，避免内存泄漏
与普通 Map 区别在于弱引用和不可枚举特性

参考答案

一、考察点

理解 WeakMap 的设计初衷和底层实现机制
掌握 WeakMap 与普通 Map 的区别
了解 JavaScript 垃圾回收机制与弱引用的关系
能说明 WeakMap 键限制为对象的技术原因及应用场景

二、参考答案

1.1 WeakMap 的基本概念

WeakMap 是一种键为对象，值任意的数据结构
与普通 Map 不同，WeakMap 对键对象的引用是“弱引用”
当键对象不存在其它引用时，能被垃圾回收器回收，避免内存泄漏

1.2 键必须是对象的原因

1）弱引用必须指向对象

JavaScript 的弱引用机制只能对对象类型生效
基本类型（如字符串、数字）是值类型，无法被弱引用追踪和回收

2）垃圾回收机制要求

只有对象才存在垃圾回收标记和生命周期管理
WeakMap 通过弱引用允许键对象在无外部引用时自动回收
如果允许基本类型作为键，则无法做到弱引用，违背 WeakMap 设计初衷

3）设计意图和使用场景

用于存储与对象相关联的私有数据，避免内存泄漏
例如框架中保存某个 DOM 节点的元数据，DOM 节点销毁时对应数据自动释放

1.3 WeakMap 与 Map 的区别

特性	Map	WeakMap
键类型	任意类型	只能是对象
是否可枚举	可遍历所有键值	不可遍历
引用强度	对键保持强引用，阻止垃圾回收	对键保持弱引用，不阻止垃圾回收
适用场景	普通键值映射	关联对象私有数据，自动回收

1.4 常见误区或面试陷阱

❌ 误区一：认为 WeakMap 可以用基本类型作为键

会导致运行时错误，WeakMap 只能接受对象作为键

❌ 误区二：误用 WeakMap 导致内存泄漏

忽略 WeakMap 不可遍历特性，误判数据存在与否

3. Map支持哪些非对象键

题目要点

Map 支持所有基本类型和对象作为键
包括字符串、数字、布尔值、Symbol、null、undefined
与 WeakMap 只能用对象键不同，Map 更灵活
理解键类型和对应的行为差异，避免键冲突

参考答案

一、考察点

理解 JavaScript Map 的键类型及其存储机制
掌握 Map 与 WeakMap 键的差异
了解基本类型和对象类型作为键的行为和区别
能说明非对象键在 Map 中的实际使用场景

二、参考答案

1.1 Map 键的类型支持

Map 的键可以是任意值，包括基本类型和对象类型

阿里巴巴-社招-2年 on Last Stand

阿里巴巴-社招-2年 · 第 1 轮 · 二面

1. 假设现在有一个老项目需从React 17升级至React 18，你会怎么做

题目要点

一、考察点

二、参考答案

2.1 升级前准备

2.2 主要升级步骤

1）升级 React 和 ReactDOM 版本

2）更新根节点渲染方式

阿里巴巴-社招-2年 · 第 1 轮 · 一面

1. ES6相关属性都用过那些

题目要点

一、考察点

二、参考答案

1.1 变量声明

1.2 模板字符串（Template Literals）

1.3 解构赋值（Destructuring）

1.4 箭头函数（Arrow Functions）

1.5 扩展运算符（Spread）和剩余参数（Rest）

1.6 对象字面量增强

1.7 类（Class）

1.8 Promise 和异步编程

1.9 模块（Module）

1.10 Symbol 类型

1.11 Set 和 Map 数据结构

1.12 Iterator 和 Generator

1.13 其他

三、常见使用场景及优势

四、常见误区或面试陷阱

❌ 误区一：滥用箭头函数导致 this 绑定错误

❌ 误区二：未充分利用解构赋值，写出冗长代码

❌ 误区三：Promise 误用未捕获异常，导致异常丢失

2. 为什么WeakMap的键必须是对象

题目要点

一、考察点

二、参考答案

1.1 WeakMap 的基本概念

1.2 键必须是对象的原因

1）弱引用必须指向对象

2）垃圾回收机制要求

3）设计意图和使用场景

1.3 WeakMap 与 Map 的区别

1.4 常见误区或面试陷阱

❌ 误区一：认为 WeakMap 可以用基本类型作为键

❌ 误区二：误用 WeakMap 导致内存泄漏

3. Map支持哪些非对象键

题目要点

一、考察点

二、参考答案

1.1 Map 键的类型支持

❌ 误区一：滥用箭头函数导致 `this` 绑定错误