开年第一份面经：前端开发实习生

JSON_PINKinee
422 阅读5分钟

开年第一份面经

  • 面试时长：55分钟

开年的第一场面试，问的问题很简单，但是也记录一下吧

  1. 传统艺能：自我介绍
  2. 你前端入门到自己做项目花了太长时间？

我特意花了一个学期打基础，前端三剑客掌握的比较牢固，有用纯原生代码写过一个项目；后续断断续续花了3周的时间学了 Vue 和 NodeJs 学习之后，可以直接做项目。

  1. 说一下 Vue2 和 Vue3 的区别
  1. 生命周期不同，Vue3用 setup 取代了Vue2的 beforeCreate() 和 created()；
  2. 实现双向绑定的方式不同，Vue2是使用的 Object.defineProperty() ,Vue3是使用的 Proxy。Vue2中采用 defineProperty 来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式。但是：
  • 检测不到对象属性的添加和删除；
  • 数组API方法无法监听到，只有用 Vue2 包装的那几个API才可以；
  • 需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题。
    而 proxy：对这个对象的所有操作会被拦截器拦截，都能被监听到。
  1. Vue3引入了组合式API的概念，组合式API根据逻辑功能来分，一个功能所定义的所有API放在一起，更加高内聚，低耦合。
  2. Vue3 的优化
  • 由原来的 Object.defineProperty 改为 Proxy ，速度更快；
  • diff算法优化，增加静态标志；
  • 进行模板编译优化，静态提升，不参与更新的元素只被创建一次；
  • Tree-shaking：摇树优化，会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积更小，加载速度更快。
  1. 新增组件
  • Fragment
  • Teleport
  • Suspense
  1. 说一下 watch 和 watchEffect 的区别
  1. watch 监听需要指明监听的对象，watchEffect 不需要，回调当中使用到哪个变量就监听哪个；
  2. watch 页面刚加载时不会立即触发，watchEffect 会立即触发，不过可以通过修改配置让watch立即触发；
  3. watch 可以拿到新旧值，watchEffect 只能拿到新值。
  1. ES6 新特性有哪些？

Promise,Set,Map,async await 等等，比较常用

  1. async await 和生成器能说说吗？

我说了 async await 是生成器的语法糖。

  1. async的原理就是：Generator函数+自动执行器；
  2. Generator 最大的特点就是可以控制函数的执行；
  3. 生成器函数遇到 yield 的时候会暂停，并把 yield 后面的表达式结果抛出去；
  4. next 作用是将代码的控制权交还给生成器函数。
  1. 使用async await时捕获异常是怎么处理？

不太清楚具体场景，我回答了如果有多个异步任务，try catch 中包裹多个 await。面试官说封装函数来处理更好。

  1. 箭头函数有哪些特性？
  1. 箭头函数没有自己的 this ，也没有自己的 arguments，需要使用该特性的时候可以用rest参数；
  2. 不能当成构造函数，因为new一个实例的时候需要用到this，箭头函数没有自己的this；
  3. 箭头函数没有原型prototype属性，不能当作构造函数自然没有prototype属性。
  1. 使用 JSON.parse(JSON.stringify(obj)) 实现深拷贝可以吗？

使用它能满足一定条件下的深拷贝，但是有时候会出错，原因是将一个对象序列化的时候会有一些问题，比如

  • 会忽略 undefined
  • 会忽略 symbol
  • 不能序列化函数
  • 手写一个简易版的深拷贝
let obj1 = {
  a:{
    b:1
  }
}
function deepClone(obj) { 
  let cloneObj = {}
  for(let key in obj) {                 //遍历
    if(typeof obj[key] ==='object') { 
      cloneObj[key] = deepClone(obj[key])  //是对象就再次调用该函数递归
    } else {
      cloneObj[key] = obj[key]  //基本类型的话直接复制值
    }
  }
  return cloneObj
}
let obj2 = deepClone(obj1);
obj1.a.b = 2;
console.log(obj2);   //  {a:{b:1}}
  1. 说说你做过的项目？

把我简历上的3个项目说了15分钟。。。

  1. 如何解决git分支冲突的问题？

这个可以看我之前写过的文章：juejin.cn/post/719185…

  1. react有没有了解过？

目前还没有系统学 React，但是 Vue 和 React 都是 MVVM 框架，只要有一个的基础，学另外一个不会花很多时间。

  1. npm 对比其他包管理工具的缺点？

之前确实没看过几款包管理工具的区别，后来查了一下

  1. 2022年前端推出了哪些新特性？说一下

要精确到2022年的一时间还真想不起来，只记得在社区中看过一篇文章，里面提到一个新的CSS属性，content-visibility 就说了一下，也不确定是不是2022年的。它能够提高页面渲染性能，不过兼容性还不足。

  1. 说一下对前端工程化的了解

工程化经常听过，但是具体要说还不知道说啥，查了一下
这篇文章讲的比较通俗易懂：zhuanlan.zhihu.com/p/141195603

  1. 说一下webpack和vite

简单说了说wepack的打包过程，webpack的 loader 和插件，分别有什么功能；
然后说了一下 vite 的优点：无需打包，构建速度快。

  1. 有接触过性能优化吗，说一下

说了几个项目中用到的性能优化方式

  1. 懒加载
  2. 缩略图
  3. 本地缓存 localStorage sessionStorage
  4. requestAnimationFrame
  1. 算法题

请从字符串中找出一个最长的不包含重复字符的子字符串，计算该最长子字符串的长度。

  • 这道题考频太高了，但是太久没接触算法题了，我直接用暴力的解法，面试官让我用双指针法。（这道题完成的不好），看看力扣大佬的解法
var lengthOfLongestSubstring = function(s) {
    // 哈希集合，记录每个字符是否出现过
    const occ = new Set();
    const n = s.length;
    // 右指针，初始值为 -1，相当于我们在字符串的左边界的左侧，还没有开始移动
    let rk = -1, ans = 0;
    for (let i = 0; i < n; ++i) {
        if (i != 0) {
            // 左指针向右移动一格，移除一个字符
            occ.delete(s.charAt(i - 1));
        }
        while (rk + 1 < n && !occ.has(s.charAt(rk + 1))) {
            // 不断地移动右指针
            occ.add(s.charAt(rk + 1));
            ++rk;
        }
        // 第 i 到 rk 个字符是一个极长的无重复字符子串
        ans = Math.max(ans, rk - i + 1);
    }
    return ans;
};
  • 反思
  1. 面试官问平时是怎么学习的
    我回答说：看视频，其实应该要看文档更好，因为有的知识点不会有人帮你出视频讲解，要有看文档自学的能力。
  2. 表达的时候有一点着急，下次一定不会！
  3. 太久没练算法题了，要重新开工了。
avatar
文章
阅读
粉丝