前端校招字节跳动面试 第二篇

字节跳动二面

1.stick—footer的解决策略

stick footer就是让footer元素固定在底部，1当内容不足满屏时，footer紧贴最底部。2，满屏需要下拉时，footer就在内容的底部

通常用于提示的页面，下面有个x的按钮，这个按钮就是footer，它是用于关闭这个弹窗的，内容少时处在底部，多时下拉才显示。保证你都看完了。

使用方法就是在所有的内容页设置height:100%;写文字的部分最小的高度min-height:100%；footer处在内容页之外

<div class="content">
  <div class="text">内容内容文字</div>
</div>

<div  class="footer">关闭</div>

注意千万不要写错了把content包住text和footer。content只有一个子元素text

下面设置样式了

.content{height:100%}

.text{min-height:100%;padding-bottom:50px;}  //这个padding是给下面的按钮footer留的，是footer的高度。因为他自己已经设置了高度所以在这里要用padding

.footer{height:50px;margin-top:-50px;}

2.清除浮动的几种写法

详情请看第十问清除浮动的方法（最常用的4种）

3.bfc和margin坍塌

详情请看(立下flag）每日10道前端面试题-18 关于【盒模型】十问

4.flat()扁平化函数

详情请看8. 数组扁平化

5.flex用法，应用场景

参透字节面试题：flex用法，应用场景

6.flex分别有哪些方法用于容器和项目

同上

7.promise以及对一组promise对象按顺序请求

参考第十问:实现 mergePromise 函数，把传进去的数组按顺序先后执行，并且把返回的数据先后放到数组 data 中。

8.讲一下设计模式

9.http状态码301、302、304

301表示永久重定向（301 moved permanently），表示请求的资源分配了新url，以后应使用新url。

302表示临时性重定向（302 found），请求的资源临时分配了新url，本次请求暂且使用新url。302与301的区别是，302表示临时性重定向，重定向的url还有可能还会改变。

303 表示请求的资源路径发生改变，使用GET方法请求新url。她与302的功能一样，但是明确指出使用GET方法请求新url。

304 not modified 客户端发送附带条件的请求时（if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）。304状态码返回时，不包含任何响应的主体部分。304虽然被划分在3xx类别中，但是和重定向没有关系。

10.浏览器渲染原理

字节面试题：详解浏览器工作原理

11.session和cookies区别

• Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；
• Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。

类似这种面试题，实际上都属于“开放性”问题，你扯到哪里都可以。不过如果我是面试官的话，我还是希望对方能做到一点——不要混淆 session 和 session 实现。

本来 session 是一个抽象概念，开发者为了实现中断和继续等操作，将 user agent 和 server 之间一对一的交互，抽象为“会话”，进而衍生出“会话状态”，也就是 session 的概念。

而 cookie 是一个实际存在的东西，http 协议中定义在 header 中的字段。可以认为是 session 的一种后端无状态实现。

而我们今天常说的 “session”，是为了绕开 cookie 的各种限制，通常借助 cookie 本身和后端存储实现的，一种更高级的会话状态实现。所以 cookie 和 session，你可以认为是同一层次的概念，也可以认为是不同层次的概念。具体到实现，session 因为 session id 的存在，通常要借助 cookie 实现，但这并非必要，只能说是通用性较好的一种实现方案。

12.js原型链

所有的JS对象都有一个prototype属性，指向它的原型对象。当试图访问一个对象的属性时，如果没有在该对象上找到，它还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

13.箭头函数和普通函数的区别

参考第 7 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

14.算法题：在行递增列递增的矩阵中查找整数x

在一个 n * m 的二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。

示例:

现有矩阵 matrix 如下：

[
  [1,   4,  7, 11, 15],
  [2,   5,  8, 12, 19],
  [3,   6,  9, 16, 22],
  [10, 13, 14, 17, 24],
  [18, 21, 23, 26, 30]
]
给定 target = 5，返回 true。

给定 target = 20，返回 false。

解题方案
思路
标签：数组遍历
从矩阵的左下角看，上方的数字都比其小，右方的数字都比其大，所以依据该规律去判断数字是否存在
设当前数字为 cur，目标数字为 target，当 target < cur 时，cur 更新为其上面的数字，当 target > cur 时，cur 更新为其右侧的数字，直到相等则返回 true，否则到了矩阵边界返回 false
时间复杂度：O(m+n)
代码

/**
 * @param {number[][]} matrix
 * @param {number} target
 * @return {boolean}
 */
var findNumberIn2DArray = function(matrix, target) {
    if(matrix.length == 0)
        return false;

    let x = 0;
    let y = matrix.length - 1;

    while(x < matrix[0].length && y >= 0){
        if(matrix[y][x] > target) {
            y--;
        } else if(matrix[y][x] < target) {
            x++;
        } else {
            return true;
        }
    }

    return false;
};