面试复盘（三）：好心态好状态

福大命大
2,543 阅读9分钟

前言

加班到凌晨一点半，下午还去面了两家公司，是真的困，面试完全不在状态🤣🤣，要不是有部分题目比较简单，感觉又要心态爆炸了。
ps：有两道算法题，大家可以重点关注一下

情况说明

本菜经验2年左右，投的多为2-3年经验要求的。

第一家公司

概况

  • 公司：坐标深圳。
  • 面试官：特有礼貌，还先自我介绍了。
  • 面试结果：应该是hr面没过。
  • 面试感受：技术面还行,hr面很难受。

面试题

  1. 介绍一下自己之前做过的项目。
  2. Vue的生命周期。
  3. Create和beforeMount他们两之间有什么区别。
  4. Vue组件通信。
  5. v-if和v-show的区别以及使用场景。
  6. nextTick的使用场景和作用。
  7. Vue中的key有什么作用。
  8. 计算属性和watch的区别。
  9. 子元素上下左右居中。
  10. 生成一条0.5px的线。
  11. 自适应方案。
  12. rem和rm的区别。
  13. vw和百分比有什么区别。
  14. 合并两个数组。
  15. 数组去重，冒泡排序。
  16. Object去掉其中一项属性，delete删除对象有什么影响。
  17. 深浅拷贝。
  18. 防抖节流 。
  19. 从0+100怎么实现。
  20. 一到一百个相同的请求，后面的依赖前面一个的结果，现在要拿到第一百个结果要怎么做。
  21. 假如你在爬楼梯，楼梯一共有N层，但你每次爬楼梯只能走一步、两步或三步，计算共有多少种走法，怎么打印出所有走法？

介绍一下自己之前做过的项目。

你可以回答的更好

Vue的生命周期。

组件生命周期

  1. new Vue()，初始化事件和生命周期
  2. beforeCreate（$el和data都是undefined）
  3. 初始化数据和方法（data和props的响应式处理，mehods方法声明）
  4. created（$el是undefined，修改data不触发update）
  5. 判断有没有el项（vm.$mount(el)），判断有没有模板(没有将el外层的HTML当模板)，将模板编译成渲染函数，返回虚拟DOM
  6. beforeMounted（$el是虚拟DOM，修改data不触发update）
  7. 创建正式DOM替换虚拟DOM，挂载到页面指定容器显示
  8. mounted（可操作真实DOM）
  9. 数据变更
  10. beforeUpdate
  11. 重新渲染虚拟DOM并通过DIFF算法比较差异更新真实DOM
  12. updated
  13. 调用vm.$destory()
  14. beforeDestory（清理计时器、事件）
  15. 移除数据监听、事件监听和子组件
  16. destoryed（实例不可用） keep-alive生命周期
    被keep-alive包裹的组件有 activated 和 deactivated 两个生命周期。如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，切换到组件B，这时组件A的deactivated的生命周期函数会被触发；在切换回组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发了。

介绍下vue keep-live
vue生命周期

Create和beforeMount他们两之间有什么区别。

同上题

vue组件通信。

  1. 父子间通信:父亲提供数据通过属性 props传给儿子；儿子通过 $on 绑父亲的事件，再通过 $emit 触发自己的事件（发布订阅）
  2. 利用父子关系 $parent 、 $children ，
  3. 父组件提供数据，子组件注入。 provide 、 inject ，插件用得多。
  4. ref 获取组件实例，调用组件的属性、方法
  5. 跨组件通信 Event Bus （Vue.prototype.bus=newVue）基于on与$emit
  6. vuex 状态管理实现通信

v-if和v-show的区别以及使用场景。

区别
v-if是删除生成dom,v-show是切换dispaly的状态。
使用场景

  • v-if
  1. 某一块代码在运行时条件很少改变，使用 v-if 较好 (v-if 有更高的切换开销)
  2. 在组件上使用v-if可触发组件的生命周期函数
  3. 与transition结合使用 当条件变化时该指令可以触发过渡效果(用于动画切换)
  • v-show
  1. 需要非常频繁地切换某块代码，使用 v-show渲染
  2. 当条件变化时该指令触发过渡效果(用于动画切换)

nextTick的使用场景和作用。

使用场景
例：一个子组件通过v-if控制隐藏显示<t v-if='show'><t/>，当修改完显示状态后，立马通过ref去操作子组件的方法，这个时候会报错，原因在于子组件此时可能还未渲染完成，这个时候使用nextTick可以解决，他会在dom更新完成之后再去调用。
作用
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

vue中的key有什么作用。

  • key会用在虚拟DOM算法（diff算法）中，用来辨别新旧节点。
  • 不带key的时候会最大限度减少元素的变动，尽可能用相同元素。（就地复用）
  • 带key的时候，会基于相同的key来进行排列。（相同的复用）
  • 带key还能触发过渡效果，以及触发组件的生命周期

计算属性和watch的区别。

  • 处理数据的场景不同，监听器(watch)适合一个数据影响多个数据，计算属性适合一个数据受多个数据影响
  • 计算属性有缓存性，计算所得的值如果没有变化不会重复执行,但是watch会重复执行
  • 监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况

子元素上下左右居中。

元素水平垂直居中

生成一条0.5px的线。

image.png

怎么画一条0.5px的边（更新）

自适应方案。

自适应布局方案

rem和rm的区别。

  • rem是相对于根元素字体大小
  • em是相对于自身字体大小

vw和百分比有什么区别。

  • 百分比是相对高度，相对于他的父元素而言。
  • vw永远都是相对于视窗大小的。

合并两个数组。

  1. arr1.concat(arr2)
  2. [...arr1,...arr2]
  3. 循环

数组去重，冒泡排序。

数组去重
1. Array.from(new Set(arr))
2. [...new Set(arr)]
3. for循环嵌套，利用splice去重
4. 新建数组，利用indexOf或者includes去重
5. 先用sort排序，然后用一个指针从第0位开始，配合while循环去重
冒泡排序

function bubbleSort (arr) {
  for (let i = 0; i < arr.length; i++) {
    let flag = true;
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        flag = false;
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
    if (flag) break;
  }
  return arr;
}

这个是优化过后的冒泡排序。用了一个flag来优化，它的意思是：如果某一次循环中没有交换过元素，那么意味着排序已经完成了。

冒泡排序总会执行(N-1)+(N-2)+(N-3)+..+2+1趟，但如果运行到当中某一趟时排序已经完成，或者输入的是一个有序数组，那么后边的比较就都是多余的，为了避免这种情况，我们增加一个flag，判断排序是否在中途就已经完成（也就是判断有无发生元素交换）
冒泡排序算法和数组去重

Object去掉其中一项属性，delete删除对象有什么影响。

delete Object['name']
delete只能删除自有属性，不会影响原型链上的属性

深浅拷贝。

第二十二篇: JS中浅拷贝的手段有哪些？
第二十三篇: 能不能写一个完整的深拷贝？

防抖节流 。

防抖节流

从0+100怎么实现。

1、使用for循环从1加到100的总和

let sum=0;
for(var i=0;i<=100;i++){
    sum+=i;
}

2、使用while函数从1加到1000的总和

let i=0, sum=0;
while(i<=100){
    sum+=i++;
}

一到一百个相同的请求，后面的依赖前面一个的结果，现在要拿到第一百个结果要怎么做。

await async循环

假如你在爬楼梯，楼梯一共有N层，但你每次爬楼梯只能走一步、两步或三步，计算共有多少种走法，怎么打印出所有走法？

代码有点多，具体看我写的另一篇文章

爬楼梯2

第二家公司

概况

  • 公司：在线教育。
  • 面试官：一般。
  • 面试结果：互相看不上😂。
  • 面试感受：你什么技术能匹配这个工资的？？？。

笔试题

  1. http和https的区别
  2. requestAnimationFrame的作用。
  3. instanceof的原理
  4. localStorage、sessionStorage 和 Cookie 区别。
  5. CommonJS 和 ES6 Module 的区别。
  6. 内存泄漏场景。
  7. 一道包含async、await、setTimeout、Promise的事件循环题。
  8. React HOC的作用，解决了什么问题，怎么理解Hook，解决了什么问题。
  9. Vue什么是渲染函数，尝试写一个简单的。
  10. 给定一个整数数组，找出其中两个数相加等于目标值。

http和https的区别

  • Http是超文本传输协议，数据明文传输。
  • Https则是具有安全性的SSL加密传输协议，传输是加密了的。
  • Http和Https使用的端口不一样,前者是80,后者是443。

requestAnimationFrame的作用

你知道的requestAnimationFrame

instanceof的原理

instanceof的原理

localStorage、sessionStorage 和 Cookie 区别

  • 数据存储方面：cookie在同源的HTTP请求里，在服务器和客户端来回传递。storage是本地保存。
  • 存储数据大小：cookie限制4kb，storage约5MB。
  • 数据有效期：cookie的有效期与过期时间设置有关（默认是会话），sessionStorage 当前标签页有效， localStorage始终有效。
  • 作用域：cookie、localStorage同源窗口，sessionStorage当前标签页
  • 操作：cookie只作为document的一个属性可获取，没有其他操作方法。storage有getItem、setItem、removeItem、clear等方法。

CommonJS 和 ES6 Module 的区别

CommonJS 和 ES6 Module 究竟有什么区别？

内存泄漏场景

js 内存泄漏场景、如何监控以及分析

一道包含async、await、setTimeout、Promise的事件循环题

大致是这个样子的一个题目：今日头条async/await面试题执行顺序

React HOC的作用，解决了什么问题，怎么理解Hook，解决了什么问题。

没写过react

Vue什么是渲染函数，尝试写一个简单的

实现简单render函数

给定一个整数数组，找出其中两个数相加等于目标值，要求时间复杂度O(n)

leetcode-cn.com/problems/tw…

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 * 创建媒介所（字典表Map），遍历数组，匹配符合信息的目标值 taget - currentValue，
 * 匹配成功返回两个数值下标，匹配失败就将选手的信息放入媒介所。
 */
var twoSum = function(nums, target) {
  if(!nums) return [];
  // 创建字典表
  const m = new Map();
  // 遍历nums数组
  for(let i = 0; i < nums.length; i++){
    // 获取当前值
    const n = nums[i];
    // 获取对当前与该值匹配的数值
    const n2 = target - nums[i];
    // 判断目标值是否在字典中
    if(m.has(n2)){
      // 是，在返回目标值的坐标和当前数值的坐标
      return [m.get(n2),i]
    }
    // 不在字典中，则放入字典，key为数值，value为下标
    m.set(n,i)
  }
};

面试题

  1. 做过小程序的错误监控没

  2. script引入一个第三方的脚本，脚本报错了，怎么能拿到他的详细信息。

  3. 小程序生命周期

  4. （盒子模型）一个大盒子，里面两个小盒子，他们款分别是50%，高是100%，都有一个1px的边框，这个时候会宽高溢出，怎么处理。

  5. 上下居中

  6. Webpack开启按需加载

  7. svg雪碧图怎能做的

  8. 大文件切片上传

  9. 微信多端用户同意，小程序怎么拿到unionid

  10. Canvas实现一个刮刮乐

  11. WebSocket遇到过什么问题

做过小程序的错误监控没

script引入一个第三方的脚本，脚本报错了，怎么能拿到他的详细信息。

我想到的是用onerror捕捉，但是面试官问如何拿到详细错误，暂时没想到好的手段。

小程序生命周期

小程序生命周期

（盒子模型）一个大盒子，里面两个小盒子，他们款分别是50%，高是100%，都有一个1px的边框，这个时候会宽高溢出，怎么处理。

切换盒子模型

image.png

image.png

上下居中

和这个差不多

元素水平垂直居中

Webpack开启按需加载

webpack4下使用import()模块按需加载

svg雪碧图怎能做的

具体实现 vue3+ts模版
原理 方便前端使用的SVG雪碧图

大文件切片上传

前端大文件上传

微信多端用户统一，小程序怎么拿到unionid

UnionID 机制说明
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的UnionID是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。

UnionID获取途径

  • 开发者可以直接通过 wx.login + code2Session 获取到该用户 UnionID，无须用户授权。
  • 小程序端调用云函数时，可在云函数中通过 cloud.getWXContext 获取 UnionID。

Canvas实现一个刮刮乐

可以看看这个，和我面试时讲的思路差不多。

Canvas 实现刮刮乐 js实现刮刮乐

WebSocket遇到过什么问题

ios切换页面以及锁屏断开连接

结语

首发于语雀文档@is_tao

面试复盘（一）：认清现实
面试复盘（二）：重拾自信

avatar
文章
阅读
粉丝