面试题汇总

63 阅读 0 评论 42 点赞

我是靠谱客的博主笑点低裙子，最近开发中收集的这篇文章主要介绍面试题汇总，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

天鹅到家：

1、es5的继承方式有哪些？
2、vue-router路由模式有什么？实现原理是什么
3、vue-x的核心原理是什么
4、改变this的方法有什么
5、flex布局的一些属性
6、前后端交互时候cookie跨域如何携带
7、axios如何处理携带cookies
8、http的状态码，304、301、302分别是什么意思
9、TCP和UDP区别是什么？
10、TCP是怎么做到保证数据传输正确的
11、前端在XSS、XSF防御是如何做的
12、前端是如何优化的

编程题：
1、

/* 
实现一个next()
例如：  var next = setup([1, 2,3, 4,5,6, 7])
依次调用 next()，分别输出1，2，3，4，5，6， 7; 
*/


function setup(array) { 
}


var next = setup([1, 2,3, 4,5,6, 7])



console.log(next())
console.log(next())
console.log(next())
console.log(next())

实现

function setup(arr) {
  let i = 0;
  return function() {
    ++i;
    return arr[i]
  }
}

const arr = [1, 2, 3, 4, 5, 6, 7];

var next = setup(arr)

2、

/*
function ListNode(x){
    this.val = x;
    this.next = null;
}
输入：
{1,2,3}
复制
返回值：
{3,2,1}

*/
function ReverseList(pHead)
{
    // write code here
}

const res = ReverseList(node1)
console.log(res)

美团一面：

1、项目中遇到的挑战
2、301和302有什么区别
3、浏览器在接收到301和302的时候是如何处理的
4、强缓存和协商缓存
5、协商缓存在浏览器中是如何判断的
6、说一下对cdn的理解
7、有cdn的资源和没有cdn的资源有什么区别
8、如何理解二叉树
9、说一下浏览器的同源策略
10、不同的浏览器同源策略有什么不一样吗
11、浏览器安全方面还做了什么
12、https的加密解密过程
13、进程和线程的关系
14、XSS的攻击方式是什么？如何实现过程
15、如何判断一个对象是否有某个属性
16、如何判断这个属性是实例上还是原型上的呢
17、__proto__和prototype怎么理解
18、箭头函数和普通函数有什么区别
19、esModule和commonJs的差异是什么

2021.8.9

方舟医药：

1、写一个深拷贝
2、写一个节流函数
3、vue的每一个生命周期都做了什么
4、箭头函数和普通函数的区别
5、…………忘记了，都是比较基础的题

阿里健康一面:

1、项目亮点
2、前端做过哪些性能优化
3、首屏优化
4、页面向下滚动卡顿的原因有可能是什么？
5、哪些资源可以使用cdn引入，如何判断
6、前端监控有做过什么

7、编程题：
(1) 、实现reverse()传入第一个节点node1，输出node3


const node3 = { val: 3, next: null }
const node2 = { val: 2, next: node3 }
const node1 = { val: 1, next: node2 }

function reverse(startNode) {
  while (startNode.next) {
    startNode = startNode.next
  }
  return startNode;
}

console.log(reverse(node1));

(2)、实现一个防抖函数

function debounce(fn, delay) {
   let timer = null;
   return function (...arg) {
     timer && clearTimeout(timer);
     timer = setTimeout(() => {
       fn(...arg)
       clearTimeout(timer);
     }, delay);
   }
 }

青子未来

1、项目亮点
2、tree-shaking如何配置
3、微任务api有哪些
4、vdom-dom的过程
5、webpack配置当一个boundle文件大于1M新打一个文件如何配置
6、grid布局中的fr是什么意思
7、输出什么下面编程题

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

8、

// 这里做了什么操作？如何实现

const arr = [
    ['a', 'b', 'c'],
    ['a', 'd'],
    ['d', 'e'],
    ['f', 'g'],
    ['h', 'g'],
    ['i']
]
// 运行后的返回结果是：
[
    ['a', 'b', 'c', 'd', 'e'],
    ['f', 'g', 'h'],
    ['i']
]

9、配置什么属性可以实现强缓存
10、知道cache-control吗？有哪些属性，什么意思
强缓存、协商缓存

2021.8.10
中科院

都是vue当中比较基础的使用

元保数科

1、minixs混入策略
2、css盒模型
3、清除浮动方式
4、BFC
5、position属性值
6、跨域产生的原因以及如何解决
7、强缓存和协商缓存
8、数据类型的判断
9、深拷贝和浅拷贝的区别
10、object.assisn()是深拷贝还是浅拷贝
11、slice()是深拷贝还是浅拷贝(面试官说是浅拷贝，存在疑问)
12、箭头函数和普通函数区别
13、new操作符做了什么
14、vue响应式
15、computed和watch区别
16、nextTick的原理(高频题)
17、JS事件循环
18、重绘、回流
19、vue data组件中为什么是函数
20、webpack在打包构建有做过什么优化吗
21、组件如何按需加载

国美：

1、react16.3版本废弃了哪些生命周期
2、闭包的理解
3、浏览器输入了url回车之后发生了什么
4、call和apply的区别
5、css中的scope为什么可以实现局部作用
6、父子组件初始化和销毁时候顺序(生命周期)
…………等等，其他都是很基础的vue的一些使用

小米–事业创新部：

1、自我介绍
2、手写promise
3、js事件循环
4、v-if/v-show区别
5、vnode是什么样的
6、vuex的数据流
7、为什么使用mutation改变state？直接修改state会生效吗
8、async/await和promise区别
9、const和let区别
10、webpack打包构建过程
11、loader和plugin区别
12、style-loader和css-loader做了什么
13、css中的px，rem，em，vw，vh

编程题：
1、输出顺序

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(function () {
  console.log("setTimeout");
});

async1();

new Promise(function (resolve) {
  console.log("promise1"); 
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

2、手写flat方法

Array.prototype.flat2 = function(num) {
  let arr = this;
  const target = [];

  return fn(arr)

  function fn(arr) {
    if (num >= 0) {
      for (let m = 0; m < arr.length; m++) {
        if (!Array.isArray(arr[m])) {
          target.push(arr[m])
        } else {
          num--
          fn(arr[m])
        }
      }
    } else {
      target.push(arr)
    }
    return target
  }
}

console.log(arr.flat2(3));

// 这个方法还有一点小问题

2020.08.11

百度一面
1、自我介绍
2、项目亮点
3、项目中如何做登陆验证
4、rem原理
5、webpack配置过哪些
6、loader和plugin区别
7、plugin可以替代loader吗
8、webpack有做过哪些打包优化吗
9、说一下浏览器的缓存机制
10、协商缓存有几种
11、多个link标签执行渲染顺序
12、script标签如何加载不阻塞
13、async和defer区别？会有什么后果
14、如何做到不同屏幕下的绝对的1px
15、css的transform和animation区别

算法题，实现一个数组回环

一个数组，输入一个key值，则向后移动key个位置，并且后面的数字移动到前面
例如：
输入：3
得到：5，4，3，1，2

const arr = [1, 2, 3, 4, 5] // 回环数组

  function fn(num, arr) {
    const length = arr.length;
    const handlerNum = [];
    num = num > length ? num % arr.length : num;
    for (let i = 1; i <= num; i++) {
      handlerNum.push(arr.pop())
    }
    arr.unshift(...handlerNum)
  }

  fn(3, arr)

顺丰同城一面

1、手写promise.all()

function promiseAll(arr) {
    const promisesLength = arr.length;
    const resArr = [];
    let count = 0;
    return new Promise((resolve, reject) => {

      for (let i = 0; i < promisesLength; i++) {

        arr[i].then(res => {
          resArr.push(res)
          count++;
          if (count === promisesLength) {
            resolve(resArr)
          }
        }).catch(err => {
          reject(err)
        })

      }

    })
  }

2、公共组件如何共享
3、如何区分宏任务和微任务
4、webpack打包构建过程
5、什么是复杂请求
6、css中的pisition的值
7、css盒模型
8、如何将标准盒模型修改成按照怪异盒模型渲染
9、es6常用的方法
10、编程题：

洗牌
题目：一副牌 52张，打乱顺序，并且计算出时间和控件复杂度

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5,]

  fn()
  function fn() {
    const lengh = arr.length;

    for (let i = 0; i < 52; i++) {
      const num = parseInt(Math.random() * 52);
      const newArr = arr.splice(num, 1);
      arr.push(...newArr)
    }

    console.log(arr);
  }

2020.08.12

360 (一二面一起)

1、手写防抖函数
2、数据基本数据类型
3、如何解决跨域
4、为什么使用代理可以解决跨域
…………现场面试，没有记录，都忘记问了什么问题了

天眼查一面

1、输入url到浏览器渲染的过程，发生了什么
2、浏览器的缓存说一下(强缓存、协商缓存)
3、如何解决跨域
4、说一下回流、重绘哪些会引起回流重绘
5、vue的数据响应
6、说了一下promise的原理(针对某一个方法讲)
7、算法题：两数之和

领创集团一面

编程题：
实现一个removeClass的方法删除dom中的class属性


// 源数据
  <div class="box" style='width: 100px;'>
    123
    <span class="box1"></span>
  </div>
 // 下面的对象代表这个dom结构
const source = {
    tag: 'div',
    children: [
      123,
      {
        tag: 'span',
        children: [],
        attrbuits: [
          {
            key: 'style',
            val: 'width:100px'
          },
          {
            key: 'class',
            val: 'box'
          }
        ]
      }
    ],
    attrbuits: [
      {
        key: 'style',
        val: 'width:100px'
      },
      {
        key: 'class',
        val: 'box'
      }
    ]
  }


// 目标数据
  <div style='width: 100px;'>
    123
    <span></span>
  </div>

const source = {
    tag: 'div',
    children: [
      123,
      {
        tag: 'span',
        children: [],
        attrbuits: [
          {
            key: 'style',
            val: 'width:100px'
          }
        ]
      }
    ],
    attrbuits: [
      {
        key: 'style',
        val: 'width:100px'
      }
    ]
  }

function removeClass(rootNode){
// 使用递归实现
  for(node in rootNode) {
    if(node === 'attrbuits') {
      rootNode[node].forEach((element,index) => {
        if(element['key'] === 'class') {
          rootNode[node].splice(index,1)
        }
      });
    }else if(node === 'children') {
      rootNode[node].forEach((element,index) => {
        if(typeof element === 'object') {
          removeClass(element)
        }
      })
    }
  }
  return rootNode;
}