京东-零售-实习 · 第 1 轮 · 第一轮

Mon, 28 Jul 2025 14:15:34 +0000

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

本轮概述： 主要考察前端基础，难度不大。

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

1. 自我介绍

题目要点

突出专业背景、技术栈掌握情况、学习能力和求职意向，简洁明了地展现个人优势。

参考答案

本科就读于XXX大学计算机科学与技术专业，在校期间系统学习了前端开发相关技术栈，包括HTML、CSS、JavaScript基础，以及React、Vue等现代框架。通过课程项目和个人实践，积累了一定的开发经验。

在技术方面，熟练掌握ES6+语法、响应式布局、组件化开发思想，了解前端工程化工具如Webpack、Vite的使用。同时对前端性能优化、用户体验提升有一定认识。

学习能力较强，能够快速适应新技术和开发环境，具备良好的问题分析和解决能力。希望能够加入贵公司，在实际项目中进一步提升技术水平，为团队贡献价值。

2. 说一说做过的项目中的难点和亮点

题目要点

通过具体的技术难题展现问题解决能力，用数据量化优化效果，体现技术深度和实践价值。

参考答案

难点： 在开发电商类项目时，遇到了商品列表的性能问题。当商品数据量达到几千条时，页面渲染明显卡顿。通过分析发现是频繁的DOM操作和重复渲染导致的。

解决方案是实现了虚拟滚动技术，只渲染可视区域内的商品项，配合防抖优化搜索功能，最终将首屏渲染时间从3秒优化到800毫秒。

亮点： 设计了一套可复用的表单验证组件库。通过高阶组件模式封装了常见的验证逻辑，支持链式调用和自定义验证规则。这套组件在后续项目中被多次复用，提高了开发效率约30%。

3. 手写秒杀倒计时组件

题目要点

实现了完整的倒计时功能，包括时间计算、格式化显示、状态管理和生命周期处理，考虑了边界情况和用户体验。

参考答案

"use client"

import type React from "react"
import { useState, useEffect, useCallback } from "react"

interface CountdownProps {
 targetTimestamp: number // 目标时间戳（毫秒）
 onEnd?: () => void // 倒计时结束回调
}

interface TimeLeft {
 days: number
 hours: number
 minutes: number
 seconds: number
}

const Countdown: React.FC<CountdownProps> = ({ targetTimestamp, onEnd }) => {
 const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
 const [isActive, setIsActive] = useState(true)

 const calculateTimeLeft = useCallback((): TimeLeft => {
 const now = Date.now()
 const difference = targetTimestamp - now

 if (difference <= 0) {
 setIsActive(false)
 onEnd?.()
 return { days: 0, hours: 0, minutes: 0, seconds: 0 }
 }

 const days = Math.floor(difference / (1000 * 60 * 60 * 24))
 const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
 const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
 const seconds = Math.floor((difference % (1000 * 60)) / 1000)

 return { days, hours, minutes, seconds }
 }, [targetTimestamp, onEnd])

 useEffect(() => {
 if (!isActive) return

 const timer = setInterval(() => {
 setTimeLeft(calculateTimeLeft())
 }, 1000)

 // 初始化时立即计算一次
 setTimeLeft(calculateTimeLeft())

 return () => clearInterval(timer)
 }, [calculateTimeLeft, isActive])

 const formatNumber = (num: number): string => {
 return num.toString().padStart(2, "0")
 }

 if (!isActive) {
 return (
 <div className="countdown-container">
 <span className="countdown-ended">秒杀已结束</span>
 </div>
 )
 }

 return (
 <div className="countdown-container">
 <div className="countdown-wrapper">
 {timeLeft.days > 0 && (
 <>
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.days)}</span>
 <span className="time-label">天</span>
 </div>
 <span className="separator">:</span>
 </>
 )}
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.hours)}</span>
 <span className="time-label">时</span>
 </div>
 <span className="separator">:</span>
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.minutes)}</span>
 <span className="time-label">分</span>
 </div>
 <span className="separator">:</span>
 <div className="time-unit">
 <span className="time-number">{formatNumber(timeLeft.seconds)}</span>
 <span className="time-label">秒</span>
 </div>
 </div>
 </div>
 )
}

// 使用示例
const App: React.FC = () => {
 // 设置一个5分钟后的时间戳
 const targetTime = Date.now() + 5 * 60 * 1000

 const handleCountdownEnd = () => {
 console.log("秒杀活动结束")
 }

 return (
 <div className="app">
 <h1>京东秒杀倒计时</h1>
 <Countdown targetTimestamp={targetTime} onEnd={handleCountdownEnd} />
 </div>
 )
}

export default App

4. 当前项目还有哪些可以优化的地方

题目要点

从性能、体验、质量三个维度分析优化空间，体现对项目全局的思考和持续改进意识。

京东-零售-实习 on Last Stand

京东-零售-实习 · 第 1 轮 · 第一轮

1. 自我介绍

题目要点

2. 说一说做过的项目中的难点和亮点

题目要点

3. 手写秒杀倒计时组件

题目要点

4. 当前项目还有哪些可以优化的地方

题目要点