面试题总结（二）

实现一个小盒子在另一个大盒子里面水平垂直居中

方法一：弹性盒子

<div class="box1">
     <div class="box2"></div>
</div>

.box1 {
    width: 100%;
    height: 500px;
    background-color: pink;
    /* 方法一：flex弹性盒子 */
    display: flex;
    justify-content: center;
    align-items: center; 
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
}

方法二：绝对定位

.box1 {
    width: 100%;
    height: 500px;
    background-color: pink;
    position: relative;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    /* 绝对定位 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

方法三：弹性盒子，外边距自动

.box1 {
    width: 100%;
    height: 500px;
    background-color: pink;
    display: flex;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    margin: auto;
}

列举数组的遍历方法并简述用法，最少5个

foEach——遍历数组
map——指定条件处理数组元素，返回由处理过后的元素组成的新数组
filter——筛选出满足指定条件的数组元素，返回满足条件的元素组成的新数组
some——判断数组中的元素是否满足指定条件，只要有一个满足就返回true
every——判断数组中的元素是否满足指定条件，只要有一个不满足就返回false

new操作符做了那些事情？

开辟一个内存存放新创建的对象--创建实例对象
将构造函数里的this指向实例对象
给实例对象新增属性和方法
隐式的返回了实例对象

防抖和节流

防抖和节流都是为了阻止某项操作高频触发

防抖是让用户多次触发，只生效最后一次，适用于只需要一次触发生效的场景
防抖应用场景：表单里的按钮，用户点击过快，发送多次请求

节流是让用户的操作，每隔一段时间触发一次，适用于多次触发要多次生效的场景
节流应用场景：监听滚动事件

隐藏元素有几种方法

visibility:hidden （占空间）
display:none（不会占用空间）
opacity:0 （占空间，透明度为0）
宽高设为0，然后再overflow：hidden(溢出隐藏)