同事前端面试总结------梦

1、清除浮动的方式

https://m.php.cn/article/413758.html

使用clear:both清除浮动

)利用伪元素clearfix来清除浮动

overflow方法的使用

1、http状态码

状态码分类表

  类别 原因短语

1xx Informational(信息性状态码) 接受的请求正在处理

2xx Success(成功状态码) 请求正常处理完毕

3xx Redirection(重定向) 需要进行附加操作以完成请求

4xx Client error(客户端错误) 客户端请求出错,服务器无法处理请求

5xx Server Error(服务器错误) 服务器处理请求出错

5种常见的HTTP状态码

200 (ok) : 请求已成功, 请求所希望的响应头或数据体将随此响应返回

303 (See Other) : 告知客户端使用另一个URL来获取资源

400 (Bad Request) : 请求格式错误. 1)语义有误; 2)请求参数有误

404 (Not Found) : 请求失败, 请求所希望的到的资源未被服务器发现

500 (Internal Server Error) : 服务器遇到了一个未曾预料的情况, 导致了它无法完成对请求的处理

更多状态码

100 => 正在初始化 (一般看不到)

101 => 正在切换协议 (websocket 浏览器提供的)

202 => 表示接受

301 => 永久重定向 / 永久转移

302 => 临时重定向 / 临时转移 (一般用来作服务器负载均衡)

304 => 本次获取的内容是读取缓存中的数据, 会每次去服务器校验

401 =>  未认证, 没有登录网站

403 => 禁止访问, 没有权限

503 => 服务器超负荷

  1. css预处理器混入用法

混合指令的用法是在 @mixin 后添加名称与样式,比如名为 large-text 的混合通过下面的代码定义:

混合也需要包含选择器和属性,甚至可以用 & 引用父选择器:

使用@include指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):

@mixin clearfix {

  display: inline-block;

  &:after {

    content: ".";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

  }

  * html & { height: 1px }

}

  1. v-if和v-show区别,为什么v-if和v-for一起用会报错

原因:v-for 的优先级比 v-if 的高,所以每次渲染时都会先循环再进条件判断,而又因为 v-if 会根据条件为 true 或 false来决定渲染与否的,所以如果将 v-if 和 v-for一起使用时会特别消耗性能,如果有语法检查,则会报语法的错误。

1. 将 v-for 放在外层嵌套 template (页面渲染不生成 DOM节点) ,然后在内部进行v-if 判断

1、v-model双向绑定原理,怎么实现的

1、路由跳转的方式:https://blog.csdn.net/xin123____/article/details/114732106

1)router-link

this.$router.push({name:‘home’,params: {id:‘1’}})

router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数

  1. 路由参数query 和params的区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

  1. 路由守卫方法

全局前置守卫组件内的守卫路由独享的守卫

to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由

next: Function: 钩子函数,里面定义参数,确认下一步路由要做什么

  1. Computed 跟watch区别

1)1.computed就是计算属性,watch就是监听

2).computed就是用来计算出一个值,第一个是这个值在调用的时候不需要加括号,当属性使用;第二是它根据依赖会自动缓存,依赖不变computed的值就不会重新计算

3.)watch如果一个属性变化了,那么就执行一个函数,它有两个选项,第一个是immediate,表示在第一次渲染的时候是否执行这个函数,第二个是deep,监听一个对象的时候是否要看对象里面属性的变化。

1、Watch 监听的两个属性

(1)immediate和handler
这样使用watch时有一个特色,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。若是咱们须要在最初绑定值的时候也执行函数,则就须要用到immediate属性。

(2)deep
当须要监听一个对象的改变时,普通的watch方法没法监听到对象内部属性的改变,此时就须要deep属性对对象进行深度监听。

1、获取元素的方式

1.getElementById()

获取指定的id,获取的元素是唯一的

2.getElementsByTagName()

(1)这个方法可以返回带有指定标签名的对象的集合;以伪数组的形式存储的

(2)如果想得到每个元素可以采取遍历的方式,

(3)如果页面中只有一个这个元素,返回的也是伪数组的形式

(4) 如果页面没有这个元素,则返回的是空的伪数组

3.getElementsByClassName()

根据类名获取某元素集合

4.querySelector()

返回指定选择器的第一个元素对象

5.querySelector()

返回指定选择器的所有元素对象的集合

6.获取body元素

document.body

7.获取html元素

document.documentElement

  1. 节流与防抖的实现过程跟应用场景

节流和防抖应用场景及实现_Ricoshallow的博客-CSDN博客_节流的应用场景和实现

节流

定义:不管事件的触发频率有多高,只会在设定的时间间隔内执行一次目标函数。

应用场景:监听浏览器滚动条事件,触发随机改变body背景颜色的函数changeBgc。不使用节流会导致页面一滚动就疯狂触发changeBgc函数,页面会不停闪动。运用节流函数throttle我们设定1秒时间间隔内只能触发一次changeBgc函数。

防抖

定义: 触发事件后 n 秒后才执行函数,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

应用场景: 点击按钮发送Ajax请求。不使用防抖可能会导致用户连续点击按钮时,一段时间后多个相应陆续到来,形成抖动,这样连续请求会造成资源浪费。运用防抖函数,如果用户在请求还未发送的时间内再次点击发送按钮,只会执行最后面一次发送回调。

  1. 什么情况下会跨越,解决跨越的方式

1、什么情况下会遇到跨域?

      浏览器最核心,最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式,当浏览器执行一个脚本时会检查是否同源,只有同源的脚本才会执行,如果不同源即为跨域。

同源:自己当前的域,与访问的域的协议、域名、端口号,都相等,才是同源。如果三者有一个不同,就属于跨域。

  1. 常见处理跨域的几种方式

Script标签的jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域后端在服务器上设置cors

Jsonp:原理就是利用了script标签不受同源策略的限制,在页面中动态插入了script,script标签的src属性就是后端api接口的地址,并且以get的方式将前端回调处理函数名称告诉后端,后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去。

CORS:(跨域资源共享)是一种允许当前域的资源被其他域的脚本请求访问的机制。 当使用XMLHttpRequest发送请求时,浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地址,浏览器得到响应会进行判断Access-Control-Allow-Origin的值是否和当前的地址相同,只有匹配成功后才进行响应处理。现代浏览器中和移动端都支持CORS,IE下需要8+。

服务器跨域,服务器中转代理。前端向本地服务器发送请求,本地服务器代替前端再向服务器接口发送请求进行服务器间通信,本地服务器是个中转站的角色,再将响应的数据返回给前端。

1、混合app的开发经验,在app的基础上内嵌h5

1、Vuex 常见属性,state和getter区别

tate:VueX的数据中心,相当于vue中的data。

getter:返回对state数据的装饰,相当于vue中的computed。<例:返回格式化后的时间、返回多个state数据的计算结果>

  1. 常用数组的方法,遍历有那些,map用法

array.pop()

pop() 方法从数组中删除最后一个数值,返回值为删除的数值,即最后一个数值;

array.push()

push() 方法(在数组末尾处)向数组添加一个新的元素,返回值为添加后的数组长度;

array.splice()

splice() 方法可用于向数组添加新项:

第一个参数()定义了应添加新数值的位置(拼接)即出现的位置,原先位置的数值往后推。

第二个参数()定义应删除多少数值从添加完数组的后一位开始删除。

其余参数(“Lemon”,“Kiwi”)定义要添加的新数值可以是多个也可以不写。

splice() 方法返回一个被删除的数值的数组:

array.sort()

sort() 方法以字母顺序对数组进行排序:

array.reverse()

reverse() 方法反转数组中的数值。

for of用法(适用iterable类型的集合即Array,Set,Map)

for in遍历对象输出的是键,这也是数组,Map,Set推荐使用for of的原因

forEach(Map,Set,Array适用)

  1. map用法:https://www.php.cn/js-tutorial-444274.html

map() 方法返回一个新数组,新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。

2、map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

注意:函数的作用是对数组中的每一个元素进行处理,返回新的元素。

3、语法

map是数组的方法,有一个参数,参数是一个函数,函数中有3个参数

参数1:item必须。当前元素的值

参数2:index,可选。当前元素在数组中的索引值

参数3:arr可选。当前元素属于的数组对象

array.map(functio函数a的作用就是对数组arr中的每一个元素进行处理(每一个元素乘以2),处理的结果返回在新的数组newArr中n(item,index,arr){})

  1. http请求方式及他们的区别

.GET方法

2.POST方法

3.HEAD方法

向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回,仅传输状态行和标题部分。这一方法可以在不必传输整个响应内容的情况下,就可以获取包含在响应消息头中的元信息。

4.PUT方法

PUT方法用于将数据发送到服务器以创建或更新资源,它可以用上传的内容替换目标资源中的所有当前内容。即向指定资源位置上传其最新内容。

5.DELETE方法

  1. Promise用法及其方法,为了解决什么问题

https://wenku.baidu.com/view/14873d6af4ec4afe04a1b0717fd5360cba1a8d3b.html

修改this指向的方法

通过call,apply改变this指向

  1. This的常用场景,作用域?
  2. (一)普通函数的调用,this指向的是Window
  3. (二)对象的方法,this指的是该对象
  4. (三)构造函数的调用,this指的是实例化的新对象
  5. (四)apply和call调用时,this指向参数中的对象
  6. (五)匿名函数调用,指向的是全局对象
  7. (六)定时器中调用,指向的是全局变量
  1. 讲下原型跟原型链

1、什么是原型?

 

答:一个函数可以看成一个类,原型是所有类都有的一个属性,原型的作用就是给这个类的每一个对象都添加一个统一的方法

 

2、什么是原型链

 

答:每个对象都有一个__proto__,它指向它的prototype原型对象,而prototype原型对象又具有一个自己的原型对象,就这样层层向下上直到一个对象的原型prototype为null 这个查询的路径就是原型链

 

3、如何访问一个对象的原型?

 

答:prototype,只有函数对象才拥有一个属性,用来访问其原型对象

 4、原型链的作用是什么?

    原型链是用于查找引用类型(对象)的属性,查找属性会沿着原型链依次进行,如果找到该属性会停止搜索并做相应的操作,否则将会沿着原型链依次查找直到结尾。常见的应用是用在创建对象和继承中

  1. 什么是闭包

什么是闭包?

简单来说,闭包是指可以访问另一个函数作用域变量的函数,一般是定义在外层函数中的内层函数。

即重用一个变量,又保护变量不被污染的一种机制。

为什么需要闭包?

局部变量无法共享和长久的保存,而全局变量可能造成变量污染,所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点

占用更多内存

不容易被释放

闭包的缺点:

   比普通函数占用更多的内存

   解决:闭包不在使用时,要及时释放。

   将引用内层函数对象的变量赋值为null。

  1. Echarts使用情况

首先需要在html加载echarts的js;

配置echart的参数

1、用过的ui 框架,有无了解vant,antdesign

1、Git 常用命令

push命令;2、pull命令;3、commit命令;4、add命令;5、checkout命令;6、fetch/clone命令。

git push origin(远程分支名称) 本地分支:远程分支 将本地的分支推送到远程分支

git status 查看当前版本管理状态

git checkout 分支的名称 切换分支

git merge 分支名称 将分支中的内容合并到当前分支

git log 查看提交历史

git reflog 查看命令历史

git reset --hard commitid 恢复到指定版本

  1. v-for ,key 作用,

给key赋值的内容不能是可变的

1. 在写v-for的时候,都需要给元素加上一个key属性

2. key的主要作用就是用来提高渲染性能的!

3.key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)

  1. Css布局,flex 属性值

flex属性

定义

flex布局包括最外层的容器内部的元素,flex属性是内部元素属性。flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写

flex-grow

  设置元素占flex容器所剩空余空间的比例

flex-shrink

  设置元素的收缩倍数,当元素的默认尺寸大于flex容器时,元素根据flex-shrink值缩小尺寸。

flex-basis

  在不设置box-sizing属性的情况下,flex-basis设置flex元素的内容区(content box)的初始尺寸。

如果一个元素同时设置了flex-basis与width(如果flex-direction:column那么就是height)属性,flex-basis有更高的优先级

1、Vue路由的应用

1、块元素和内联元素的区别

2、Id选择器,类选择器,内联样式,伪类选择器优先级

总结排序:!important > 内部样式>ID选择器 > 类选择器 > 标签选择器> 通配符选择器 > 继承 > 浏览器默认属性

  1. 伪元素跟伪类区别

伪类和伪元素的根本区别在于:是否创造了新的元素。

在 W3C 中,对伪类和伪元素的描述是这样的:伪类用于向某些选择器添加特殊的效果,而伪元素用于将特殊效果添加到某些选择器中,也就是说伪元素是对那些不能通过 class 或 id 等选择元素的补充。

  1. Foreach 跟map 区别,返回的东西

共同点

(1)只能遍历数组

(2)都是循环遍历数组中的每一项

(3)每一次执行匿名函数都支持三个参数,数组中的当前项item,当前项的索引index,原始数组input

(4)匿名函数中的this都是指window

1.forEach

没有返回值

循环的特点是会自动省略为空的数组元素,相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。

数组中有几项,那么传递进去的匿名回调函数就需要执行几次

· 理论上这个方式是没有返回值的,只是遍历数组中的每一项,不对原来数组进行修改,但是可以自己通过数组的索引来修改原来的数组

2.map

有返回值,可以return出

2.map

有返回值,可以return出

  1. For in 跟for of 区别

for...in 循环:只能获得对象的键名,不能获得键值

      for...of 循环:允许遍历获得键值

对于普通对象,没有部署原生的 iterator 接口,直接使用 for...of 会报错

for...in 循环不仅遍历数字键名,还会遍历手动添加的其它键,甚至包括原型链上的键。for...of 则不会这样

总之,for...in 循环主要是为了遍历对象而生,不适用于遍历数组

for...of 循环可以用来遍历数组、类数组对象,字符串、Set、Map 以及 Generator 对象

  1. 箭头函数跟普通函数的区别,箭头函数可以做构造函数?为什么?

ew关键字时,

1,创建一个空对象

2,将该对象的_proto_属性链接到构造函数原型(箭头函数没有prototype,所以报错)

3,将该对象作为this上下文调用构造函数并且接受返回值(箭头函数没有自己的this、call函数无法改变箭头函数的指向)

所以,因为这三个问题,箭头函数是无法当做构造函数

  1. 有用过node.js?Node 跟平常网页写代码有什么区别?

一个是基于浏览器端的 javascript (前端 JS)

一个是基于服务端的 javascript (后端 Node.js)

  1. 语法一样
  2. 组成不一样

JavaScript:

  • ECMAScript(语言基础,如:语法、数据类型结构以及一些内置对象)
  • DOM(一些操作页面元素的方法)
  • BOM(一些操作浏览器的方法)

Node.js:

  • ECMAScript(语言基础,如:语法、数据类型结构以及一些内置对象)
  • OS(操作系统)
  • file(文件系统)
  • net(网络系统)
  • database(数据库)

1、React的了解

1、父子组件传值

1、虚拟dom 为什么会提供渲染的性能,重绘跟回流的细节?

在流行的框架无论是React还是vue,都采用的是虚拟DOM

采用虚拟DOM的好处是,当数据变化的时候,无需像Backbone那样整体重新渲染,而是局部刷新变化部分

所谓虚拟DOM,其实就说用JavaScript对象来构建DOM树。

虚拟DOM以 js结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数,性能会有很大提示。

1、非父子怎么传值?

1、什么叫跨越?协议一样,a.baidu.com 和b.baidu.com他们会跨域?二级域名不一样,顶级域名一样他们会跨域?协议一样,端口一样,顶级域名也一样,他们会跨域?

跨域:浏览器的同源策略

同源:同域名,同协议,同端口号

1、有用过websocket?

1、哪些方式容易引起内存泄露?

https://blog.csdn.net/qq_38110572/article/details/121227359

闭包意外的全局变量引起的内存泄露.未清理的DOM元素引用被遗忘的定时器或者回调console

6、怎样避免内存泄露

1)减少不必要的全局变量,或者生命周期较长的对象,及时对无用的数据进行垃圾回收;

2)注意程序逻辑,避免“死循环”之类的 ;

3)避免创建过多的对象 原则:不用了的东西要及时归还。

基本数据类型和引用类型?

1提交表单用什么请求?Get 和post 区别

绝大多数情况下用get,get请求更快更简单

以下几种情况用post1

发送大呈数据的时候用post,get有数据数量的限制

发送的请求参数包含未知的用户输入的字符的时候用pos1

请求转发请求级存的时候

如果请求方式为post,那么ajax应该多—步设置请求头

数据格式Json

2、Session数据是怎么发送的,怎么关联这个http请求的?

1、怎么获取后端加密的数据,通过浏览器的理解,怎么理解定位他解密的算法?

1、怎么实现vue的数据双向绑定

1、Vue 路由用的什么组件?

缓存路由组件

<router-link :to=‘‘ class=‘active-class‘>   //路由声明式跳转 ,

active-class是标签被点击时的样式

<router-view>                  //渲染路由的容器

<keep-alive>                    //缓存组件

Typescript了解过?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝胖子20

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值