深圳六度人和面试总结----前端

笔试题

题目一：实现一个基本的2列布局，左侧列宽200px，右侧列宽自适应，且两列高度相等。举例多种方法

方法一:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS:

.container {
 display: flex;
}

.left {
 width: 200px;
 height: 500px;
 background-color: red;
}

.right {
 flex: 1;
 height: 500px;
 background-color: blue;
}

方法二：

HTML:

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {
  overflow: hidden;
}

.left {
  float: left;
  height:500px
  width: 200px;
  background-color: red;
}

.right {
    height:500px
  overflow: hidden;
  margin-left: 200px;
  background-color: blue;
}
.clear {
  clear: both;
}

题目二：实现一个函数，输入一个下划线连接字符的字符串，返回该字符串的大驼峰模式

方法一：

function underscoreToCamel(str) {
  //删除我们的所有的_下划线
  const words = str.split("_");
  const capitalizedWords = words.map((word) => {
    return word.charAt(0).toUpperCase() + word.slice(1);
  });
  return capitalizedWords.join("");
}

console.log(underscoreToCamel("hello_world")); // 输出 "HelloWorld"
console.log(underscoreToCamel("good_evening")); // 输出 "GoodEvening"

• .split(“_”)以_为分隔符将对象分割成子字符串数组
• .charAt(0)拿到我们字符串的首字符
• .toUpperCase()将我们拿到的首字符转换成大写
• .slice把我们的大写首字母和我们后续的小写字母结合起来还原字符串,返回一个数组
• .join把数组里的两个字符串拼接成一个并使用""分隔符连接

方法二：

正则表达式

function underscoreToCamel(str) {
  return str.replace(/_([a-z])/g, function (match, capture) {
    //将匹配的原字符串的首字符进行大写转换
    return capture.toUpperCase();
  });
}

console.log(underscoreToCamel("hello_world")); // 输出 "HelloWorld"
console.log(underscoreToCamel("good_evening")); // 输出 "GoodEvening"

解释：正则表达式 /_([a-z])/g 的含义是：匹配所有字符串中 _ 和后面的一个小写字母，并且全局匹配（即匹配所有符合条件的子串）。

具体解释如下：

• _：匹配下划线字符。
• ([a-z])：匹配小写字母。
• ()：定义一个匹配组，可以在后面的替换中使用 $1、$2 等引用。
• []：字符集合，匹配方括号中指定的任意一个字符。
  0 a-z：匹配小写字母 a 到 z 之间的任意一个字符。
• /g：全局匹配模式，匹配所有符合条件的子串。

因此，该正则表达式可以匹配所有形如 _x 的子串，其中 x 是一个小写字母。比如，对于字符串 “hello_world”，该正则表达式可以匹配到 _w，然后将其替换成大写字母 W，得到新的字符串 “helloWorld”。

题目三：实现一个链表结构，具有insert，delete，find等方法

class Node {
  constructor(data) {
    //当前节点数据
    this.data = data;
    //下一个节点的指针
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    //头结点
    this.head = null;
  }
//插入方法
  insert(data) {
    const node = new Node(data);
    //尾指针指向我们的前头节点
    node.next = this.head;
    //投节点指向我们最新的节点
    this.head = node;
  }
//删除方法
  delete(data) {
    //如果链表没数据直接返回
    if (!this.head) {
      return;
    }
 //如果我们要删除头结点
    if (this.head.data === data) {
      //原本的第二个节点变为头结点
      this.head = this.head.next;
      return;
    }
//我们要删除的是非头结点且链表不为空的情况
    let current = this.head;
    while (current.next) {
      //查找节点
      if (current.next.data === data) {
        //把要删除节点的下一个节点，赋值给我们要删除节点的上一个节点的尾指针
        current.next = current.next.next;
        return;
      }
      current = current.next;
    }
  }
//查找方法
  find(data) {
    let current = this.head;
    while (current) {
      if (current.data === data) {
        return current;
      }
      current = current.next;
    }
    return null;
  }
}

//使用：
const list = new LinkedList();
list.insert(3);
list.insert(2);
list.insert(1);
console.log(list.find(2)); // 输出 Node { data: 2, next: Node { data: 3, next: null } }
list.delete(2);
console.log(list.find(2)); // 输出 null

技术面一面：
会根据你的简历技术进行提问，因为公司项目主要用的是React，所以vue问的不多，前端三件套和计算机网络，数据结构问的比较多（这里吐槽一下我觉得数据结构的掌握程度，根本不能代表一个前端的水平。而且在编写前端代码的时候用到数据结构相关的知识点也是少之又少）

• position 属性的值有哪些及其区别
• BFC的概念
• BFC的原理布局规则
• 如何创建BFC？
• 让一个元素水平垂直居中
• 隐藏页面中某个元素的方法
• 回流和重绘
• -如何触发重排和重绘？
• 在实际开发中，可以采取如下措施来减少回流和重绘的次数
• HTTP 的基本概念,HTTP 的特点和缺点
• GET与POST的区别
• HTTP报文的组成成分
• TCP和UDP的区别
• 介绍下304过程
• 浏览器的缓存机制 强制缓存 && 协商缓存
• HTTP 请求跨域问题
• 闭包
• 闭包的缺点
• 原型与原型链
• 二叉树的排序问题
• 有哪些常见的Loader？你用过哪些Loader？
• webpack做过那些优化
• typescript的泛型和枚举
• 以及项目的一些点

一面总结：面试官比较友好，公司相对应届生比较看重基础例如数据结构、网络安全协议等等，数据结构特别爱问。面试的过程也是围绕着简历来问。

技术二面：

• 满二叉树和完全二叉树的区别
• 项目相关技术点
• 实习干了什么，最有成就感的东西
• 聊了一些chatGPT，低代码
• 一些技术看法，以及未来选择

（当时去面试了才知道是低代码前端岗，）