前端面试题总结

时间:2020-10-27 作者:admin

link和@import的区别

1.link是html标签,@import在css里是值导入外部样式表
2.页面被加载时,link会被同时加载,而import会等它先加载完再加载
3.import只支持IE5以上才支持,而link是html标签,没有兼容问题
4.link比import权重要大
5.link支持javascript改变样式,而import不支持

javascript原型和原型链

每一个函数对象里都有一个prototype属性,被称为显示原型
每一个实例对象里都有一个_ _ proto _ _属性,被称为隐式原型
每一个prototype里都有一个constructor指向它关联的构造函数
原型链
获取对象属性时,如果对象本身没有这个属性,那么就会去它的原型_proto_上去找,如果没找到,就会去它原型的原型上去找,一直找到(Object.prototype),直到找到属性为止,Object.prototype也有原型,值为null

作用域和自由变量

作用域有:全局作用域,局部作用域,块级作用域(ES6新增只支持let,const)
自由变量:当前作用域中没有定义,但被使用了,就会一层一层往上级作用域去找,直到找到为止,如果到全局作用域还没找到,就报错
作用域链:自由变量向上级作用域去查找,一层一层查找,直到找到为止,最高到全局作用域,就形成了作用域链

this的五大调用场景

普通函数调用(this指向windows)
对象方法调用(this指向当前对象)
class调用(this指向实例对象对象)
call,aplly,bind调用(this指向被传入绑定的对象)
箭头函数调用(this指向上下文的this)

闭包

定义:函数嵌套函数,内部函数可以访问外部函数时,就产生了闭包
特性:1.函数嵌套函数
2.内部函数可以访问外部函数的变量或参数
3.不会被垃圾回收机制回收
优点:1.变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在
缺点:变量长期驻扎在内存中,增大了内存使用量,使用会造成内存泄漏
应用场景:回调和封装私有变量,防抖节流

宏任务和微任务

宏任务:setTimeout setInterval Ajax DOM事件
微任务:promise,async/await
微任务比宏任务执行要早

异步和单线程

异步和单线程是相辅相成的,javescript是一门单线程脚本语言,需要异步的辅助
异步和同步的区别:
异步不会阻塞程序的运行
同步会阻塞程序的执行
为什么会有同步和异步:
js是一门单线程脚本语言,js任务也是一个接一个来执行的,如果一个任务执行过久,后面的任务就只能等着它执行完毕,用户体验极差,所以就有了同步任务和异步任务

scr和href的区别

scr指向的是外部资源文件,指定的内容将会嵌套到文档中标签所在的位置
href指的是网络资源文件,可以将元素和文档之间形成一个链接,比如超链接

let、var、const的区别

var存在变量提升,let,const不存在
var不存在暂时性死区,let,const存在
var允许重复声明变量,let,const不存在
var不存在块级作用域,let,const存在
var和let允许修改声明的变量,const不允许

深拷贝和浅拷贝如何实现

深拷贝是层层拷贝,浅拷贝是只拷贝一层
深拷贝:深拷贝复制变量值,将非基本数据类型转换为基本数据类型,再复制,拷贝过的对象与原来对象相互隔绝互不影响
浅拷贝:是将对象的每个属性依次复制,对象是引用数据类型时,就不是复制而是引用,引用指向的值改变,它也会跟着变

递归实现深拷贝

1.将要拷贝的数据obj以参数的形式进行传参
2.声明一个变量来存储拷贝出来的内容
3.判断obj是否为引用数据类型,如果不是,则直接赋值(用instanceof判断)
4.根据判断不同的类型,再给之前的变量赋予不同的类型
5.循环obj中的每一项,如果里面有复杂的数据类型,则用递归再次调用copy函数
6.最后return出来这个变量

设计模式

单例模式:保证一个类只有一个实例,并为它提供一个全局的访问点
工厂模式:用工厂方法代替new操作的一种模式
观察者订阅模式:vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

普通函数和箭头函数的区别

1.箭头函数是匿名函数,不能作为构造函数来使用,不能使用new
2.箭头函数不绑定arguments,取而代之需要用从展开的扩展运算符
3.箭头函数不绑定this,则获取上下文的this作为自己的this来使用
4.箭头函数通过cell()和aplly()调用函数时,只能传入一个参数,对this没有影响
5.箭头函数没有原型属性

Ajax是什么?

Ajax是异步javaScript和XML的相结合
ajax并不是一种全新的技术,而是已有技术的相结合,主要用来实现客户端和服务器之间的异步通信效果,实现页面的局部刷新,早期浏览器不支持ajax,可以用隐藏帧变相实现异步通信效果,后来的浏览器支持了对ajax的支持
ajax原生发送请求只要是通过xmlhttpRequest(标准浏览器)ActiveXobject(IE浏览器)实现异步通信

如何创建一个Ajax

1.创建一个XMLHtthReques对象,也就是一个异步调用对象
2.创建一个新的http请求,并指定该请求的方法URL及验证信息
3.设置响应Http请求状态变化的函数
4.发送Http请求
5.获取异步调用返回的对象
6.使用JavaScript和DoM实现局部刷新

前端浏览器兼容问题

1.不同的浏览器marrgin和padding不同

解决方法:
1.CSS里 *{margin:0;padding:0;} 但是性能不好
2.一般我们会引入reset.css样式重置;

2.css3的新属性得加前缀才能兼容早期浏览器

-moz- 火狐浏览器
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器
-o- Opera浏览器(早期)

-ms- IE *

3. 超链接访问过后hover样式就不出现的问题

解决方案:改变浏览器的顺序

vue常用指令

v-moudel双向数据绑定
v-for循环
v-if添加或者删除
v-show显示或隐藏
v-text解析文本
v-html解析html标签

数组方法

push()向数组追加元素
delete()删除数组
pop()删除数组最后一个元素
splice()指定删除
sort()排序
toString()数组转字符串

跨域

协议、域名、端口都相同叫同域,否则就是跨域
解决跨域的方案:jsonp原理 代理 CORS
jsonp原理: 主要利用动态创建的script标签请求后端接口地址,然后传递callback参数,后端接收callback,后端经过数据处理,返回callback参数,后端接收callback,后端经过数据处理,返回callback函数调用的形式,callback中的参数就是json

cookie

cookie是用来和服务器通讯的,而不是本地存储,它只是被借用到本地存储里
cookie优点:
1.控制保存cookie中session对象大小
2.通过MD5加密和安全传输,减少cookie被盗的可能性
3.只有在cookie中存放不重要的信息,被盗也没事
4.控制cookie生命周期,让它不会永远有效,让偷盗者拿到的可能是过期的cookie
cookie缺点:
1.有长度限制,每个domain最多只能存放20条cookie,长度不能超过4kb,否则会被截掉
2.安全性差,cookie被盗,session信息也会被盗,加密也没用
3.有些状态不可保存在客户端,不起作用,例如:重复提交表单

数组去重

1.ES6-set
2.利用map数据结构去重
3.利用递归去重
4.forEach+indexof

vue2.0和vue3.0

更快更小更易维护,让开发者更轻松
更精准的变更通知
3.0新加了Typescript以及PWA的支持
创建项目和启动项目不同

for…in和for…of的区别

1.遍历数组的时候用for…of,遍历对象用for…in
2.for…in遍历的是key,for…of遍历的是value
3.for…of是新增特性,修复了ES5中for…in的不足
4.for…of不能循环普通的对象,需要和object.keys一起使用

ES6解构赋值

解构赋值就是提取数组和对象中的值,对变量进行赋值,这种方法称为解构赋值
定义和赋值必须放在一起,否则就会报错取不到数据
它可以让我快速的从复杂的对象中提取我们想要的值

vue常用的事件修饰符

.prevent: 提交事件不再重载页面;
.stop: 阻止单击事件冒泡;
.self: 当事件发生在该元素本身而不是子元素的时候会触发;
.capture: 事件侦听,事件发生的时候会调用

Vue.js中this.$nextTick()

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用,然后等待 DOM 更新。它跟全局方法
Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

vue中key的作用

Key值具有唯一性,用于管理可复用的元素。key的作用主要是为了高效的更新虚拟DOM,vue总高效的渲染元素而不是从头渲染,这个时候只需添加一个具有唯一值的 key 属性即可。

vuex中state,getters,mutations,actions,moudles,plugins的用途和用法

state:存储状态(变量)
getters:对数据获取之前的再次编译,可以理解为state的计算属性,在组件中使用 $ store.getters.fun()
mutations:修改状态,并且是同步的,和组件中自定义事件类似,在组件中使用$store.commit(” “,params)
actions:异步操作,在组件中使用 $store.dispath(” “)
modules:store的子模块,用来开发大型项目和方便状态管理而使用的

vue中data为什么必须是一个返回对象函数?

如果不是一个返回对象函数,那么所有组件都会引用同一份数据,这样就造成了全局污染

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。