一轮:前端面试题

    技术2022-07-11  108

    1、常用的数据类型:基本数据类型引用数据类型。

    基本数据类型: undefined、null、Boolean、String、Number

    引用数据类型:对象、数组、函数

    2、Es6新特性:

    1、let和const

    2、变量的解构赋值

    3、数组的扩展 

          Array.from:将类数组转换成一个真正的数组;

          Array.of:将一组数转换成数组;

          剩余运算符 ...

          扩展运算符:经常用于数组的合并,对象的合并 ary1.concat(ary2)

    4、对象的扩展

          Object.assign(tar1, tar2)

    5、for...of...

    6、箭头函数

     

    3、 闭包

    闭包的特性:

       1、函数内再嵌套函数

       2、内部函数可以引用外层的参数和变量

       3、参数和变量不会被垃圾回收机制回收

    说说你对闭包的理解

       使用闭包主要是为了设计私有的方法和变量。

       闭包的优点是可以避免全局变量的污染,

       闭包的缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

       在js中,函数即闭包,只有函数才会产生作用域的概念

    闭包 的最大用处有两个:一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中

                                            闭包的另一个用处,是封装对象的私有属性和私有方法

    使用闭包的注意点:

    由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露解决方法是,在退出函数之前,将不使用的局部变量全部删除

    总结:

           好处:能够实现封装和缓存等;

           坏处:就是消耗内存、不正当使用会造成内存溢出的问题

    4、利用原生js怎样绑定事件

    (一)在DOM中直接绑定事件

    我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup  、ondblclick、onkeydown、onkeypress、onkeyup等。

    <input type="button" value="click me" onclick="pin()"> <script> function pin(){ alert("hello world!"); } </script>

    (二)在JavaScript代码中绑定事件

     将一个函数赋值给一个事件处理程序属性,在元素的作用域中运行,程序中的this引用当前元素

    var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert(this.id); //"myBtn" }

     (三)使用事件监听绑定事件

    绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。


     

    5、怎样利用js获取元素

     

    JS获取DOM元素的方法(8种)

    通过ID获取(getElementById)通过name属性(getElementsByName)通过标签名(getElementsByTagName)通过类名(getElementsByClassName)通过选择器获取一个元素(querySelector)通过选择器获取一组元素(querySelectorAll)获取html的方法(document.documentElement)document.documentElement是专门获取html这个标签的获取body的方法(document.body)document.body是专门获取body这个标签的。

    6、 promise的理解

    promise是一个异步编程的一种解决方案,ES6规定promise对象是一个构造函数,用来生成Promise实例。

    Promise构造函数接受一个函数作为参数,这个函数的参数同样也有两个参数: resolve和 reject,这两个参数也是函数

    resolve执行后返回promise的成功状态,

    reject执行后返回promise的错误状态

    10、TCP和UDP 

    1、TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接 2、TCP提供可靠的服务。也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达;UDP尽最大努力交付,即不保证可靠交付

    Tcp通过校验和,重传控制,序号标识,滑动窗口、确认应答实现可靠传输。如丢包时的重发控制,还可以对次序乱掉的分包进行顺序控制。

    3、UDP具有较好的实时性,工作效率比TCP高,适用于对高速传输和实时性有较高的通信或广播通信。

    4.每一条TCP连接只能是点到点的;UDP支持一对一,一对多,多对一和多对多的交互通信

    5、TCP对系统资源要求较多,UDP对系统资源要求较少。

    简单总结:

    TCP 是面向连接的,UDP 是面向无连接的UDP程序结构较简单TCP 是面向字节流的,UDP 是基于数据报的TCP 保证数据正确性,UDP 可能丢包TCP 保证数据顺序,UDP 不保证

    11、Axios 

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

    它本身具有以下特征:

         a.从浏览器中创建 XMLHttpRequest      b.从 node.js 发出 http 请求      c.支持 Promise API      e.拦截请求和响应      f.转换请求和响应数据     g.取消请求     h.自动转换JSON数据     i.客户端支持防止 CSRF/XSRF

    关于拦截器:在请求或响应被 then 或 catch 处理前拦截它们。

    // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });

     12、常用的异步请求方法

    - 回调函数 - 订阅和发布模式 - Promise - generator - async/await

    13、虚拟DOM的理解

    Virual DOM是用JS对象记录一个dom节点的副本。是用javascript对象表示的,和真正的DOM有一层映射关系,当dom发生更改时候,先用虚拟dom进行diff,算出最小差异,然后再修改真实dom。

    虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

    简单地说:

    根据虚拟dom树最初渲染成真实dom当数据变化,或者说是页面需要重新渲染的时候,会重新生成一个新的完整的虚拟dom拿新的虚拟dom来和旧的虚拟dom做对比(使用diff算法)。得到需要更新的地方之后,更新内容。这样就能大量减少真实dom的操作,提高性能。

    14、vue数据双向绑定的原理: 

    vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。

    15 、vue的生命周期

    钩子函数触发的行为在此阶段可以做的事情beforeCreadtedvue实例的挂载元素$el和数据对象data都为undefined,还未初始化。加loading事件createdvue实例的数据对象data有了,$el还没有结束loading、请求数据为mounted渲染做准备beforeMountvue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。 mountedvue实例挂载完成,data.filter成功渲染配合路由钩子使用beforeUpdatedata更新时触发 updateddata更新时触发数据更新时,做一些处理(此处也可以用watch进行观测)beforeDestroy组件销毁时触发 destroyed组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在组件销毁时进行提示

    16、vue中父子组件之间传值

    父传子:通过在子组件内部定义一个props

    子传父:在子组件中,利用  $emit  触发 父组件传递过来的方法的时候,可以将子组件的数据当做参数传递给父组件

    17、路由的钩子函数

    首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

    beforeEach主要有3个参数to,from,next。 to:route即将进入的目标路由对象。 from:route当前导航正要离开的路由。 next:function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

    18、keep-alive的理解

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

    <keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。

    当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

    activated: keep-alive组件激活时调用deactivated: keep-alive组件停用时调用

    19、跨域的几种方式

     1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

    Processed: 0.012, SQL: 9