阅读 14188

前端面试总结篇(初级)

前端基础面试题总结

作为一个优秀的程序员,不仅仅可以解决工作的问题,还要不断的关注前端技术的发展,其中也包括了解最新的前端面试题,那么知识点来了,请接好

1. 你熟悉的es6

  • let、const、var的使用区别
    let: 相当于var,用于声明一个变量,在块级作用域有效(可解决for循环问题);不能重复声明;不会变量提升;不会预处理
    const: 用于定义一个常量,不能修改,其他特点等同于let,用于保存不用改变的数据
  • Map与普通对象的区别
    JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

除了这两个,关于es6的常用还有箭头函数、模板字符串、变量的解构赋值等

2. 你使用的跨域

所谓的跨域问题是由于浏览器的同源策略限制的,当协议域名端口号不同即为跨域,对于协议和端口来说,前端不能解决。
解决跨域的几种方式:

  • JSONP 跨域 : 这种方式跨域是通过script标签引入js文件,这个js文件又会返回一个js函数调用,也就是请求后通过callback的方式回传结果
    优点:
    1.不受同源策略的限制
    2.兼容性更好
    3.支持老版本浏览器
    缺点:只支持get请求
  • CORS 跨域
    其原理是使用自定义的http头部请求,让浏览器与服务器之间进行沟通,从而决定请求或响应是否成功
    优点:
    1.支持所有类型的http请求
    2.比jsonp有更好的错误处理机制
    3.被大多数浏览器所支持
  • h5的postMessage方法
    window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据,只能在两个窗口(iframe)之间交换数据
  • 其实在工作中如果使用的是cors跨域的话,跨域问题基本上都是由后端来配置,前端还是比较省心的,即使那你的后端不给你处理,也可以代理跨域去处理

3. 你了解的http状态码

 1** 信息,服务器收到请求,需要请求者继续执行操作(101,升级为websocket协议)
 2** 成功,操作被成功接收并处理(206,部分内容,分段传输)
 3** 重定向,需要进一步操作以完成请求(301,302重定向;304命中缓存)
 4** 客户端错误,请求包含语法错误或无法完成请求(401,要求身份验证;403,服务器理解客服端需求,但是禁止访问)
 5** 服务器错误,服务器在处理请求的过程中发生了错误

4. 你来评价一下ajax

  • ajax的优势
    1.无刷新页面请求,使产品更快,更小更友好
    2.服务器端的任务转嫁到客户端处理
    3.减轻浏览器负担,节约带宽
    4.基于标准化对象,不需要安装特定的插件
    5.彻底将页面与数据分离
  • 缺点
    1.无法使用回退按钮
    2.不利于网页的SEO
    3.不能发送跨域请求
    -写一个简单的ajax请求
 getList: function ({
    var me = this;
    $.ajax({
    url'/test',
    type'POST',
    data: {
      repaymentId: repaymentId
    },
    xhrFields: {
      withCredentialstrue
    },
    successfunction (result{
       if (result.status == 0) {
           console.log('请求成功')
       } else {
            console.log('请求异常')         
       }
     },
    errorfunction (result{
         $.toaster({ title'info'priority'danger'message'服务器异常,请联系管理员!' });
      }
    })
   }
复制代码

5. 你知道的vue的生命周期

关于vue生命周期,可参考这篇文章 链接

  • beforeCreate:实例初始化之后
  • created:在实例创建完成后被立即调用,可以改变data中的值,挂载还没开始,$el属性不可见
  • beforeMount:挂载开始前被调用,render函数首次被调用
  • mounted:挂载完成,可以获取dom元素对象
  • beforeUpdate:数据更新时调用,需要有外部触发
  • updated:组件DOM已经更新
  • activated:keep-alive组件激活时调用
  • deactivated:keep-alive组件停用时调用
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • desttrroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  • errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

6. 你知道的react的生命周期

初始化

  • componentWillMount 初始化调用,只调用一次
    render 渲染页面
  • componentDidMount 第一次渲染后调用

更新

  • componentWillReceireProps 接收新的props时调用
  • shouldComponentUpdate state或props改变时调用
  • componentWillUpdate 将要更新时调用,可改变state的值
    render
  • componentDidUpdate 更新后调用

卸载

  • componentWillUnMount

7. react声明默认props

设置默认props有两种方式

  • 指定 props 的默认值, 这个方法只有浏览器编译以后 才会生效
static defaultProps = { 
  age: 18
}
复制代码
  • 指定 props 的默认值,这个方法会一直生效
  Greeting.defaultProps = {    
    name: '我是props的默认值!'
  }
复制代码

8. react创建组件的三种方式

1.函数式定义的无状态组件,适用于纯展示组件,只负责根据传入的props展示,不涉及state状态的操作,特点如下

  • 组件不会被实例化,整体渲染性能得到提升。
  • 组件不能访问this对象
  • 组件无法访问生命周期的方法
  • 无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用
function  MyTest1({
  return <h1>工厂(无状态)函数(最简洁, 推荐使用)</h1>
}
复制代码

2.es5原生方式React.createClass定义有状态的组件

  • 组件会被实例化
  • 可以访问生命周期
  • 会自绑定函数方法
var MyTest2=React.createClass({
  render(){
   return <h1>ES5老语法(不推荐使用了)</h1>
  }
})
复制代码

3.es6形式的extends React.Component定义的组件,是以ES6的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式

class  MyTest3 extends React.Component{
  render(){
     return <h1>ES6类语法(复杂组件, 推荐使用)</h1>
  }
}
复制代码

React.createClass与React.Component区别

  • this绑定不同
    React.createClass创建的组件,其每一个成员函数的this都有React自动绑定,任何时候使用,直接使用this.method即可,函数中的this会被正确设置。
    React.Component创建的组件,其成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。
  • 组件属性类型propTypes及其默认props属性defaultProps配置不同
  • 组件初始状态state的配置不同
  • Mixins的支持不同

9. 你知道http与https的区别吗

1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全

10. get与post的区别

  • 表单的method属性设置post时发送的是post请求,其余都是get请求
  • get请求通过url地址发送请求参数,参数可以直接在地址栏中显示,安全性较差;post是通过请求体发送请求参数,参数不能直接显示,相对安全
  • get请求URL地址有长度限制,根据浏览器的不同,限制字节长度不同,post请求没有长度限制

11. 你对闭包的了解

外部函数调用之后其变量对象本应该被销毁,但闭包的存在使我们仍然可以访问外部函数的变量对象

12. vue动态传参以及获取

// 传参
router: {
path: '/test/:id'
}
// 获取
this.$route.params.id
// 通过query
<router-link :to="{path: '/test',query:{name: 'aaa'}}">跳转</router-link>
复制代码

13. h5和css3新属性

1.H5

  • 语意化标签(nav、aside、dialog、header、footer等)
  • canvas
  • 拖放相关api
  • Audio、Video
  • 获取地理位置
  • 更好的input校验
  • web存储(localStorage、sessionStorage)
  • webWorkers(类似于多线程并发)
  • webSocket
    2.CSS3
  • 选择器
  • 边框(border-image、border-radius、box-shadow)
  • 背景(background-clip、background-origin、background-size)
  • 渐变(linear-gradients、radial-gradents)
  • 字体(@font-face)
  • 转换、形变(transform)
  • 过度(transition)
  • 动画(animation)
  • 弹性盒模型(flex-box)
  • 媒体查询(@media)

14. 实现左右固定宽,中间自适应(已知宽高和未知宽高)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css居中的十种方式</title>
  <style>
   .wrap {
       width200px;
       height200px;
       border1px solid red;
       position: relative;
   }
   .size {
       width100px;
       height100px;
   }
   /*第一种 已知元素宽高下使用position+ 负margin实现 兼容性较好*/
   .box1 {
        background-color: pink;
        position: absolute;
        top50%;
        left50%;
        margin-top: -50px;
        margin-left: -50px;
   }
   /*第二种 已知元素宽高下使用position+margin auto实现 兼容性较好*/
   .box2 {
        background-color: pink;
        position: absolute;
        top0px;
        left0px;
        right0px;
        bottom0px;
        margin: auto;
   }
   /*第三种 已知元素宽高下使用position+calc计算实现 考虑c3 calc兼容性 需注意的问题是运算符之间要有空格,否则不生效*/
   .box3 {
        background-color: pink;
        position: absolute;
        topcalc(50% - 50px);
        leftcalc(50% - 50px);
   }
   /*第四种 未知元素宽高下使用position+transform实现 依赖translate2d兼容性*/
   .box4 {
       position: absolute;
       background-color: pink;
       top50%;
       left50%;
       transformtranslate(-50%, -50%);
   }
   /*第五种 未知元素宽高下使用lineheight实现*/
   .wrap2 {
       line-height400px;
       width200px;
       text-align: center;
       border1px solid red;
   }
    .box5 {
        background-color: pink;
        /*不加以下内容内部div会扩充外部div,且内容居中*/
        display: inline-block; /*不独占一行的块元素*/
        vertical-align: middle; /*垂直方向居中*/
        line-height: initial; /*默认内容行高*/
        text-align: left;
    }
    /*第六种 未知宽高使用writing-mode属性*/
    .wrap3 {
        writing-mode: vertical-lr; /*内容变为垂直分布*/
        text-align: center;
    }
    /*inner 部分宽度100%居中*/
    .inner{
        writing-mode: horizontal-tb;
        text-align: center;
        display:inline-block;
        width100%;
        background-color: pink;
    }
    .box6 {
        display: inline-block;
        margin: auto;  
        background-colorrgb(140, 216, 68);
    }
    /*第七种 未知宽高使用table-cell属性*/
    .wrap4 {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box7 {
        background-color: pink;
        display: inline-block;
    }
     /*第八种 未知宽高使用flex属性*/
    .box8{
    background-color: pink;
    }
    .wrap5{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*第九种 未知宽高使用grid, 兼容性较差*/
    .wrap6{
        display: grid;
    }
    .box9 {
        align-self: center;
        justify-self: center;
        background-color: pink;
    }
    /*第十种 使用表格table实现*/
    .wrap7 {
        text-align: center;
    }
    .box10 {
        display: inline-block;
        background-color: pink;
    }
  
</style>
</head>
<body>
  <div class="wrap">
    <div class="box1 size">知11111</div>
  </div>
  <div class="wrap">
    <div class="box2 size">知2222</div>
  </div>
  <div class="wrap">
    <div class="box3 size">知3333</div>
  </div>
  <div class="wrap">
    <div class="box4">未44444</div>
  </div>
  <div class="wrap2">
    <div class="box5">未55555</div>
  </div>
  <div class="wrap3 wrap">
      <div class="inner">
        <div class="box6">未66666</div>
      </div>
  </div>
  <div class="wrap wrap4">
    <div class="box7">未777777</div>
  </div>
  <div class="wrap wrap5">
    <div class="box8">未88888</div>
  </div>
  <div class="wrap wrap6">
    <div class="box9">未9999</div>
  </div>
  <table>
    <tbody>
        <tr>
            <td class="wrap wrap7">
                <div class="box10">未10101010</div>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>
复制代码

15.父子组件传值

  • 父传子:通过props传递
  • 子传父: 通过$emit传递
  • 子孙之间: 通过一个中间文件作为媒介,子组件传值到中间文件,上级文件在中间文件中获取,避免逐级获取

16.输入一个网址,直到网址打开并加载结束,这个过程浏览器发生了什么

  • 查看浏览器中是否有缓存,有的话直接访问缓存
  • 如果缓存过期或者没有缓存,重新请求
  • 在发送http请求前,需要域名解析,获取相应的IP地址
  • 浏览器想服务器发起tcp链接,与浏览器建立tcp三次握手
  • 握手成功后,浏览器向服务器发送http请求,请求数据包
  • 服务器处理收到的请求,将数据返回至浏览器
  • 浏览器收到HTTP响应
  • 读取页面内容,浏览器渲染,解析html源码

17. rem与em的区别

rem是根据根的font-size变化,而em是根据父级的font-size变化

这里值得注意的是,在react的子组件中是不可以改变父组件中的值,解决办法可以是在子组件中向父组件传递一个状态,接着在父组件中通过这个状态值来判断是否要改变数据值,并在父组件中更新状态

18. vue中的data为什么返回的是一函数?

这个问题vue的官方文档中也有说过,当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。
简单来说就是Vue组件可以复用,如果不是函数,那么在多处复用这个组件时,改变一个组件内的值,其他的都会改变

19. img标签中alt属性有什么作用?

  1. 当图片不能正常显示时,可以显示出alt中的内容
  2. 某些浏览器下,鼠标放在图片上会作为提示文字
  3. 谷歌百度这种引擎抓图就是抓的alt,写好有利于seo
  4. 视障人士使用屏幕朗读功能时,手指或鼠标放上去会朗读alt中文字

20. js数据类型

基本数据类型:number,string,null,undefined,boolean,symbol,bigInt
引用数据类型: object

21.如何判断一个变量属于哪种类型?

  1. typeof:可判断出四种类型,string,boolean,object,number
  2. instanceof: 判断参照对象的prototype属性所指向的对象是否在被行测对象的原型链上
  3. constructor
  4. Array.isArray([]): 判断是否为数组

22. 深拷贝

function copy(arr{
 var newObj = arr.constructor === Array ? [] : {}
   if (typeof arr === 'object') {
    for (var i in arr) {
      if (typeof arr[i] === 'object') {
        newObj[i] = copy(arr[i])
      }
      newObj[i] = arr[i]
    }
    return newObj
  } else {
    return
  }}
复制代码
function copy (obj{
 var newObj = obj.constructor === Array ? [] : {}
 newObj = JSON.parse(JSON.stringify(obj))
 return newObj
}
复制代码

23. call,apply,bind的作用区别

作用:用来改变函数this指向
相同处:第一个参数都是this要指向的对象
区别一:call()和apply()都是对函数的直接地调用,而bind()本身返回一个函数,后面还需要()进行调用
区别二:call()和bind()传参可以一个一个传入,但是apply()要以数组格式传参

24. 通过npm i安装依赖后,会在package.json里添加一条“name”:"^2.5.0",格式的记录,^的作用是什么?

^ 是安装到第一位大版本号下的最新版本
~ 是安装到第二位大版本号下的最新版本
没有就是指定版本

25. package-lock.json 作用是什么?

锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致。

26.vue生命周期中,在哪步可以获取dom

mounted,利用ref获取

27. vue router懒加载

按需引入

const RankList = () => import/* webpackChunkName: "RankList" */ '@/components/RankList')
复制代码

28. data () { a: { b: 1 } }; 如何用 watch 监听 b 的变化?

watch:{
  'a.b'function (val, oldVal/* ... */ }
}
复制代码

29. 使用 v-for 要求写 key,为什么?

为每一个元素提供唯一性

30. localStorage, sessionStorage 区别?

localStorage: 本地存储,与cookie作用相同,但是比cookie有更大的存储空间,生命周期永久,除非主动删除,否则会一直存放在客户端。
sessionStorage: 会话存储,生命周期是临时的,尽在当前会话窗口有效,关闭页面或浏览器数据就会自动清除

31. 权限登录RBAC

页面权限:即用户可查看哪些页面
操作权限:即用户可做哪些操作
数据权限:即用户看到的数据
页面权限大体来说就是每个用户登录时都会带有一个角色标识,同时路由也应该由静态路由和动态路由组成,动态路由中meta属性可规定哪些角色可查看,在进入页面路由之前判断该标识与动态路由中存储的meta权限做比较,展示对应页面,操作权限和数据权限也是大致思路

32.vue常用语法、内置组件

  • v-if:通过dom节点的存在与否来判断,适合运行时条件很少改变时使用
  • v-show:为元素添加display属性,适用于频繁的切换
  • v-for
  • v-on:绑定事件监听器,@
  • v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式, :
  • v-html
  • slot:插槽,用于标记往哪个具名插槽中插入子组件内容
  • is:与component连用
  • component:渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染。
文章分类
前端
文章标签