前端面试总结

roooxy

已于 2022-07-29 13:59:28 修改

阅读量511

点赞数

分类专栏：我的杂论文章标签：面试职场和发展

于 2022-07-07 16:52:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44611785/article/details/125660221

版权

我的杂论专栏收录该内容

9 篇文章

订阅专栏

七算法面 ac模式 c++（300/400才算过）

1、现有一字符串仅由 ‘(’，‘)’，‘{’，‘}’，‘[’，']'六种括号组成。若字符串满足以下条件之一，则为无效字符串：
①任一类型的左右括号数量不相等；
②存在未按正确顺序（先左后右）闭合的括号。
输出括号的最大嵌套深度，若字符串无效则输出0。
0≤字符串长度≤100000

输入描述:

一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，']'的字符串

输出描述:

一个整数，最大的括号深度

示例2

输入

([]{()})

输出

2、靠谱的车
程序员小明打了一辆出租车去上班。出于职业敏感，他注意到这辆出租车的计费表有点问题，总是偏大。
出租车司机解释说他不喜欢数字4，所以改装了计费表，任何数字位置遇到数字4就直接跳过，其余功能都正常。
比如：

23再多一块钱就变为25；
1
39再多一块钱变为50；
1
399再多一块钱变为500；
1
小明识破了司机的伎俩，准备利用自己的学识打败司机的阴谋。
给出计费表的表面读数，返回实际产生的费用
输入描述:
只有一行，数字N，表示里程表的读数。(1<=N<=888888888)。
输出描述:
一个数字，表示实际产生的费用。以回车结束。
示例1：
输入 5
输出 4
说明: 5表示计费表的表面读数。4表示实际产生的费用其实只有4块钱。
示例2：
输入 17
输出 15
说明 : 17表示计费表的表面读数。15表示实际产生的费用其实只有15块钱。
示例3：
输入 100
输出 81
说明: 100表示计费表的表面读数。81表示实际产生的费用其实只有81块钱。
3、
有一棵二叉树，每个节点由一个大写字母标识(最多26个节点）。现有两组字母，分别表示前序遍历（父节点->左孩子->右孩子）和中序遍历（左孩子->父节点->右孩子）的结果，请你输出后序遍历（左孩子->右孩子->父节点）的结果。

输入
每个输入文件包含两串字母，各占一行。（每串只包含大写字母）
第一行字母表示前序遍历结果，第二行字母表示中序遍历结果。

输出
输出仅一行，表示后序遍历的结果，结尾换行。

样例
输入样例 1 复制

DBACEGF
ABCDEFG
输出样例 1

ACBFGED

六视频一面+笔试（上海）

1、数组常用方法
2、js原型和原型链举例
3、js本地存储
4、BFC原理
5、promise.all，异步任务多到挤爆了连接上线处理
6、手写防抖节流
7、元素水平垂直居中
8、flex布局以及属性
9、bind call apply区别以及使用
10、同步与异步红任务与微任务
11、map与foreach
12、三种方法实现判断回文序列（手撕代码）
13、红任务与微任务具体实例以及js题目（代码）
14、实现左右括号匹配（代码）用到栈，链表等
15、4道逻辑题 10道综合题（php，linux，java等）10道前端两道代码一道大逻辑画出图
有个7公斤的桶和9公斤的桶实现称8公斤的水
16、二维码登录三端逻辑 pc，pad端，web端权限控制处理
17、为什么做前端
18、遇到技术问题常用的搜索网站
19、h5新特性
20、js数据类型转换机制
21、em和px
22、

五视频面试（深圳）

1、链表
2、原型链
3、自定义指令
4、封装axios，注意请求头
cookie的传入
5、按钮级别的权限控制
6、跨域处理，不修改前后端代码的情况下处理跨域
7、项目部署
8、盒子模型
9、em和px
10、元素水平垂直居中
11、手写三角形
12、字体小于12px
13、tcp三次握手和四次挥手
14、按需引入
15、无线通信方式
16、大学学的最好的科目
17、物联网小车通信实现
18、物联网小车循迹
19、很多物联网的概念和知识捡起来
20、

四业务代码面试（深圳）

实现效果：
在这里插入图片描述

<!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>部门/员工选择</title>
</head>

<body>
  <div id="app">
    <div class="title">请选择部门/员工</div>
    <div class="form">
      <div class="department-box">
        <ul>
          <li v-for="item in departments">
            <input type="checkbox" v-model="department" :value="item.id"
              @change="handleDepartmentChange($event,item)" />
            {{item.name}}
            <span v-if="item.show" class="cursor" @click="item.show=false">
              -
            </span>
            <span v-if="!item.show" class="cursor" @click="item.show=true">
              +
            </span>
            <ul v-if="item.show" class="user-list">
              <li v-for="cell in item.users">
                <input type="checkbox" v-model="user" :value="cell.id" @change="handleUserChange($event,item,cell)" />
                {{cell.name}}
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    {{JSON.stringify(showData)}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.4/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          department: [],
          user: [],
          departments: [
            {
              id: 1,
              name: '部门1',
              show: true,
              users: [
                { id: 1, name: '小一' },
                { id: 2, name: '小二' },
                { id: 3, name: '小三' }
              ]
            },
            {
              id: 2,
              name: '部门2',
              show: true,
              users: [
                { id: 4, name: '小四' },
                { id: 5, name: '小五' },
                { id: 6, name: '小六' }
              ]
            },
            {
              id: 3,
              name: '部门3',
              show: true,
              users: [
                { id: 7, name: '小七' },
                { id: 8, name: '小八' },
                { id: 9, name: '小九' }
              ]
            }
          ]
        }
      },
      computed: {
        showData() {
          let choosedDepartmentUserId = []
          this.departments.forEach(item => {
            if (this.department.indexOf(item.id) > -1) {
              item.users.forEach(user => {
                choosedDepartmentUserId.push(user.id)
              })
            }
          })
          return {
            department: this.department,
            user: this.user.filter(item => {
              return choosedDepartmentUserId.indexOf(item) == -1
            })
          }
        }
      },
      methods: {
        handleDepartmentChange(ev, item) {
          const checked = ev.target.checked
          if (checked) {
            item.users.forEach((cell) => {
              if (this.user.indexOf(cell.id) === -1) {
                this.user.push(cell.id)
              }
            })
          } else {
            item.users.forEach((cell) => {
              const index = this.user.indexOf(cell.id)
              if (index !== -1) {
                this.user.splice(index, 1)
              }
            })
          }
        },
        handleUserChange(ev, item, cell) {
          const checked = ev.target.checked
          if (!checked) {
            this.department.splice(this.department.indexOf(item.id), 1)
          } else {
            let num = 0
            item.users.forEach((user) => {
              if (this.user.indexOf(user.id) > -1) {
                num++
              }
            })
            if (num === item.users.length) {
              this.department.push(item.id)
            }
          }
        }
      }
    })
  </script>

  <style>
    .cursor {
      cursor: pointer;
    }

    ul,
    li {
      list-style: none;
    }

    .user-list li {
      display: inline-block
    }
  </style>
</body>

</html>

三笔试面试（杭州）

<!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>
</head>
<body>
    <script src="">
        2
        console.log(1&&2&&3);//3
        console.log(1||2||3);//1
    </script>
    <script src="">
        3
        var arr=[1,2,3,4,5]
        for(var i=0;i<arr.length;i++){
            arr[i]=function(){
                console.log(i);
            }

        }
        arr[3]()//5
    </script>
    <script src="">
        4
        const shape={
            redius:10,
            diameter(){
                return this.redius*2
            },
            perimeter:()=>2*Math.PI*this.radius
        }
        console.log(shape.diameter());//20
        console.log(shape.perimeter());//NaN
    </script>
    <script src="">
        5
        let a={greeting:'Amy'}
        let b={greeting:'Bruce'}
        let c={greeting:'Cathrine'}
        Object.assign(b,a)
        console.log(b.greeting);//Amy
        c=b
        console.log(c.greeting);//Amy

    </script>
    <script src="">
      6
      console.log(3+4+"5"+6);  //756
    </script>
    <script src="">
        7
        let number=0
        console.log(number++);//0
        console.log(++number);//2
        console.log(number);//2
    </script>
    <script src="">
        8
        const obj={
            a:'one',
            b:'two',
            a:{
                a:'three'
            }
        }
        console.log(obj);//{a:{a:three}b:two}
    </script>
    <script >
     9
     [[0,1],[2,3]].reduce(
        (acc,cur)=>{
            return acc.concat(cur)
        },
        [1,2]
     )
     //120123
    </script>
    <script src="">
        10
        const user ={name:"Lily",age:21,admin:false}
        const admin={admin:true,...user}
        console.log(admin);//{admin:false,name:"Lily",age:21}
    </script>

</body>
</html>

二视频面试（深圳）

1、get与post

2、http 以及http

3、http常见状态码

4、地址栏输入url

5、深拷贝和浅拷贝

6、作用域链

7、原型和原型链

8、箭头函数

9、js的本地存储

10、生命周期

11、组件之间通信

12、vue-router

13、盒子模型

14、css选择器

15、两栏布局，中间自适应

16、为什么不留在实习公司

17、为什么选择前端

一模拟面试

1、说说你这个项目
2、说一说diff算法（数据怎样实现更新的具体过程）
3、说一说生命周期函数（偏底层框架）
4、说一说你了解的算法
5、你有什么想问我的吗
公司业务和公司技术栈
6、来我们公司之前有没有收到offer
7、为什么不满意之前的offer，是因为薪资还是其他原因
8、作为管理层，如何管理
9、以后的职业规划
10、别的offer拿到多少的薪资，预期薪资是多少
11 对我们公司的印象度
12、你有什么想问我的吗
上下班时间，福利制度