网易雷火暑期前端一面(2022.4.15)投递信息投递时间: 2022.3.25 投递地址: 网易招聘官网 2023届

投递信息

投递时间: 2022.3.25
投递地址: 网易招聘官网
2023届暑期实习

面试问题

介绍项目(公司项目提了一嘴, 让我挑一个我最想说的项目, 我说的Yeo小程序组件库)
细问项目的大组件如何与小组件进行逻辑联动
能说一下npm发包的版本控制等更多细节吗? ❌

参考: 从零到一发布 NPM 包 - 掘金

说一下CSS的flex的属性,系统一些的说 ❌ 🌿

父元素上: 只说了align-item、justify-content, 而且还忘记了flex-direction, 还说self-item是父元素的, giao !! 搞错了, 这都忘记了, 还是没有熟练练习啊

子元素上的没让说, 因为一看就不牢固

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    .container {
      width: 400px;
      height: 400px;
      background-color: rosybrown;

      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: row;
      /* flex-wrap: wrap; */
    }
    .container .box {
      height: 100px;
    }
    .box1 {
      /* 
        默认对应三个属性:
        1. flex-grow: 设置子项比例
        2. flex-shrink: 只会在默认宽度之和大于容器宽度时, 才会收缩
        3. flex-basis: 设置子项目基本宽度(默认auto)
      */
      flex: 1 1 200px;
      background-color: pink;
    }
    .box2 {
      flex: 1 0.4 200px;
      background-color: orange;
    }
    .box3 {
      flex: 1 1 200px;
      background-color: greenyellow;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
  
</body>
</html>

在子元素上的属性 align-self

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    .container {
      width: 400px;
      height: 400px;
      background-color: rosybrown;

      display: flex;
      justify-content: center;
      flex-direction: row;
    }
    .container .box {
      height: 100px;
      width: 100px;
    }
    .box1 {
      background-color: pink;
      /* 
        相当于把父元素上的 align-item: flex-end 统一操作,
        改为了在某一个子元素上的单个操作
      */
      align-self: flex-end;
    }
    .box2 {
      background-color: orange;
      align-self: center;
    }
    .box3 {
      background-color: greenyellow;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>

</body>
</html>

说一下 typeof 表达式, 如何判断类型, 判断哪些类型

使用typeof判断基本数据类型, 则返回其对应的类型的字符串, 除了 null判断的时候返回的是 object

如果判断的是数组或者对象, 则返回 object

如果判断的是函数, 则返回function

// 基础数据类型
let var1 = 11;
let var2 = 'str';
let var3 = true;
let var4 = undefined;
let var5 = null;     // special !!
let var6 = Symbol('tag');
let var7 = 123n;

// 引用数据类型
let var8 = {};
let var9 = [];
let var10 = function() {};

console.log(typeof var1);  // number
console.log(typeof var2);  // string
console.log(typeof var3);  // boolean
console.log(typeof var4);  // undefined
console.log(typeof var5);  // object  special !!
console.log(typeof var6);  // symbol
console.log(typeof var7);  // bigint

console.log(typeof var8);  // object
console.log(typeof var9);  // object
console.log(typeof var10);  // function

说一下new关键字的生成实例的过程(new原理)

创建一个新对象
将这个新对象的__proto__属性指向构造函数的原型对象
调用构造函数, 并将构造函数中的this指向这个新创建的对象 (简单说就是给对象添加属性)
如果该构造函数返回值是一个对象, 则返回这个对象; 否则返回第一步新创建的这个对象

模拟实现:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 手写实现 new 代码
function ImplementNew() {
    let obj = {};
    obj.__proto__ = Person.prototype;
    let result = Person.call(obj, ...arguments);
    return typeof result == 'object' ? result : obj;
}

let person = ImplementNew('leo', 21);
console.log(person);   // {name: 'leo', age: 21}

说一下Vue2的改写了数组哪些方法? (没问, 换一个问题改变原数组的方法有哪些?) ❌ 🌿

我说了push、pop、shift、unshift、splice、sort、reverse

然后面试官说: 对呀, Vue2中就是改写了这七个方法, 让他在调用的时候触发响应, 如果用Object.defineProperty(), 所以Vue2中数组用来还是有些坑的
那你说一下shift和unshift? unshift的返回值是什么? (这里紧张了一下, 口误差点说错了, giao)

shift 和 unshift 都会改变原数组

shift 是从原数组的头部删掉一个元素, 并返回删掉的元素

unshift 是从原数组的头部添加一个元素, 并返回添加后数组的长度
说一下数组的reduce方法? 以及他的参数

reduce方法需要传入两个参数:
1. 函数 (对应的参数有四个)
  1. previous: 之前操作的累积结果
  2. current: 当前元素
  3. currentIndex: 当前元素的索引
  4. array: 调用数组
2. initValue
说一下reduce方法的具体使用场景? ❌

我说使用过reduce做累加操作, 但是面试官说业务不可能就只是一个累加吧

面试官说: 那你听我总结,其实就是为了解决数组的一种遍历求值的方式
那数组上你还用过哪些比较高级的方法?
1. map
2. filter
3. every
4. some
5. find
6. flat
业务场景题: 表格的分页, 点第一页请求第一页的数据, 点第二页请求第二页的数据, 以此类推, 但是现在后端接口的请求很不稳定, 用户在快速点击不同的页码, 导致页面请求数据混乱, 该如何解决?

我说了两种方式:
1. 使用节流的方式, 限制用户进行快速点击操作
2. 使用Promise进行请求, 如果第一页的请求还没有回到客户端时, 我的第二页和第三页是不能被点击(通过设置布尔值, 设置页标是否可被点击)
防抖和节流的区别?

防抖是取最后一次, 而节流是指在匀速的执行某一个任务.
那对于刚才的业务题, 有没有更加通用的方法? 以后就不用写了 ❌

这个应该是就是想让我从请求工具的角度去说
发送请求的工具用过吗?

我说只是简单用过axios

面试官人很好, 还给我说出我说不来的问题的解答. 感谢面试官!!

自我总结:

节奏适当放慢, 先思考几秒再总结出回答, 不要上来就答
放平心态, 相信自己, you just fucking great!!
对于一个知识来说深入的不够全面
对于问题我有些不用想的过于复杂, 就按照基本逻辑说就是, 比如这里的第10个问题, 面试官其实就是想知道reduce是一一遍历数组中元素进行, 然后进行每一次的计算, 可以是累加也可以是累乘, 具体的实现都是看回调函数中的代码, 这样说就OK

面试官评价:

知识学习要更加成体系一点
底下的基础并不是很牢固

网易雷火暑期前端一面(2022.4.15)

投递信息

面试问题

更多总结