| 前端面试题 | 您所在的位置：网站首页 › 前端试题大全及答案 › 前端面试题 |
|
三次握手协议 ajax原理 数组去重方法 filter和map区别 js数据类型 深拷贝和浅拷贝 有没有扁平化过数组 有没有使用过防抖，怎么实现 es6 model的使用 vue常用指令 vue父子组件生命周期执行顺序 axios怎么封装 vue组件的使用 怎么跟后台联调接口 遇到的问题 TCP三次握手协议三次握手建立连接 四次挥手断开连接 TCP：传输控制协议，TCP协议是一个面向连接的、可靠的、基于字节流的传输层协议 三次握手协议指的是在发送数据的准备阶段，服务器端和客户端之间需要进行三次交互 第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认。 第二次握手：服务器收到syn包，必须确认客户端的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态。 第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。 ajax原理 xml: 可扩展标记语言，被设计用来传输和存储数据。 Ajax：Ajax是异步js和xml。用于创建快速动态网页的技术。通过在后台与服务器进行数据交换，Ajax可以使网页实现异步更新，无需重新加载页面。 Ajax工作原理：通过XmlHttpRequest对象来向服务器发出异步请求，从服务器中获得数据，然后用Javascript来操作DOM从而更新局部页面。 实现Ajax的基本步骤： 1.创建XMLHttpRequest对象, 即创建一个异步调用对象. 2.创建一个新的HTTP请求, 并指定该HTTP请求的方法、URL及验证信息. 3.设置响应HTTP请求状态变化的函数. 4.发送HTTP请求. 5.获取异步调用返回的数据. 6.使用JavaScript和DOM实现局部刷新. filter和map区别 共同点： filter()和map()方法都会返回新数组，对原数组不会影响 区别：filter是对原数组的过滤，返回的新数组元素和原数组元素一致，长度可能发生变化 map是对原数组的加工，返回的新数组元素发生变化，长度不变 深拷贝和浅拷贝 深拷贝和浅拷贝主要针对引用数据类型 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。 实现浅拷贝方法: （1）Object.assign方法 （2）for in方法 实现深拷贝方法： （1）采用递归去拷贝所有层级属性 （2）使用JSON.stringify和JSON.parse实现深拷贝：JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象； （3）热门的函数库lodash，也有提供_.cloneDeep用来做深拷贝； vue父子组件生命周期执行顺序 挂载阶段： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 更新阶段： 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 销毁阶段: 执行顺序为： 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed 面试2 2022-7-15项目中遇到的难题 三次握手协议 es6新增特性 居中布局 防抖节流，含义，作用，场景，实现 箭头函数和普通函数this指向 diff算法 双向绑定原理 为什么使用key 强缓存和弱缓存 事件循环机智，宏任务和微任务 垃圾回收机制 递归注意什么 promise状态多少种，怎么改变 promise为什么可以一直then下去 移动端适配 webpack写过什么 垃圾回收机制 垃圾回收机制： 没有被引用的对象或变量，它们所占的内存就会自动被回收，避免内存泄露。 内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，没有被释放，导致该内存无法被使用，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。 垃圾回收方法：通常有两种方式：标记清除法（js最常用）、引用计数法 常见内存泄漏的原因： （1）全局变量引起的内存泄露 （2）闭包引起的内存泄露：慎用闭包 （3）dom清空或删除时，事件未清除导致的内存泄漏 （4）循环引用带来的内存泄漏 递归注意什么 间接或直接调用自身的函数被称为递归函数。 优点：递归的目的是使代码简洁，达到功能实现的目的 注意： （1）递归耗性能，占内存高 （2）递归一定要有条件限定，保证递归能停下来，否则可能会发生栈内存溢出。 （3）递归次数不能太多，否则可能会发生栈内存溢出。 promise 为什么可以一直then下去 因为promise.then或.catch返回了一个新的promise,新的promise能继续调用.then。所以达到了链式调用的效果。 移动端适配 （1）Rem 布局适配 如果需要使用 rem 单位进行适配，推荐使用以下两个工具： postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基准值 （2）使用display弹性布局 面试3 2022-7-19项目介绍，项目团队，项目难点 表现与数据分离,web语义化 前端性能优化 面试 2022-12-71.项目团队，介绍项目，项目难点 2.async await 底层用到什么构造函数 3.$nexttick作用，是宏任务还是微任务 4.组件通信 5.闭包，优点、缺点，清理闭包的变量 6.sass 继承，全局变量 7.var、let、const区别，在let const声明之前访问变量，会出现什么情况 8.vue3 ref和reactive区别 9.vue3和vue2生命周期 10.vue3响应式原理，与vue2比较 11.compted怎么设置值 12.父组件怎么访问子组件里面的方法，有多少种方法 13.flex布局怎么居右 14.css使用transform向右移动100px 15.router与route的区别 16.route传参params与query区别 17.怎么解决vuex刷新不丢数据 闭包，优点、缺点，清理闭包的变量 闭包形成的原理：作用域链，当前作用域可以访问上层作用域中的变量。 闭包的理解：一般是一个函数A，return其内部函数B，被return出去的B函数能够在外部访问A函数内部的变量，这时候就形成了一个B函数的变量闭包。 优点： 函数外部可以访问函数内部的局部变量 可以让这些局部变量保存在内存中，实现变量数据共享 缺点： 常驻内存，增加内存使用量 使用不当造成内存泄漏 清理闭包的变量 可在模块或应用结束后来进行空赋值处理，进行销毁。手动赋值空 sass 继承，全局变量选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，这个通过@extend语法实现 //通过选择器继承继承样式 .error{border: 1px solid red;background-color: #fdd;}.seriousError{@extend .error;border-width: 3px;} $nextTick作用，是宏任务还是微任务 实际上，nextTick在vue发展的不同版本中，针对各种渲染和dom事件问题进行了多次调整。宏/微任务，甚至两种并行。在最新版本 2.6.12 中稳定为 微任务。 compted怎么设置值 computed中有get和set⽅法，（在默认的情况下只有get）1.get⽅法是获取，相当于我们可以在get中给这个计算属性中的变量赋值，2.set⽅法是改变时触发， computed:{fullName(){returnthis.firstName +' '+this.lastName },fullName:{get:function(){returnthis.firstName +' '+this.lastName },set:function(value){var arr = value.split(' ')this.firstName = arr[0]this.lastName = arr[1]}}}, 父组件怎么访问子组件里面的方法，有多少种方法使用$children或$refs,但在Vue3中$children属性已被移除。 $refs与ref一起使用，通过ref给组件绑定一个ID，通过this.$refs.ID就可以访问到该组件了。 使用$children返回的是数组 var、let、const区别，在let const声明之前访问变量，会出现什么情况 let const 不存在变量提升，var可以变量提升 如果块区中存在 let 和 const，会形成封闭作用域，块级作用域 不允许重复声明 const定义的是常量，不允许修改，但是定义对象，可以修改内部的数据 在let const声明之前访问变量，会报错 flex布局怎么居右 display: flex;justify-content: flex-end：// 右对齐 css使用transform向右移动100px transform:translate(100px,50px);/*向右移动100px,向下移动50px*/transform:translate(-100px,500px);/*向左移动100px,向上移动50px*/transform:translate(100%,50%)/*沿着x轴自身的走100%像素,Y轴的50%像素*/transform:translate(100px)相当于transform:translateX(100px);/*沿着x轴走100px*/transform:translateY(100px);/*沿着Y轴移动100px*/ |
| CopyRight 2018-2019 实验室设备网 版权所有 |