2021年9月面试

浮木_
266 阅读9分钟

vue

  1. vuex属性
  2. keepalive
  3. 父子组件传值
  4. 路由钩子有哪些
  5. 计算属性和watcher区别
  6. vue事件绑定原理
  7. v-for 的key 有什么作用
  8. v-if和v-for能一起使用吗
  9. v-if和v-show的区别
  10. vue内置指令
  11. vue生命周期父子组件执行顺序
  12. vue生命周期每一个钩子函数都做了什么
  13. 如何异步触发state中的数据
  14. 路由懒加载的几种方式
  15. 如果有100个组件怎么做
  16. 打包的时候所有的组件都打包到main.js中吗
  17. vuex说一下
  18. Vuex有什么缺点：刷新状态恢复 通过插件或者本地存储
  19. keep-alive用过吗
  20. keep-alive对应的钩子函数，使用keep-alive的组件mounted还执行吗
  21. vue中key的作用，为什么不建议绑定index
  22. vue路由说一下跳转方式/参数，路由hash和history的原理
  23. vue data为什么是个函数，vue实例可以是个对象吗？为什么，因为只有一个不存在复用
  24. vue组件通信几种方式
  25. events bus如何使用的？原理？
  26. vue的diff算法原理
  27. vue中watch的第二个参数是什么
  28. vue为什么不能监听数组的变化
  29. v-if写在子组件上，设置true或false时，会走子组件的生命周期吗
  30. vuex在组件内部如何使用
  31. vue中element-ui的表单组件是如何实现双向数据绑定的
  32. vue路由传参的方式有哪些？有什么区别？
  33. vue路由跳转的方式
  34. 对vue的理解
  35. vue请求接口在哪个生命周期
  36. vue箭头函数中this指向问题
  37. vue中路由配置
  38. vue兄弟组件之间传值pubsub
  39. echarts获取数据一般在mounted里，为什么不能在created上？ echarts需要挂载到dom节点上，created此时是虚拟的节点
  40. vue项目中的跨域问题遇到过吗

js

  1. 数据类型
  2. 检测数据类型的方法
  3. instance of 原理是什么
  4. typeof null 是什么？为什么是空对象
  5. 深拷贝和浅拷贝
  6. 原型和原型链
  7. new 都做了什么
  8. 防抖和节流区别
  9. bind call apply 区别
  10. js继承有哪些方式
  11. js执行机制
  12. promiss和settimeout哪个先执行
  13. await 和async 
  14. Async返回的是什么
  15. await 返回的是什么
  16. 如果await后面还会执行吗
  17. promise的使用
  18. var let const 区别和用法
  19. js数组的方法哪些可以改变原数组？哪些不会改变原数组
  20. Js数组遍历的方法有哪些
  21. 浅拷贝和深拷贝，深拷贝实现的方式有哪些？
  22. foreach如何跳出循环
  23. async、await、promise
  24. prototype和proto区别
  25. prototype和constructor什么区别

es6

  1. es6用过哪些
  2. es5和es6面向对象有什么区别

h5c3

  1. rem em px区别
  2. 如何使用rem
  3. rem布局原理
  4. flex 布局
  5. 水平垂直居中
  6. css3新属性
  7. 清除浮动的方法
  8. position有几个值
  9. 多栏布局
  10. 标准盒模型和怪异盒模型
  11. 设置css的时候，前面设置了padding值，后面再设置会直接覆盖掉
  12. css、less、sass的区别
  13. 响应式布局的实现方法和原理
  14. 设置透明度的方法
  15. 给一个div设置height为0，这个div还会显示吗
  16. 适配4K大屏怎么做的
  17. H5嵌入到钉钉下具体是怎么做的

布局

canvas

  1. canvas 原生用过吗
  2. echarts有封装过同类型的options吗
  3. 用canvas画个圆

项目

  1. 管理系统的权限怎么做的
  2. 组件封装是如何做的
  3. 跨域有哪些如何实现
  4. jsonp的跨域原理
  5. 介绍一下自己
  6. vue项目中做过哪些优化
  7. 数据请求怎么做的，请求拦截器和响应拦截器怎么做的
  8. 前端管理多个服务地址如何去做的，可以通过指令构建去修改
  9. 前端开发页面优化的方法
  10. axios依赖于多个数据接口的话怎么做
  11. 假如访问一个网址慢，前端可以从哪些方面定位引起的该问题
  12. 前端发到生产环境发现有些新的东西没有更上去怎么办
  13. 前端上线工具
  14. 前端展示一千张照片懒加载
  15. 一个项目如果想手动选择主题色如何去做，不使用插件

微信小程序

  1. 微信小程序分包
  2. 微信登录流程
  3. 微信下载文件，存储满了怎么做
  4. 微信小程序权限如何做的
  5. 小程序发布上线的流程
  6. 微信页面下拉

git

  1. git常用指令
  2. git切换到远程分支

代码题

  1. Let a = 10 一个数字 let b = 20 不使用第三个变量的时候如何让a=20 b=10

  2. 数组去重的方式有哪些，es6中有个new Set(arr);map和filter/双层for循环

  3. forEach和map的区别

  4. forEach如何跳出循环 如何终止循环 break continue

  5. 数组冒泡除了双层for循环还有什么，比如一些方法可以直接实现的

  6. js数组中有从1-100任意十个字符串格式的数字，求和

  7. 数组里是对象，如何去重

  8. 两个数组，求其交集和差集

  9. 深拷贝实现方式

  10. 将一个json数据的所有key从下划线改为驼峰

    /**

 * 问题 1

 * 将一个json数据的所有key从下划线改为驼峰

 * @param {object | array} value 待处理对象或数组

 * @returns {object | array} 处理后的对象或数组

 */

const testData = {
    a_bbb: 123,
    a_g: [1, 2, 3, 4],
    a_d: {
        s: 2,
        s_d: 3
    },
    a_f: [1, 2, 3, {
        a_g: 5
    }],
    a_d_s: 1

}

function mapKeysToCamelCase(data) {

}

  11. 手写深度比较isEqual

    /**问题2
 * @decription 手写深度比较isEqual
 * @param param1   - any
 * @param param2   - any
 * @return Boolean
 * 例如：
 * isEqual(1,1) => true;
 * isEqual()
 */
// 比较任意两个类型，如果相等则输出true
function isEqual(a, b) {

}

  12. 将48位的时间位图格式化成字符串

    /**
问题3
 * 将48位的时间位图格式化成字符串
 * 要求：写一个函数timeBitmapToRanges，将下述规则描述的时间位图转换成一个选中时间区间的数组。
 * 规则描述：
 * 将一天24小时按每半小划分成48段，我们用一个位图表示选中的时间区间，
 * 例如`110000000000000000000000000000000000000000000000`，
 * 表示第一个半小时和第二个半小时被选中了，其余时间段都没有被选中，
 * 也就是对应00:00~01:00这个时间区间。一个位图中可能有多个不连续的
 * 时间区间被选中，例如`110010000000000000000000000000000000000000000000`，
 * 表示00:00-1:00和02:00-02:30这两个时间区间被选中了。

 * 示例输入：`"110010000000000000000000000000000000000000000000"`
 * 示例输出：`["00:00~01:00", "02:00~02:30"]`
 */
function timeBitmapToRanges(bitmap) {

}

  13. 输出顺序

    var now = new Date()
console.log('1', new Date() - now)
setTimeout(() => {
    console.log('2', new Date() - now)
}, 500)
Promise.resolve().then(console.log('3', new Date() - now))
while (new Date() - now < 1000) {}
console.log('4', new Date() - now)

// "1" 0
// "3" 0
// "4" 1001
// "2" 1001

  14. 将数组[1,2,3,[7,9],[8,9,[10,1]]]输出[1,2,3,7,9,8,9,10,1]，扁平化处理

    console.log(arr.flat(Infinity))

  15. 输出顺序

    const myPromise = () => Promise.resolve("I have resolved")
function FirstFun() {
    myPromise().then(res => console.log(res))
    console.log('frist');
}
async function SecondFun() {
    console.log('second 1');
    console.log('second', await myPromise())
    console.log('second 2');
}
FirstFun();
SecondFun();

// "frist"
// "second 1"
// "I have resolved"
// "second" "I have resolved"
// "second 2"

  16. 页面展示内容

    // 展示内容

<template>
<div>
  <div>第一个值：{{text1}}</div>
  <div>第二个值：{{text2}}</div>
  <div>第三个值：{{text3}}</div>
  <div>第四个值：{{text4}}</div>
  <div>第五个值：{{text5}}</div>
</div>
</template>
<script>
export default {
  data () {
    return {
      text1: 'hello'
    }
  },
  computed: {
    text4: function () {
      return this.text2 + 'computed'
    }
  },
  created () {
    this.text2 = 'text2'
  },
  mounted () {
    this.text3 = 'text3'
  }
}
</script>

// 第一个值：hello
// 第二个值：text2
// 第三个值：
// 第四个值：text2computed
// 第五个值：

// text3 和text5报错
//  vue.esm.js?c9fd:628 [Vue warn]: Property or method "text3" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

  17. 输出内容

    var name  = 'The Window';
var object = {
  name: 'My Object',
  getNameFunc: function () {
    return function () {
      return this.name;
    };
  }
};
console.log(object.getNameFunc());
console.log(object.getNameFunc()());

// ƒ () {
//      return this.name;
//    }
// The Window

  18. 输出

    function test() {
  console.log(foo)
  console.log(bar)

  var foo = 'Hello'
  console.log(foo)

  var bar = function () {
    return 'world'
  }
  function foo () {
    return 'Hello'
  }
}
test()


//  ƒ foo () {
//    return 'Hello'
//  }
// undefined
// Hello

  19. 输出

    for (var i = 0; i<5; i++) {
  console.log('i', i)
  setTimeout(function() {
    console.log('iiii', i)
  }, 1000)
}

    image.png

一面

  1. import和link的区别
  2. vue生命周期
  3. 两栏布局左侧固定宽度，右侧自适应
  4. flex有哪些属性
  5. promise setTimeout async await执行顺序题
  6. css3新属性
  7. 盒模型的组成
  8. 前端展示一千张图片除了分页有什么方法
  9. vue中methods中的方法可不可以直接用箭头函数？为什么this指向
  10. js数据类型，基本数据类型和引用的区别
  11. 前端BFC
  12. 清除浮动的几种
  13. 垂直水平居中方式
  14. 媒体查询
  15. display有哪些属性
  16. display:none和visibility:hidden区别
  17. 元素隐藏的方法
  18. css优先级
  19. vue中data为啥必须是函数
  20. 原型和原型链
  21. this
  22. 闭包

二面

  1. cdn怎么使用的，有什么优化？如果遇到访问量特别大的话如何应对？大家都访问同一个带宽的话承受不住
  2. 前端优化相关的
  3. webpack的loader和plunge有什么区别为什么不设计一个为什么分开设计两个，loader轻量级的
  4. webpack中的loader怎么用具体
  5. 防抖和截流的区别
  6. 路由懒加载
  7. 路由如何根据不同的用户，控制权限
  8. 如果随意访问一个路由，不在权限内或者无法展示，怎么判断？对路由数组进行遍历如果不是就跳转到404页面
  9. vue页面一个img 绑定src 给个id 一个点击事件，此时去获取该图片的高度，然后给图片src赋值，再去获取图片的高度。这个时候是两次获取的是否一样？两次都没有高度，vue的异步渲染
  10. 打包优化如何使vendor文件变小的？比如一些文件直接放到dist文件下，不去进行压缩行不行？
avatar
文章
阅读
粉丝