面试题

Posted 2022-04-30 wdp888

1. js的window.onload事件和$(document).ready函数有什么区别？

在js中：
window.onload=function()
alert("000")

等同于在jQuery中：
$(window).load(function()
alert("000");
)

相同点：
（1）它们都是用于当前页面的所有元素，包括外部引用文件，图片都加载完毕时运行函数的alert函数。
（2）它们都是用于当前页面的标准DOM元素被解析成DOM树后就执行内部alert函数。

不同点：
（1）load方法只能执行一次，如果js文件里写了多个，只能执行最后一个。
（2）$(document).ready()函数在html结构加载完后就可以执行，不需要等大型文件加载或者不存在的连接等耗时工作完成才执行。

2. Promise的基本使用和原理

作用：
（1）解决回调地狱问题
（2）可以实现在多个请求发送完成后，再得到或者处理某个结果

原理：
promise有三种状态：
Pending Promise 对象实例创建时候的初始状态；
Fulfilled 可以理解为成功的状态；
Rejected可以理解为失败的状态；
（1）构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。
（2）Promise上还有then方法，then 方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）
（3）当状态变为resolve时便不能再变为reject，反之同理

3.下列html结构中，如何让子元素在父元素中垂直、水平居中。
<div class="parent">
<div class="child"></div>
</div>
一共有七种方法：
（1）定位+margin:auto
注意：兼容性较好，缺点:不支持IE7以下的浏览器
.parentr
position: relative;
width: 300px;
height: 300px;
background: yellow;

.child
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: red;


（2）定位+margin-left+margin-top
注意：兼容性好;缺点:必须知道元素的宽高
.parent
position: relative;
width: 300px;
height: 300px;
background: yellow;

.child
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: red;

（3）定位+transfrom
这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
.parent
position: relative;
width: 300px;
height: 300px;
background: yellow;

.child
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;

（4）弹性盒子
移动端首选
.parent
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background: yellow;

.child
width: 100px;
height: 100px;
background: red;

（5）flex+margin: auto
.parent
display: flex;
width: 300px;
height: 300px;
background: yellow;

.child
margin: auto;
width: 100px;
height: 100px;
background: red;

4.列举2个IE与标准浏览器对事件处理的区别？（监听、阻止冒泡、阻止默认等）
（1）阻止（取消）默认事件
DOM中：event.preventDefault() 阻止默认行为；
IE中: event.returnValue=false 返回值=false
（2）取消冒泡事件
标准浏览器下 DOM中 : event.stopPropagation() 停止传播；
IE8及以下：event.cancelBubble=true 取消冒泡
（3）事件侦听和删除侦听（又叫绑定事件）
ie9以上：添加事件：element.addEventListener(‘事件名’,事件函数名,事件冒泡/捕 获)；
ie8及以下：添加事件：element.attachEvent(‘on开头的事件名’,事件函数名)；

5.指出for、for...in、for...of的区别
（1）for循环：
for循环可以有多层嵌套；
for循环中的变量生存周期为一次循环迭代；
循环条件时每次循环执行一次，而且是在循环最开始时判断条件；
（2）for...in循环：
for..in是 ES5出现的， 循环遍历的是属性，并且自定义属性(attribute)也会被遍历，而且遍历还不一定按照顺序
作用于数组的for-in会循环遍历数组元素
（3）for...of循环：
for...of 是ES6出现的 循环遍历的是值
for...of不能循环普通的对象，需要通过和Object.keys()搭配使用