前端面试篇

爱装逼的程序员
407 阅读5分钟

1.个人介绍

各位小伙伴们大家好，自我介绍一下，我是一位两年半工作经验的前端程序员，从实习到现在，也经历过了不少的面试，下面我会面试中会问到的一些问题，给大家解答一下，希望对大家能有所帮助。

2.css面试篇

  1. 介绍一下盒子模型

  • 盒子模型有两种：IE 盒子模型(IE5.5及以下)，W3C标准盒子模型。

    内容(content)、填充(padding)、边框(border)、边界(margin) 。

  1. 写一个类似APP，底部固定，头部固定，中间滚动的布局，可以有什么方式？

  • flex布局

    最外层设置display: flex;flex-direction: column;

    顶部高度，底部高度不限定。

    中间部分设置flex: 1;overflow: auto

  • position定位布局

    通过position: fixed的方式做布局

  1. 说出几种内容居中的方式

前提： 页面宽度高度100%

  • display: flex;justify-content: center;align-items: center; flex方式居中
  • position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%); 宽高不固定
  • position: fixed;width: 50px;top: 50%;left: 0;right: 0;transform: translateY(-50%);margin: 0 auto; 宽度固定高度不固定（高度固定宽度不固定时同理）
  • position: fixed;width: 30px;height: 30px;top: 0;bottom: 0;left: 0;right: 0;margin: auto 宽高固定

4.CSS3的新特性

  • 圆角 border-radius: 10px
  • 透明度 opacity: 0
  • 旋转 transform
  • 动画 animation
  • 过渡效果 transition
  • 阴影 box-shadow
  • 多背景 background-image
  • 媒体查询 (@media MDN) (www.cnblogs.com/moqiutao/p/…)
  • 边框设置图片 border-image

5.flex布局的优缺点

*优点： 布局简单方便

  • 缺点 不兼容旧版本浏览器，开发时要注意不同浏览器的兼容写法

3.JS面试篇

由于JS的面试题比较广泛，我只在这里对面试中经常问到的几个JS面试题，进行说明。

1.如何判断数据类型

  • 比较常见的有 typeof instanceof Object.prototype.toString.call()

  • 下面我现在说一下第一种 typeof typeof 返回的是当前数据类型的字符串，返回的结果有：number，boolean,string,object,undefind,function,symbol。但是它不能判断null,array的数据类型。

    例子：

        typeof Symbol(); // symbol
    typeof ''; // string
    typeof 1; // number
    typeof true; // boolean
    typeof undefind; // undefind
    typeof new Function(); // function

  • instanceof 是用来判断A是否为B的实例，用来测试一个对象在原型链中是否存在一个构造函数的prototype属性，但它不能检测null和undefined

例子：
[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true
null instanceof Null//报错
undefined instanceof undefined//报错
  • Object.prototype.toString.call()是目前为止比较准确的方式
Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]

2.什么是闭包，怎么理解？

  • 面试中我们会经常被问到什么是闭包，对于我个人的理解的话就是，一个函数中返回了一个函数，返回的这个函数可以访问外面函数的变量，这个的话就是闭包
  • 使用闭包的时候我们要注意，滥用闭包会造成内存泄漏，影响网页的性能，闭包使用完之后，应当将引用的设置为null
function testBB(){
    var count = 0;
    return function addCount(){
        count++;
        console.log(count)
    }
}

var func01 = testBB();
func01() // 输出 1
func01() // 输出 2
<!--用完之后及时销毁-->
func01 = null

3.说一下promise 和 async的区别

  • 可能熟悉这两个小伙伴的都知道，这两个都是用来处理异步的方案，但是我的话呢，我个人比较喜欢使用async
  • 当我们工作中有出现这种业务场景的时候，就会发现，async写起来比promise代码少了更多了
  • 业务： 已知一级分类ID，通过一级分类ID查询二级分类列表数据，再通过二级分类ID查询三级分类列表数据
  • 下面我们来看代码：
<!--promise 方式-->

<!--查询函数 grade(分类等级) -->
function findClassify(grade){
    grade += 1;
    return new Promise((resolve,reject) => {
        resolve(grade)
    })
}

findClassify(1).then( res => {
    findClassify(res).then( res1 => {
        findClassify(res1).then( res2 => {
            console.log(res)  // 2
            console.log(res1) // 3
            console.log(res2) // 4
        })
    })
})

<!--async 方式-->

async function getClassify(){
    const res = await findClassify(1)
    const res1 = await findClassify(2)
    const res2 = await findClassify(3)
    console.log(res,res1,res2)  // 2 3 4
}
getClassify()

当我们需要去做链式的时候就会越写越多越写越多。

4.ES6常用的有哪些

  • let命令只能在代码块内有效，外部无法访问 const 不可改变 不存在变量提升
  • 变量解构赋值 const [a,b,c] = [1,2,3]
  • 函数参数的默认值 function test(x = 2,y){console.log(x);console.log(y)} 2 undefined
  • 运算符拓展 ...[1,2,3] // 1 2 3 合并数组 ES5 arr1.concat(arr2) ES6 [...arr1,...arr2]
  • Promise
  • async ES7
  • class class继承
  • 箭头函数 () => {}
  • export import
  • '总数：' + num（ES5） 总数：${num}（ES6）
  • 更多ES6语法可以参考 ECMAScript 6 入门

5.说说你对this的理解

  • this其实就是哪个对象调用函数，函数里面的this指向哪个对象
  • 在使用箭头函数的时候需要注意，this指向箭头函数的上一层的引用对象
  • 当使用apply和call时，this的指向被修改为传入的对象

6.apply和call的区别

  • call和apply的作用都是一样的， 唯一不同的就是它们传入的参数不同
  • call可以传入多个参数，第一个参数为this的指向，第二个参数以下是依次传入的参数
  • apply只能传入两个参数，第一个参数是this的指向，第二个参数是对象或者数组

7.什么是递归

8.什么是原型链

9.es6的class类继承原理是什么

10.ajax默认是同步还是异步，怎么修改为同步

11.常见的http状态码有哪些，分别代表什么意思

12.什么是浏览器缓存，强缓存和弱缓存有什么区别

13.什么是事件流

14.什么是防抖和节流

  • 递归比较好理解，其实就是函数自己去调用，但是递归的话要注意结束函数调用，否则会造成死循环
function dgTest(){
    let count = 0;
    if(count < 10){
        dgTest()
    }
    console.log(count)
}
dgTest()

Vue 面试题

1.Vue的生命周期

beforeCreate 创建之前
created 创建之后
beforeMount 加载前
mounted 加载后
beforeUpdate 修改前
updated 修改后
beforeDestory 销毁前
destoryed 销毁后

<!--几个不常用的-->
activated：当组件激活的时候调用
deactivated：当组件停用的时候调用
errorCaptured：这个生命钩子可以看官网，2.5.0之后才有的。当捕获一个来自子孙组件的错误时被调用。

2.Vue常用的命令

v-if v-else v-else-if（false销毁节点）
v-show  (false隐藏节点，不销毁)
v-for 条件遍历节点
v-model 双向绑定
v-text 跟innerText一样
v-html 跟innerHtml一样
v-on 绑定事件监听器
v-bind 绑定数据

3.vue如何自定义一个过滤器？

<input type="text" v-model="msg" />
{{msg | capitalize}}

data(){
    return{
        msg: ''
    }
},
filters: {
    capitalize: function(value){
        if(!value) return "";
        value = value.toString();
        return value.charAt(0).toUpperCase()+value.slice(1)
    }
}

4.vue常用修饰符

.prevent: 提交时间不再重载页面

.stop:阻止单击事件冒泡

.self:当事件发生在该元素本身而不是子元素的时候触发

.capture:事件侦听，事件发生的时候会调用

5.组件通信的方式有哪几种？如何实现

<!--父子组件通信-->
props
emit
在父组件使用$children访问子组件，在子组件中使用$parent访问父组件

<!--兄弟组件通信-->
vuex
eventBus

<!--多层级组件通信-->
provide/inject

<!--具体怎么实现，可以自己百度，这里就只说了大概有什么方式可以实现-->

6.Vuex是什么?如何使用

  • vuex是一个状态管理器，用来管理所有组件的状态
  • vuex分为 getter state action mutations module
  • getter相当于store的计算属性，主要用来过滤一些数据
  • state存放这组件的状态
  • mutations修改组件的状态
  • action处理异步数据，提交到mutations
  • module放项目大时可以分割为不同模块

面试总结

在面试中，考官比较喜欢问的就是一些基础知识，当然，去大厂面试的时候面试的难度也会提高很多，但是很多都离不开对基础知识的理解，有时候考官也会为一些底层原理的实现方式，这个需要自己在工作的时候或者闲暇时间去对一些框架的实现原理去研究，在这之中能够学习到更多的设计模式的知识。

avatar
文章
阅读
粉丝