面经

w世说心语
513 阅读21分钟

壹久壹久酒类直供

  1. css实现三栏布局：左右固定为300px，中间自适应，有多少种实现方法，如何实现 答案

  2. html，xhtml，xml有什么区别 详解

  3. 解释一下js原型和原型链有什么作用，实际工作中哪里会用到详解

    每个函数都有一个prototype属性，该属性指向函数的原型对象，原型对象中又有constructor属性指向构造函数本身，由于原型对象也是对象，所以又有一个__proto__属性指向该原型对象的原型。原型链由原型对象组成，每个构造函数都有一个原型对象，而原型对象中又包含一个指向构造函数的指针，而实例都包含了一个指向原型对象的指针，那么当原型对象是另一个类型的实例时，此时的原型对象将包含一个指向另一个原型对象的指针，如此便形成了原型对象的链条，也就是原型链。

  4. 有多少种方式实现继承 答案

  5. call，apply有什么区别，有什么优缺点 答案

  6. 创建一个对象有多少种方式 答案

  7. 当你在new一个对象的时候，它都做了什么事情

    1. 先创建一个新的空对象；
2. 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象；

  8. 箭头函数和普通函数的区别，什么时候必须用普通函数 答案

    1. 箭头函数作为匿名函数，是不能作为构造函数的，不能使用new；
2. 箭头函数会捕获所在上下文中的this值，来作为自己的this值；
3. 箭头函数没有绑定arguments，取而代之的是rest参数，...来接解决；
4. 使用call和apply调用时，只相当于传入了参数，对this并没有影响；
5. 箭头函数没有原型属性；
6. 箭头函数不能当做generator函数，不能使用yield关键字；
7. 箭头函数不能换行；
8. 箭头函数当方法使用的时候没有定义this绑定;
例：
1.
let obj1 = {
    age: 19,
    children: {
        name: 'zjx',
        getData: () => {
          console.log(this)
        },
        normalFunc: function () {
          console.log(this);
        }
    }
}
obj1.children.getData() // window
obj1.children.normalFunc() // children{...}
2.
let obj2 = {
    a: 10,
    b: () => {
        console.log(this); 
    },
    c: function() {
        console.log(this); 
    }
}
obj2.b(); // window
obj2.c(); // obj2{...}

  9. var声明和关键字声明函数有什么异同，有什么优缺点

    var和function都会有命名提升，但function的优先级更高，会被提升到最顶部，而var次之，会被提升到function之后，所谓一人之下，万人之上也许就是这种感觉吧

  10. 什么情况下会导致跨域 答案

    协议+域名+端口 相同才不会导致跨域，跨域是由浏览器同源策略导致的，这是浏览器中重要的安全策略，如果没有则会导致XSS，CSFR等攻击

  11. 实现跨域的方式有哪几种

    • jsonp，原理：动态创建script标签，利用script标签的src属性实现跨域
    • CORS 后端直接设置CORS为可跨域访问的域名即可
    • nginx 反向代理跨域

  12. 后端跨域是如何实现的

  13. 代理的原理是什么

  14. 浅拷贝和深拷贝如何实现，有多少种实现方法，什么时候会用到

    • Object.assign()
    • 展开运算符（...）
    • JSON.parse(JSON.stringify(obj))
    • 借助第三方库(lodash中的deepClone()或者jquery中的深拷贝)

  15. ES6了解哪些

  16. var let const的区别是什么

    var a;
{a = 5}
console.log(a) // 5

let a;
{a = 5}
console.log(a) // 5

const a; // 报错
{a = 5}
console.log(a)

    var声明会有命名提升，let和const是ES6中新增的块级作用域，let声明变量，const声明常量

  17. ES7了解哪些呢

    async await：这是ES6中generator的语法糖

  18. const内部原理是什么, 为什么const声明的常量不可改变

  19. nginx有了解过吗，他有什么特点

  20. 什么是反向代理，什么是正向代理 答案

  21. nginx能解决跨域问题吗

  22. localStorage,sessionStorage,cookie有什么区别 答案

  23. 如果登陆了一个单页应用，我复制地址到浏览器的另一个窗口，能否继续使用之前的登陆信息

  24. 哪些能够实现关闭浏览器后，下次打开浏览器不用重新登陆

  25. 写一个ajax请求，工作中有没有自己封装过ajax

    let ajax = new XMLHttpRequest()
ajax.open('GET', url)
ajax.send()
ajax.onreadystatechange = function(){
    if(ajax.readyState === 4 && ajax.status === 200){
        console.log(ajax.responseText)
    }
}

  26. jquery ajax、axios和fetch的特点，实际工作中如何选型，他们的原理是什么 答案

    jquery ajax:

    优点：
    1. 支持了jsonp，非常方便；
缺点：
    2. 本身是针对MVC的编程，不符合现在前端MVVM的浪潮
    3. 基于原生XHR开发，XHR本身的架构不够清晰，已经有了fetch的替代方案；
    4. jquery整个项目较大，单纯使用ajax却要引入整个jquery非常的不合理

    fetch: 号称是ajax的替代品，他的api是基于Promise设计的，旧版本的浏览器不支持Promise，需要使用polyfill es6-promise

    优点：
    1. 复合关注分离，没有将输入、输出和用时间来跟踪的状态混杂在一个对象里；
    2. 更好更方便的写法
    3. 更加底层，提供丰富的api；
    4. 脱离了XHR，是ES规范里新的实现方式；
缺点：
    1. 只对网络请求报错，对400、500都当作成功请求，需要再封装处理；
    2. 默认不会带cookie，需要添加配置项；
    3. 不支持abort，不支持超时控制，使用setTimeout及Promise。reject实现的超时控制并不能阻止请求过程继续在后台执行，造成浪费；
    4. 没有办法监测请求的进度，而XHR可以

  27. vue和react区别 详解

  28. vue实现的原理是什么

  29. react有哪些生命周期

  30. 当子组件或者父组件数据发生改变时，react中父子组件生命周期执行顺序

    • 改变父组件中的状态
    • 改变子组件中的状态

  31. 组件卸载时先卸载父组件还是子组件

  32. redux跟vuex的原理以及区别是什么 详解

  33. 有没有自己配置过webpack，webpack中的优化做过哪些 详解

  34. typescript用过吗，有什么特点

  35. koa和express有什么区别

  36. koa中如何返回给客户端数据

  37. 数据库了解哪些：mongodb ，mysyqal

  38. 接触过哪些算法相关的东西：例如递归

客如云

这家公司是一家叫法本的人员外包公司让我去面试的，听到人员外包我本来是不想去的，但是想着多点大公司面试经验总是好的，找了个由头请了一上午的假就溜过去了，面试在四楼，办公环境还ok吧，虽不如壹久壹久那么豪华，但也比我现在的公司要亮堂不少，再怎么说那也是在天府四街那么新的办公区域，听说停车费一天才五块钱，想想还有点小激动，

  • 先做了一套面试题
    1. 描述css reset的作用和用途
    2. 列出position的值，relative和absolute的定位原点是？
    3. 解释jsonp的原理（动态创建script标签）
    4. js延迟加载的方式有哪些（defer，主要是想考这个）
    5. 实现一个深拷贝函数clone() 
      clone(obj) {
    let result;
    if(typeof obj === 'object'){
        if(Array.isArray(obj)){
            result = []
            for(let i in obj) {
                result[i] = clone(obj[i])
            }
        }else if(obj===null){
            result = null
        }else if(obj.constructor === RegExp){
            result = obj
        }else{
            restlt = {}
            for(let i in obj) {
                result[i] = clone(obj[i)
            }
        }
    }else{
        result = obj
    }
    return result
}
      写成这样应该可以的分了吧，虽然有挺多的情况没有考虑到，但实际生产环境一般也不会用自己封装的函数来实现深拷贝吧，这道题只要把循环递归的思想表达出来应该就没问题了
    6. 执行结果
    var a = [0];
if([0]){
    console.log(a==true)
}else{
    console.log('wut')
}
// false

    function sidEffecting(ary){
    ary[0] = ary[2]
}
function bar(a,b,c){
    c = 10;
    sidEffecting(arguments);
    return a+b+c
}
bar(1,1,1) 
// 21
  • 然后就是面试阶段了
    1. js延迟加载的方法（因为我在笔试中没有写完整，所以面试中问到了）
    2. 深拷贝和浅拷贝的区别 
      浅拷贝只能拷贝对象的第一层级，更深层级还是直接复用之前的对象的引用地址
深拷贝是直接拷贝整个对象，无论层级有多深，拷贝为完全一样的另一个对象
    3. react和vue的区别 答案
    4. setState()方法是同步的还是异步的
    5. setState()的设计方式有什么作用
    6. redux-saga跟redux-thunk有什么区别
    7. dva了解多少
    8. react中合成事件和原生事件的区别 答案
    9. vue中的nextTick有什么作用
    10. 强制缓存和协商缓存有什么区别 答案

西南凯亚

疫情期间一切从简，电话面试，其实问的这些面试题我都能答上来，只是电话里有些不能及时理解到面试官想要考什么，所以有的问题回答的并不完美

面试开始，首先简单介绍自己，就说了下工作经历

  1. react项目是怎么创建的，用的create-react-app还是ant-design-pro？

  2. redux都有哪些关键点（这里因为使用的是ant-design-pro，所以我把问题迁移到了dva中封装的redux）？

  3. 讲一下react中的受控组件和非受控组件的区别？（） 受控组件是在react中处理输入表单的一种技术，表单元素通常维护他们自己的状态，而react则再组件的state属性中维护自己的状态，我们可以将两者结合起来控制输入表单，这称为受控组件。还有一种称为非受控组件的方法可以通过使用Ref来处理表单数据，在非受控组件中，Ref用于直接从DOM访问表单数据。

  4. 讲一下react hooks的特点

  5. react的setState之后发生了什么？（这个题当时脑子卡了，后来发现是真不知道）

    1. 代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。
    2. 经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；
    3. 在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染；
    4. 在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

  6. react中的key有什么作用？（这里跟虚拟DOM以及diff有关）

  7. react项目中用的是js还是ts？（这个问题应该是想问关于ts方面的问题，可是我真没在项目中用过，不敢吹牛，怕把自己套进去，就说自己私下看过就行了）

  8. 遇到过跨域问题吗？（这个问题老生常谈，但遇到的真不多，传说中的jsonp我也从未用过，但我们必须知道原理）webpack跨域原理

  9. js基础怎么样？（我认为还行吧，毕竟我刷了几天js基础的面试题）

  10. __proto__跟prototype有什么区别？（这不就是问原型吗，把原型和原型链，甚至可以扯到继承，统统给面试官理一遍就完事）

  11. 如何改变this指向？（call，apply，bind区别讲一遍估计也没啥问题了，也可以说到箭头函数没有属于自己的this，new关键字将this绑定到新创建的对象）

  12. 宏任务和微任务了解过吗？（执行宏任务，遇到微任务会先把微任务执行完，然后再去执行宏任务，如此循环往复，直到没有任务可执行了，这里需要列举一下微任务跟宏任务分别有哪些）

  13. 数组去重？（电话面试中讲到Set应该就可以了，但现场面试可能有要求要手写的，所以两种都掌握一下比较好）

  14. Set有局限性吗？（都这么问了，当然有啊，我当时是这样说的，它可能面对一些复杂结构的数组就无法实现去重效果了）

  15. 如何知道两个简单对象是否完全相等？

    JSON.stringify(obj) // 这是面试官给出的答案，即转换为字符串然后对比是否相等

    但上面这种方法也有局限性，当对象中的key顺序不相同时，两个对象也是不相等的。

    这里我自己牵引出了深拷贝，并讲了实际生产环境中应当使用lodash中的deepClone来实现深拷贝，毕竟JSON.parse(JSON.stringify())在对象中出现函数、undefined、symbol都无法拷贝，循环引用也会报错。

  16. 如何判断一个值是否为数组？

    Array.isArray()

  17. 用过数据可视化图表吗?

    必须用过啊，echarts，highcharts，还有阿里的那个什么名字我忘记了

  18. 用过webscoket吗？在什么情景下使用的？

    必须用过啊，话说我封装的播放控件至今没出过bug，根据自己实际使用情况来说吧，最好细讲一下websocket，这可能会是面试官想听的，但我没讲，因为我感觉到面试官只是想知道我是否用过。

    面完没谈工资，是不是凉凉了，我感觉不应该啊，我表现的虽然不是优秀的一匹，但也绝不是菜ji吧，嘻嘻，静候佳音吧，毕竟国企流程走的贼慢

    越努力越幸运，我已经体会到努力带来的快乐了，大家一起加油！

成都任我行

  • CSS
    1. 水平居中和垂直居中的方法有哪几种？ 答案
    2. flex布局中常用属性有哪些？
    3. 清除浮动的方法
    4. 实现两栏布局的方法有几种
  • JS
    1. ES6用过哪些？
    2. javascript中数据类型有哪些？
    3. Array中有哪些常用的方法？
  • React
    1. React中用什么实现的状态管理？
    2. React中有a，b两个组件，ab为同一页面的兄弟组件，a组件状态发生了改变，b组件的render函数会执行吗？

成都魔方元科技

  1. http有了解吗
  2. 做过哪些浏览器性能优化
  3. vue和react在数据传递方面有什么区别
  4. react为什么不使用mixin了呢
  5. react为什么会使用hooks
  6. react和vue中为什么会使用vuex和redux这些库呢
  7. 说一下react中的高阶组件
  8. 前端安全方面了解哪些
  9. 公司的项目架构是谁来搭建
  10. 高阶组件叫做什么设计模式

成都i车保信息技术有限公司

先说点啥，这是我面过最久的一家公司，91分钟，我每一分钟都在受教育，面完感觉以前的我只是一个写代码的工具人，并没有真正的理解过代码的本质。 最开始我先自我介绍了一番，还是老的那一套，也没啥特别之处。

开始了开始了

面试官第一问题：介绍一下自己最满意的一个项目 我：其实做项目也没有最满意之说了，这是一个从不好变好的过程，从只会用一些老旧的技术栈到学会并精通了新技术栈的一个过程，如果一定要说那个项目做的好的话，那也一定是最近做的一个项目了。

灵魂第二问：那你这个项目都用了哪些技术栈呢？ 我：React，Typescript，hooks...

leader：你们的项目都是用的什么脚手架呢？ me：create-react-app和ant-design-pro我都用过（这里也提到了因为自己就是负责前端项目的，所以想用什么就用什么，本来只是想假装自己会的挺多的，然而事情并没有这么简单）

leader：有没有尝试过自己写一个类似的脚手架呢？（我原以为会问我关于我说的哪两个脚手架的问题，没想带来这么一手） me：其实这些脚手架的本质也就是一些webpack配置，我虽然没有自己动手搭建过，但我觉得如果花一些时间应该也能做一个类似的库出来（其实根本就不会搭啦）

这里先给我绍了他们共用的脚手架，据说他们从来都不用我说的那俩啥，都是公司内部写的，说是因为别人的脚手架比较难去确认一些报错的原因，而自己开发的就知根知底，并且所有的东西都能按照自己的意思去做，新项目都使用了最新的typescript以及hooks，并且自己设计了项目结构，将项目中的usestate全部提出到一个文件夹中，然后再通过一个文件将它们都到处，再在各个文件中引用，这样就不用引入相对较重的redux了，说到这儿我还能说什么呢，有一句那啥想说却又咽了进去，这些都是我从未去想过的东西，你牛！

做过哪些优化方案：

  1. webpack打包有做过什么优化吗？
  2. 有用webpack写过plugin和loader吗 详解
  3. 有自己配置过引入sass或者less吗，知道webpack是怎么做到的吗
  4. react中key的作用
  5. 详细说明react中虚拟DOM是如何进行对比的
  6. react中的function Component，PureComponent，Compnent的区别是什么
  7. 说一下PureComponent是如何实现的
  8. 在你的项目中使用更多的是PureComponent还是shouldComponentUpdate?
  9. 在函数式组件中如何做性能优化呢
  10. setState是同步还是异步
  11. 你觉得setState为什么会被设计成这种模式呢
  12. 异步是如何实现的，你有自己的设计方案吗
  13. 浏览器相关的优化做过哪些呢
  14. 后端缓存（catch-control）
  15. 前端缓存（service workers）
  16. cookies为什么会被抛弃
  17. session和local有什么区别
  18. http版本进化中有什么关于优化方面的东西吗（不同版本之间的差异）
  19. 懒加载有自己动手实现过吗
  20. H5标签知道那些
  21. 做过SEO吗？（这个问题紧接着H5之后提出来，可能是我H5回答的太差了）
  22. css3属性知道哪些
  23. 如何使用flex实现三个盒子纵向排列布局
  24. flex有多少个值？
  25. flex-grow使用过吗
  26. 了解过ssr吗
  27. 当首页中有ajax请求的时候你考虑如何实现ssr？（这个问题回答不到也没关系，不负众望，我没回答到）
  28. react的生命周期讲一下呢（面试官说我说的是老版本的生命周期，一脸懵逼）
  29. 你一般如何使用typescript？
  30. 你在什么情况下使用枚举？
  31. 用typescript定义过api吗？
  32. echarts用的多吗
  33. vue的双向绑定解释一下呢（其实是想问vue响应式原理）
  34. Object.definPropty()这个方法实现的响应式有什么弊端吗？
  35. vue2.0中如何解决它所产生的的这个问题呢
  36. vue3.0中是如何解决这个问题的呢

成都企鹅综合门诊部有限公司

  1. react fiber知道吗？
  2. vue 中mixin是如何实现的？
  3. http响应头字段？
  4. vuex和redux有什么区别
  5. http和https有什么区别
  6. vue-router是如何实现跳转的？
  7. react render返回的是一个什么对象，如果返回字符串能够渲染吗？
  8. ES6中Map和Set有什么区别？
  9. 箭头函数和普通函数有什么区别
  10. react中使用箭头函数还是bind(this)?
  11. react中中间件有什么作用？

原力字节

前言：css真是我的痛点，这几天的面试都把这个问题暴露了出来，好好补一下了

  1. animation和transform的区别？ 答案
    • transform: 其实是静态样式，它一般需要配合transition和事件来实现动画
    • animation: 动画名称 动画执行时间 速度曲线 动画延迟时间 播放次数 是否反向播放
  2. css选择器知道哪些？
  3. css伪元素有哪些？
  4. position几个值？分别解释一下
  5. em，rem有什么区别？答案
  6. h5标签用过哪些？（header，footer，nav，section，aside，article）

浮游科技

这家公司再一次让我的css问题暴露了出来

  1. css清除浮动的方法有哪些？
    • 水平居中

      • 行内元素

        1. text-align: center;（父级元素必须是块级元素）

      • 块级元素

        1. .children {
    margin: 0 auto;
}

        2. .parent{
  display: relative;
}
.children{
  display: absolute;
  left: 50%;
  margin-left: -widthpx; // 必须是固定宽度的盒子
  transform: translateX(-50%); // 宽度已知未知都可以
}

        3. .parent{
    display: flex;
    justify-content: center;
}
    • 垂直居中
      • 行内元素
        1. 单行行内元素 
          .parent{
    height: 100px;
    line-height: 100px;
}
        2. 多行行内元素 
          .parent{
    display: table-cell;
    vetical-align: middle;
}
      • 块级元素 1. 
        .parent{
    position: relative;
}
.children{
    position: absolute;
    top: 50%;
    margin-top: -height; // 已知高度
    transform: translateY(-50%); // 高度已知未知都可以
}

        .parent{
    display: flex;
    align-items: center;
}
    • 水平垂直居中
      • 已知高度 1. 
        .parent{
    position: relative;
}
.children{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

        .parent{
    position: relative;
}
.children{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -width;
    margin-top: -height;
}
      • 未知宽高 1. 
        .parent{
    position: relative;
}
.children{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

        .parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
  2. css垂直和水平居中的方法有哪些？
  3. 媒体查询用的多吗
  4. 有做过页面适配吗
  5. 给了一个页面，问怎么布局排版的
  6. v-model怎么实现的
  7. 开发中如何解决跨域的，vue中如何解决跨域的
  8. 前端疯狂向后端发送请求是如何优化的？
  9. websocket是用过吗
  10. 如何在移动端绘制一条0.5px的线？ 10.如何从数组中删除一个元素？ 
    let arr = ['zjx', 'zy', 'hl', 'hml']
reomve('zy')
function remove(str) {
    let index = arr.indexOf(str);
    arr.splice(index, 1)
}
  11. 删除购物车中的商品（其实是从一个数组中删除几个选中的元素）？ 答案

盛趣时代

  1. css水平垂直居中
  2. 判断一个变量的类型？（不止是typeof和instanceof,这是我没想到的） 
    function getType(obj) {
    Object.prototype.toString.call(obj)
}
  3. react中的性能优化
  4. react hooks中的性能优化
  5. cookie，session storage，local storage，session的区别

微拍堂

变被动为主动，你问一个问题，我回答你相关的所有问题。这是我总结的面试经验。 微拍堂成都分部刚刚开始招人，公司应该是刚装修好吧，一切都很新，甲醛味很重，我喜欢。一位女面试官面的我，很温柔的小姐姐，公司主要用的react，所以一切围绕这个展开，加上我这两天做的功课，简直无缝衔接。

  1. react中key的作用
  2. react中在那个生命周期中发起请求
  3. react中link标签跟a标签区别是什么
  4. react中如何进行数据管理
  5. redux中的主要点
  6. 从输入url到页面返回中间经历了什么
  7. 有没有什么原因可能造成请求到不了服务器端（缓存）
  8. 工作中有没有做过前端性能优化
  9. 页面回退之后如何保存数据（lodash）

华栖云

  1. typeof会输出什么结果？
  2. 以下哪个选项会输出true？

艾欧比

  1. 优化首屏加载速度的方案有哪些？
  2. 如何给富文本加密？
  3. dns缓存

优卡

  1. vue中key的作用？
  2. vuex中有哪些关键点？
  3. rem是如何计算的？
  4. 如何获取链接上的参数

浩鲸科技

  1. 说说对前端工程化的理解？
  2. 项目如何发布的？
  3. 项目中如何监控线上错误？
  4. react中的setState在什么是同步的？
  5. 点击菜单中的已选中项如何实现刷新？
  6. 有一个很耗时的任务，如何优化它呢？
  7. 数组对象如何去重？
  8. typescript用过么？

瀚海天图

  1. 如何实现更好的seo？
  2. 使用js像DOM中添加十个div，有什么好的方案？
avatar
文章
阅读
粉丝