面试

8/5 21:00 阿里电话面试 20分钟

面试官评价：除了js,你了解点，其它的还是太少了
先介绍自己，介绍项目v-model 原理

1. let const

let 变量 const 常量
不存在变量提升 暂时性死区 块级作用域（定义的不在全局里面）

2. Symbol
3. this
4. bind, call, apply
5. http
   302 404
   canvas
   node.js 优点
   前端工程化：webpack

8/15 作业帮初试 gg

行内标签 块标签
Array的方法
移动适配方案
webpack原理
最后一个字符串回文子序列算法没写出来。。

8/30 字节跳动 视频面试 一个小时

1. git merge git rebase的区别

git merge 合并操作，将目标分支合并到当前分支

git merge
merge之前

执行命令。在master上

git merge dev

merge之后

可以看到，将dev分支上的最新记录，与主分支上的最新记录进行合并，并且提交了

git rebase 变基操作

git rebase 之前
git rebase master之后
操作记录

可以很明显的从上述图片中看到，将master分支rebase到dev上时，会将master上的新的commit拿到dev分支上。完全打乱了实际的历史提交记录

---

假设现在有一个master分支1-2-3,开发分支1-2-4-5.这两个在2的时候分开；

在dev分支上执行git merge master,将主分支合并到开发分支上，这时候的dev提交记录就会变成 1-2-4-5-6；这个6 就是两个分支最新的提交合并的一个新的提交；

如果执行git rebase master 将dev分支的基准修改，这时候的dev分支变成1-2-3-4-5；相当于从master的最新的提交出分开，而不是最开始的从2处分开

---

这里插一个问题,多次commit合并成一个commit

git rebase - i 版本号
这里将版本号之后的提交准备合并到版本号中，这个时候会进入到一个vi编辑模式，前面两行就是

git rebase -i 版本号之后
只需要将第二行的pick修改为squash,然后退出，就会将dev5.0的提交合并到dev4.0中

再加一个reset和revert的区别

git reset --hard 版本号
将HEAD指针指向指定版本，相当于舍弃了之后的所有
git revert -n 版本号
大致就是撤销该版本的修改，。我个人觉得，这就是一个简便的操作，把手动修改，变成命令撤销。并且提交到了暂存区，相当于执行了git add
还需要手动去commit才行

• iframe的全屏
  看了一下，iframe是可以设置宽高的，那么，他就是一个内联块元素,
  我当时是这么答的，我将iframe放在一个div块里面，iframe是全铺在div里的。视频播放时，自带的全屏按钮
• 301 302 304 401 403
  • 301 永久重定向
  • 302 临时重定向
  • 304 客户端发送附带条件的请求时，但未满足条件时，服务端会返回 - 304，不包含任何响应的主题部分；我所理解的就是，客户端发送一个请求，但是本地存在该资源缓存，只是不知道该缓存可不可用，就在请求头中附带if-**的字段。
    if-Modified-Since字段会带一个时间戳，服务器端会根据request头中：If-Modified-Since字段的时间与文件的实际修改时间进行比较。哪个新就用哪个
  • 401 第一次返回401，表示该请求需要http认证，第二次返回401表示认证失败
  • 403 服务器拒绝，权限不足
• cors
  req = request
  res = response //当时只记得res,导致答错了
  后端给返回头设置

Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Methods
这里有一个问题，美团的面试官和字节的面试官都说post请求会发起复杂请求，但是mdn上说的是head,get，post这三种方法会发送一次请求。明天实际操作就知道了这里post并不会发送OPTION请求，而且本地文件发起ajax,它的origin为null

• 垂直居中

1.
display:flex;
justify-content:center; /**水平主轴**/
align-content:center;   /*竖直交叉轴*/
2.
/*这个是人人网那个*/
/*子元素设置*/
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%);
transform: translateY(-50%);
3
position: absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;

• flex布局中左侧固定右侧伸缩
  calc(100%- 50px)
  flex-grow:1;//拉伸因子

.main{
  width:200px;
  display: flex;
}
.main .a{
  width:20px
}
.main b{width: 180px}
问 a,b宽度是多少。这题我答错了，
当时想的是bfc去了。实际应该是两者会收缩，等比收缩，
如果没有设置收缩因子的flex-shrink

• css 响应式正方形

1.
width:20vw;
height：20vw;
2.
/*百分比是根据父元素的宽来计算的的，但是这个里面不能插入元素
想要插入的化，就在加个块，使他脱离文档流，浮动出去*/
width:20%;
padding-top:20%;
3.
/*其实这个跟第2个差不多，想要插入元素的化，就添加子块，使其脱离文档流*/
.main{
  width: 20vw;
}
.main::after{
  content: '';
  display: block;
  padding-bottom:100%;
}

这里需要注意一点，就是长单词不会自动换行，平常的单词会换行；需要设置css3属性：word-wrap: break-word
padding-bottom:100%;

• box-sizing
  • content-box 标准盒子
  • border-box ie盒子
• 防抖函数

let debounce = function(func, delay){
  let timeout = null;
  return function(){
    let args = arguments;
    let context = this;
    clearTimeout(timeout);
    timeout = setTimeout(function(){
      func.apply(context, args);
    })
  }
}

• 快速排序
  我只说了原理。。。

人人网现场面试，聊了两个小时，面试笑嘻嘻，转身就GG

• 一个方块根据屏幕滚动，在父元素内滑动
  absolute => fixed
  el.getBoundingClientRect获取元素在页面中的位置,以及自身宽高
• 防抖
  -垂直居中
• 两列布局，右侧是左侧两倍
  我日，当时根本没想到用百分比。想到了网格布局，flex
• 数组降维
• 数组乱序