面试经历

以下题目皆是本人亲身经历

布局

一.说一下盒模型（百度）
标准盒模型：由五部分组成margin,border,padding,height和width
可以设置box-sizing:border-content 为怪异盒模型
怪异盒模型：width已包括border和padding

二.说一下定位（平安寿险）
static:静态 ，遵循正常文档流，不受偏移量影响
relative:相对定位，相对正常位置偏移，不脱离文档流
absolute:绝对定位，会相对祖先级中最近设置了定位的元素偏移，脱离文档流
fiexed:固定定位，相对与浏览器窗口偏移，即使窗口滚动，脱离文档流

三.分别在已知和未知父盒子宽高的情况下两种方式实现水平垂直居中（京东达达）

四.三栏布局，三种实现方式（百度）

.wrap {
   
  width: 100%;
  height: 200px;
}
.wrap > div {
   
  height: 100%;
}
/* 方案1 */
.left {
   
  width: 120px;
  float: left;
}
.right {
   
  float: right;
  width: 120px;
}
.center {
   
  margin: 0 120px; 
}
/* 方案2 */
.left {
   
  width: 120px;
  float: left;
}
.right {
   
  float: right;
  width: 120px;
}
.center {
   
  width: calc(100% - 240px);
  margin-left: 120px;
}
/* 方案3 */
.wrap {
   
  display: flex;
}
.left {
   
  width: 120px;
}
.right {
   
  width: 120px;
}
.center {
   
  flex: 1;
}

五.flex怎么用（平安寿险）
flex-direction：row colunm row-reverse column-reverse
flex-wrap：nowrap wrap
justify-content：flex-start flex-end center space-between space-around
align-items：flex-start flex-end center stretch

六.flex:1是什么意思？(平安寿险)
第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

js

一.说一下数组的方法（平安寿险）
尾部推入推出：push(),pop()
头部推入推出：unshift(),shift()
删除数组元素：splice()，delete()
替换数组元素：splice()
插入数组元素：splice()
查找数组元素：indexof()
排序和反转：sort 和 reserve
根据指定字符连接称为字符串：join
返回一段被截断的数组：slice
累加器：reduce
filter: 过滤
some: 有一项返回true，则整体为true
every: 有一项返回false，则整体为false

二.说一下call,apply,bind方法（平安寿险）
call方法：第一个参数可以指定函数的this，可以执行函数
apply方法：作用和call方法一样，不同的地方是第二个参数是函数参数组成的数组。
bind方法：作用和call方法一样，不同的地方是不会去执行函数，返回一个指定了this的函数（绑定函数）

三.手动实现bind方法（平安寿险）

function bind_1(asThis, ...args) {
  const fn = this; // 这里的 this 就是调用 bind 的函数 func
  return function (...args2) {
    return fn.apply(asThis, ...args, ...args2);
  };
}

四.浅拷贝和深拷贝和直接赋值的区别？（平安寿险）
直接赋值：把一个对象a赋值给一个对象b相当于把一个对象b的地址指向对象a的地址，所以，他们实际上是同一个对象。
浅拷贝只会赋值制对象的非对象属性，不会指向同一个地址。
深拷贝会另外拷贝一份一个一模一样的对象,但是不同的是会从堆内存中开辟一个新的区域存放新对象,新对象跟原对象不再共享内存，修改赋值后的对象b不会改到原对象a。即深拷贝

1.如何实现深拷贝？（平安寿险）
利用JSON类

let b = JSON.parse(JSON.stringify(a));

利用递归的方式

function cloneDeep(target,map = new WeakMap()) {
  if(typeOf taret ==='object'){
     let cloneTarget = Array.isArray(target) ? [] : {};
      
     if(map.get(target)) {
        return target;
    }
     map.set(target, cloneTarget);
     for(const key in target){
        cloneTarget[key] = cloneDeep(target[key], map);
     }
     return cloneTarget
  }else{
       return target
  }
 
}

2.如何实现浅拷贝？（平安寿险）
object.assign()
展开运算符……
自己封装函数实现for in

五.函数防抖，节流知道吗，请实现（平安寿险）
函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
   
	if(!canRun){
   
		// 判断是否已空闲，如果在执行中，则直接return
		return;
	}

	canRun = false;
	setTimeout(function(){
   
		console.log("函数节流");
		canRun = true;
	}, 300);
};

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
   
	clearTimeout