前端面试总结（202207应届）

alyx111
236 阅读4分钟

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

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

输入描述:

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

输出描述:

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

示例2

输入

([]{()})

输出

3

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

五 视频面试（深圳）

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、很多物联网的概念和知识捡起来

四 业务代码面试（深圳）

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

<!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、你有什么想问我的吗
上下班时间，福利制度

avatar
文章
阅读
粉丝