1、清除浮动的方法有哪些?
为什么要清除浮动,因为浮动的盒子脱离标准流,如果父盒子没有设置高度的话,下面的盒子就会撑上 来。
1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置 clear:both;)(不推荐)
2.父级添加 overflow 属性(父元素添加 overflow:hidden)(不推荐)
3.使用 after 伪元素清除浮动(推荐使用)
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
4.使用 before 和 after 双伪元素清除浮动
.clearfix:after,
.clearfix:before {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
2、this 的指向有哪些?
1、普通函数中的 this 指向 window
2、定时器中的 this 指向 window
3、箭头函数没有 this,它的 this 指向取决于外部环境、
4、事件中的 this 指向事件的调用者 黑马程序员
5、 构造函数中 this 和原型对象中的 this,都是指向构造函数 new 出来实例对象
6、类 class 中的 this 指向由 constructor 构造器 new 出来的实例对象
7、自调用函数中的 this 指向 window
3、什么是递归,递归有哪些优点或缺点?
递归:如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。简单理解:函 数内部自己调用自己, 这个函数就是递归函数
优点:结构清晰、可读性强
缺点:效率低、调用栈可能会溢出,其实每一次函数调用会在内存栈中分配空间,而每个进程的栈的容 量是有限的,当调用的层次太多时,就会超出栈的容量,从而导致栈溢出。->性能
4、什么是深拷贝、什么是浅拷贝?
浅拷贝:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝 的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个 地址,就会影响到另一个对象。(1.Object.assign() 2.concat() 3.扩展运算符 4.slice()
深拷贝:会拷贝所有的属性,并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即 发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。(1. 利用json数据和json字符串之间的转换 2.$.extend() 3. 递归 4.splice())
5、图片懒加载是怎么实现的?
就是我们先设置图片的 data-set 属性(当然也可以是其他任意的,只要不会发送 http 请求就行了,作用 就是为了存取值)值为其图片路径,由于不是 src,所以不会发送 http 请求。
然后我们计算出页面 scrollTop 的高度和浏览器的高度之和, 如果图片距离页面顶端的坐标 Y(相对于整个页面,而不是浏览 器窗口)小于前两者之和,就说明图片就要显示出来了(合适的时机,当然也可以是其他情况),
这时 候我们再将 data-set 属性替换为 src 属性即可。(懒加载是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资源。
当一个网站的加载图片过多时就需要懒加载的协助,页面图片多时,在首次载入时一次性加载会耗费时间长,使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。)
6、vue 中 computed 和 watch 的区别是什么?
computed计算属性就是为了简化 template 里面模版字符串的计算复杂度、防止模版太过冗余。
它具有 缓存特性 computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed 里面定义,然后就 可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
watch主要用于监控 vue 实例的变化,它监控的变量当然必须在 data 里面声明才可以,它可以监控一个 变量,也可以是一个对象,一般用于监控路由、input 输入框的值特殊处理等等,它比较适合的场景是 一个数据影响多个数据,它不具有缓存性
watch:监测的是属性值, 只要属性值发生变化,其都会触发执行回调函数来执行一系列操作。
computed:监测的是依赖值,依赖值不变的情况下其会直接读取缓存进行复用,变化的情况下才 会重新计算。
除此之外,有点很重要的区别是:计算属性不能执行异步任务,计算属性必须同步执行。也就是说计算 属性不能向服务器请求或者执行异步任务。如果遇到异步任务,就交给侦听属性。watch 也可以检测 computed 属性。
7、箭头函数有哪些特征,请简单描述一下它?
箭头函数没有自己的 this,this 指向定义箭头函数时所处的外部执行环境的 this
即使调用call/apply/bind也无法改变箭头函数的 this 箭头函数本身没有名字箭头函数不能 new,会报错
箭头函数没有 arguments,在箭头函数内访问这个变量访问的是外部执行环境的 arguments箭头函数没有 prototype
8、post 和 get 请求有哪些区别?
GET:一般用于信息获取,使用 URL 传递参数,对所发送信息的数量也有限制,一般在 2000 个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
GET 方式需要使用 Request.QueryString 来取得变量的值,而 POST 方式通过 Request.Form 来获取变量 的值,也就是说 Get 是通过地址栏来传值,而 Post 是通过提交表单来传值。
然而,在以下情况中,请使用 POST 请求: 无法使用缓存文件(更新服务器上的文件或数据库) 向服务器发送大量数据(POST 没有数据量限制) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
9、http 状态码分别代表什么意思?
1xx 表示 HTTP 请求已经接受,继续处理请求
2xx 表示 HTTP 请求已经处理完成(200)
3xx 表示把请求访 问的 URL 重定向到其他目录(304 资源没有发生变化,会重定向到本地资源)
4xx 表示客户端出现错误 (403 禁止访问、404 资源不存在)
5xx 表示服务端出现错误
10、BFC 是什么?
BFC(会计格式化上下文),一个创建了新的 BFC 的盒子是独立布局的,盒子内元素的布局不会影响盒 子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题。
BFC 是值浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布 局,这个渲染区域只对块级元素起作用
11、call、apply、bind 三者的异同
共同点 : 都可以改变 this 指向;
不同点:call 和 apply会调用函数, 并且改变函数内部 this 指向.call 和 apply传递的参数不一样,call 传递参数使用逗号隔开,apply 使用数组传递 bind 不会调用函数, 可以改变函 数内部 this 指向. 应用场景并不会立即执行。(bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。)
call 经常做继承.
apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
bind 不调用函数,但是改变 this 指向. 比如改变定时器内部的 this 指向