京东 前端暑期实习1,2,3面详细面经

京东前端暑期实习1、2、3面详细面经如下：

• 实习业务与个人技术栈介绍：需清晰阐述过往实习中承担的业务内容，如负责的页面模块、功能实现等；同时介绍自身掌握的前端技术栈，如熟悉的前端框架（Vue/React）、构建工具（Webpack/Vite）、CSS预处理器（Sass/Less）等。
• 实习中印象深刻的点：分享在实习过程中遇到的具有挑战性的问题或项目，如复杂交互的实现、性能优化等，并说明解决过程和收获。
• 可视化中的性能优化：若有过可视化项目经验，需介绍在项目中采取的性能优化措施，如减少DOM操作、使用虚拟滚动、优化图片加载等。
• 前端知识学习方式：说明自己学习前端知识的主要途径，如阅读官方文档、在线课程学习、参与开源项目、阅读技术博客等。
• 未来规划：阐述自己对前端职业发展的规划，如短期希望掌握的技术、长期希望达到的职业目标等。
• flex布局常见属性及其取值

  justify-content：定义项目在主轴上的对齐方式，取值包括flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐）、space-around（每个项目两侧的间隔相等）。

  align-items：定义项目在交叉轴上的对齐方式，取值包括flex-start（上对齐）、flex-end（下对齐）、center（居中）、baseline（项目的第一行文字的基线对齐）、stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）。

  flex-direction：定义主轴的方向，取值包括row（默认值，水平方向）、row-reverse（水平反向）、column（垂直方向）、column-reverse（垂直反向）。

  flex-wrap：定义项目是否换行，取值包括nowrap（默认值，不换行）、wrap（换行）、wrap-reverse（反向换行）。

• 利用flex实现文本与icon水平垂直居中：可通过设置父容器为display: flex，然后使用justify-content: center和align-items: center实现。
• CSS权重：CSS权重是指CSS样式的优先级，权重越高，样式越优先应用。权重由选择器的组合决定，从高到低依次为：!important > 内联样式（style=""） > ID选择器（#id） > 类选择器（.class）、属性选择器（[type="text"]）、伪类选择器（:hover） > 元素选择器（div）、伪元素选择器（::before）。
• position的值及含义

  static：默认值，元素按照正常的文档流进行排列。

  relative：相对定位，元素相对于其正常位置进行偏移，不脱离文档流。

  absolute：绝对定位，元素相对于最近的非static定位的祖先元素进行定位，脱离文档流。

  fixed：固定定位，元素相对于浏览器窗口进行定位，脱离文档流。

  sticky：粘性定位，元素在滚动到特定位置前为相对定位，之后为固定定位。

• 媒体查询的应用场景：在移动端适配中，可根据不同的屏幕尺寸应用不同的样式；在打印样式中，可设置打印时的页面布局和样式。
• js数据类型

  基本数据类型：Number、String、Boolean、null、undefined、Symbol（ES6新增）、BigInt（ES2020新增）。

  引用数据类型：Object（包括Array、Function、Date等）。

• 深拷贝的实现：可通过递归遍历对象的所有属性，对于引用类型的属性，创建一个新的对象或数组，并递归地进行深拷贝。
• 原型与原型链：每个对象都有一个原型对象，原型对象也是一个对象，它也有自己的原型对象，这样就形成了一个链式结构，称为原型链。通过原型链，对象可以访问到其原型对象及其原型对象的原型对象上的属性和方法。
• 递归实现从1加到100：

• Promise的理解：Promise是一种用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。Promise解决了回调地狱的问题，支持链式调用，使得异步编程更加清晰和易于管理。
• async/await与Promise的搭配使用：async/await是Promise的语法糖，它使得异步代码看起来像同步代码。async函数返回一个Promise对象，await用于等待一个Promise对象完成，并返回其结果。
• Vue2与Vue3的区别

  组合式API：Vue3引入了组合式API，使得代码的组织更加灵活和可复用。

  响应式原理：Vue2使用Object.defineProperty实现响应式，Vue3使用Proxy实现响应式，性能更好。

• 组件通信方式

  props：父组件向子组件传递数据。

  emit：子组件向父组件传递数据。

  provide/inject：祖先组件向后代组件传递数据。

  ref：父组件通过ref获取子组件的实例。

  vuex：全局状态管理。

• watch与computed的区别

  watch：用于监听数据的变化，并在变化时执行回调函数。

  computed：用于计算属性，它会根据依赖的数据自动更新，并且具有缓存机制。

• interface与type的使用场景：interface主要用于定义对象的类型，type可以用于定义各种类型，包括对象、联合类型、交叉类型等。在TypeScript中，interface和type在很多情况下可以互换使用，但interface更适用于定义对象的结构，type更灵活。
• git拉取项目到提交PR的流程

  克隆项目：git clone <仓库地址>。

  创建分支：git checkout -b <分支名>。

  进行开发并提交代码：git add .，git commit -m "<提交信息>"。

  推送到远程仓库：git push origin <分支名>。

  在代码托管平台上创建PR。

• 版本回退：可使用git reset命令进行版本回退，如git reset --hard <commit-hash>回退到指定的提交版本。

• React中样式隔离的实现：可使用CSS Modules，它通过为每个CSS类名生成一个唯一的标识符，避免样式冲突。
• JavaScript操作DOM的API

  创建DOM：document.createElement()。

  插入DOM：appendChild()、insertBefore()。

  删除DOM：removeChild()。

  查找DOM：getElementById()、querySelector()。

  修改DOM：innerHTML、innerText、textContent。

• useCallback与useMemo的使用场景

  useCallback：用于缓存函数，避免在每次渲染时重新创建函数，适用于函数作为props传递给子组件的情况。

  useMemo：用于缓存计算结果，避免在每次渲染时重新计算，适用于计算量较大的情况。

• React中父组件调用子组件的方法：可通过forwardRef和useImperativeHandle实现。
• useEffect的使用场景及清理副作用

  使用场景：用于处理副作用操作，如数据获取、订阅、手动操作DOM等。

  清理副作用：在useEffect的回调函数中返回一个清理函数，在组件卸载或依赖项变化时执行清理操作。

• 常用的TypeScript类型：包括基本类型、对象类型、联合类型、交叉类型、泛型等。
• 发布订阅模式的实现：可创建一个发布者对象和一个订阅者对象，发布者对象维护一个订阅者列表，当有事件发生时，通知所有订阅者。
• 构造函数与原型链上定义方法或属性的区别：在构造函数中定义方法或属性，每个实例都会创建一份独立的副本，消耗内存较多；在原型链上定义方法或属性，所有实例共享同一份方法或属性，节省内存。
• CSS单位：包括px（像素）、em（相对于当前元素的字体大小）、rem（相对于根元素的字体大小）、%（相对于父元素的百分比）、vw（相对于视口宽度的百分比）、vh（相对于视口高度的百分比）等。
• npm登陆注册与发包流程

  登陆注册：npm login --registry=<注册表地址>。

  发包流程：本地测试使用npm link，更新版本号使用npm version major|minor|patch，发布包使用npm publish --access=public。

• 技术博客记录：若有记录技术博客的习惯，可分享博客的主题、内容和技术收获。
• 声明响应式变量的方式：在Vue3中，可使用ref或reactive声明响应式变量。
• watch多个属性与深度监听的处理：可通过数组形式监听多个属性，使用deep: true实现深度监听。
• Vue生命周期：包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。

• 实习经历介绍与离职原因：详细介绍过往实习的项目经验、承担的角色和取得的成果，说明离职的原因，如项目结束、个人发展等。
• 响应式布局的实现方案

  媒体查询：根据不同的屏幕尺寸应用不同的样式。

  flex布局：通过设置flex相关属性实现响应式布局。

  grid布局：使用网格布局实现复杂的响应式布局。

  rem/vw/vh：结合相对单位实现响应式布局。

• 跨域问题与解决方案

  跨域原因：浏览器的同源策略限制。

  解决方案：CORS（跨域资源共享）、JSONP、代理服务器等。

• http请求方式的作用与区别

  GET：用于获取资源，请求数据会附加在URL后面，有长度限制，不适合传输大量数据。

  POST：用于提交数据，数据放在请求体中，没有长度限制，安全性较高。

  PUT：用于更新资源，将请求体的数据替换服务器上的资源。

  DELETE：用于删除资源。

  HEAD：与GET类似，但只返回响应头，不返回响应体。

  OPTIONS：用于获取服务器支持的请求方法等信息。

• 防抖节流的实现

  防抖：在一定时间内，只有最后一次操作生效，可使用setTimeout实现。

  节流：在一定时间内，只执行一次操作，可使用setTimeout或时间戳实现。

• 登录鉴权流程设计：可包括用户输入用户名和密码，服务器验证用户信息，生成token并返回给客户端，客户端在后续请求中携带token进行身份验证。
• 需求多且无法按时交付的处理方式：可与团队成员沟通，重新评估需求优先级，调整开发计划，寻求帮助等。
• 与mentor意见不一致的处理方式：可先认真听取mentor的意见，分析其合理性，若认为自己的方案更好，可提供详细的理由和证据，与mentor进行充分沟通，达成共识。