前端面试 - 美团(到店事业群/日常实习)

380 阅读4分钟

前文

哈啰,家人们,今天参加美团的前端日常实习面试(又是被疯狂拷打的一天),面试官依然很温和,奈何我太菜了。

面试官估计是看我学得不太行,看到我答不出来之后,没有继续拷打我,后面聊了一些学校方面的事情。

欧克,闲话结束,进入正题!

八股部分

1.js的数据类型

基本数据类型

  • 字符串 (String):表示文本数据。例如:"Hello World"。

  • 数字 (Number):表示数值数据。可以是整数或浮点数。例如:42, 3.14。

  • 布尔值 (Boolean):表示逻辑值,只有两个可能的值:true 或 false

  • 空值 (Null):表示一个没有值的特殊关键字。在 JavaScript 中,null 是一个对象,但它被视为独立的数据类型。

  • 未定义 (Undefined):表示一个未定义的值,默认情况下变量没有被赋值时就是 undefined

  • (Bigint)BigInt 可以表示任意长度的整数,不会受到表示范围的限制。它用于处理大整数运算、密码学算法、位操作等场景。

    引用数据类型

  • 对象 (Object):表示复杂的数据结构,可以包含多个键值对例如:{ name: "John", age: 25 }

  • 数组 (Array):表示一组有序的数据项。例如:[1, 2, 3]

  • 函数 (Function):表示可执行的代码块。例如:function add(a, b) { return a + b; }

  • 日期 (Date):表示日期和时间。例如:new Date()

  • 以及map、weakmap、set、weakset等。

2.判断数据类型的方式

  • typeof

  • instanceof

  • Object.prototype.toString.call()

  • Object.constructor()

2-1.使用typeof判断函数会输出什么?

object

3.Vue中为什么Data()是一个函数,而非一个对象?

4.v-if和v-for可以一起使用吗?

不推荐

vue2中,vue2中v-for优先级大于v-if,

在 Vue 3 中,当 v-if 和 v-for 同时存在于一个节点上时,v-if 比 v-for 的优先级更高,此时 v-if 无法访问 v-for 中的对象。

5.在vue2和vue3当中v-if和v-for优先级一样嘛,有什么需要注意的点?

vue2中v-for优先级大于v-if,vue3中v-for优先级小于v-if

6.nextTick()使用过吗?用途是什么?底层有过了解吗?

用途:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM

vue2中通过设立一个回调队列(存储回调函数),两个标识符(分别确立微任务是否启用、回调函数是否正在执行),通过flushCallbacks()函数拷贝档当前回调函数,并且执行这些回调函数。

根据if的判断,分别对支持环境不一致的回调做出不一致的异步处理,分别是Promise的兑现状态的.then()函数、MutationObserver、宏任务setImmediate以及setTimeout

7.webpack使用过吗?具体做过哪些配置?

请参考这篇文章

juejin.cn/post/714076…

8.你一般在哪个生命周期发起网络请求?

其在 created 中,因为组件实例已经处理好了所有与状态相关的操作,所以我们可以在这里 获取数据、调用方法、watchcomputed 都可以。

mounted 主要是在 DOM 挂载之后被调用,所以如果我们想要获取 DOM 的话,那么需要在 mounted 之后进行。

除了这些之外,还有一些不太常见但是也比较有意义的,比如 beforeUpdateupdated

其中 beforeUpdate 表示 数据变化后,视图改变前updated 表示 数据变化后,视图改变后

手写部分

1.实现instanceof()

// 自定义instanceof操作符函数:模拟实现instanceof操作符的功能
function myInstanceOf(obj, constructorFn) {
  // 获取构造函数的原型对象
  const prototype = constructorFn.prototype;
  
  // 判断对象的原型链中是否存在构造函数的原型
  while (obj !== null) {
    if (obj.__proto__ === prototype) {
      return true;
    }
    obj = obj.__proto__;
  }
  
  return false;
}

// 示例构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 使用示例
const john = new Person('John', 25);
console.log(myInstanceOf(john, Person)); // Output: true
console.log(myInstanceOf(john, Object)); // Output: true
console.log(myInstanceOf(john, Array)); // Output: false


2.数组去重 方法一:

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(originalArray)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]


方法二:

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = originalArray.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]

代码输出题(请原谅我没有保存下来)