头条一面面经

今日头条面试题总结-面经

学长吐血总结一定要看呀。
反正应该是凉了，所以总结一波，等秋招再战了，问题看似都不难，实则有很多小坑，需要知其然也知其所以然，需要些自己的理解，所以总结下各种规律，好记性不如烂笔头
一共八道大体，考验基础和编程能力居多吧

1，css设置个元素固定宽高居中显示，宽度总是高度的一半，当屏幕放大缩小时宽高比不变，文字垂直上下居中，元素左右边距15px，;

我的做法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    body{
        width:980;
        height:980px;
        margin:auto;
    }
    div{
        width: 90%;
        height: 45%;
        border:10px solid black;
        position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
        margin:auto 15px;
        text-align: center;
        line-height: 25em;
        text-align: center;
    }
<style>
<body>
    <div data-ratio="16:9">文字</div>
<body>

基本是实现文字水平垂直居中，元素水平垂直居中，宽为高的一半，但是如果浏览器缩放或者放大的时候文字可能会出去。

其实只要理解关于定位（绝对，相对，固定），css盒子模型margin就可以解决元素水平垂直居中的问题了

文字中的text-align:center line-height:25em属性就可以解决文字的水平垂直居中了，em是相对位置的单位，基本上就可以答出来了，宽高比是个坑，以后慢慢研究。

2第二题挺考的基础知识吧：argument是什么是数组吗，不是的话怎么转换成数组

argument是js中的一个数组对象，不是数组Array，
转换成数组用这个方法

1
2
3
4
5
var arr = Array.prototype.slice.call(arguments);
//或者
var arr = [].slice.call(arguments);
//或者
const arr = Array.from(arguments);

方法多重多样，大家考的是对知识的广度吧

3 第三题考的引用类型的判断吧，看输出结果

1
2
3
4
5
6
if([]==[]){console.log(0)}
if([]){console.log(1)}
if([] == false){console.log(1.1)}
if({}){console.log(2)}
if({}){console.log(3)}
if([1] == [1]){console.log(4)}

打印结果
1 1.1 2 3
关于引用类型。两个空数组的指向不一样，[]{}都有应用类型所以if==true 可以执行。就上考的引用类型。
当时第二天有python考试，，，，，结果想成python的语法了，呜呜呜，我1没写出，因为在python中 if([]){}是不执行的，两个串了，想哭，，，，，，，
[] == false输出为true所以可以执行
而且if([]){}因为有引用类型也可以执行，所以是1 1.1都输出了，恩，，，，js挺神奇的判断。mmmmmmp
引用类型。。。。这个打上重点符号！！！！！！！！！

4 第四题考的js中的事件触发机制和异步

不得不说要多看博客，多看技术博客，看人家的总结，掘金上的原题，1分钟写完结束
题目找不到了。找到个类似的,自己写输出结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2 start');
  return new Promise((resolve, reject) => {
    resolve();
    console.log('async2 promise');
  })
}

console.log('script start');
setTimeout(function() {
  console.log('setTimeout');
}, 0);  

async1();

new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
}).then(function() {
  console.log('promise3');
});
console.log('script end');

恩就是事件队列机制，很容易理解。
async promise 都是异步操作，考的同步和异步的差别。
只要能清楚的判断函数执行顺序，就能正确的打印出结果了。
答案

1
2
3
4
5
6
7
8
9
10
script start
async1 start
async2 start
async2 promise
promise1
script end
async1 end
promise2
promise3
setTimeout

主要是理解异步机制，虽说js中的异步很是坑爹，但只要找到其规律还是可以的，理解几种异步的方法有益理解js单线程。
关键词:异步，微任务，宏任务，事件队列，
解析

第15行执行，打印出script start

第16至18行，把回调任务放入Macrotask （目前Macrotask：第16行setTimeout，Microtask：空）

第20行，执行async1函数，先打印出第2行的async1 start

第3行的async2先执行，打印出第8行的async2 start

第9行至第12行遇到Promise，先打印出第11行的async2 promise（注意不管你resolve写在new Promise的函数什么位置，都跟写到最后一句一样！）

第3行的async2返回了Promise，并且async2前面有await修饰，因此后面第4行的任务被放到Microtask（目前Macrotask：第16行setTimeout，Microtask：第4行）

第22至25行，打印出promise1，并把第26行放入Microtask，注意第28行还没执行到，所以这行什么都不做（目前Macrotask：第16行setTimeout，Microtask：第4行，第26行）

第30行打印script end（目前Macrotask：第16行setTimeout，Microtask：第4行，第26行）

脚本主线程执行结束，现在拿出来一个Microtask，即第4行，打印async1 end（目前Macrotask：第16行setTimeout，Microtask：第26行）

再拿出来一个Microtask，即第26行，打印promise2，此时由于第26行后面跟着then，所以把第28行插入Microtask（目前Macrotask：第16行setTimeout，Microtask：第28行）

再拿出来一个Microtask，即第28行，打印promise3（目前Macrotask：第16行的setTimeout，Microtask：空）

Microtask没有了，执行下一个Macrotask，即第16行的setTimeout，打印setTimeout，结束

5 第五题又是异步，关于setTimeout,改写函数。

因为有setTimeout在调用for所以i一直会等下去，所以最后调用的时候i会一直等于最后一个数字，造成结果的不对，所以就没有了连续的效果，我就把setTimeout去了重新调用达成效果。
题目记不清了，答案还在，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let obj = {
    name:"jscoder",
    skill:["es6","react","argular"],
    say:function(){
        for(var i = 0;i<this.skill.length;i++){
            console.log(i+1)
        }
        for(var i = 0;i<this.skill.length;i++){
            console.log("No."+i+this.name)
            console.log(this.skill[i])
            console.log("----------------")
        }
    }
}
obj.say()
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
No.0jscoder
es6
----------------
No.1jscoder
react
----------------
No.2jscoder
argular
----------------

6 第六题大坑吧。。。。。。。。手写bind源码。

面试官上来就问看过bind源码吗，，，，，，心里苦啊。
题目大内容忘记了，
大概想让我们做的是这样，给出个动物类。然后定义猫类继承动物类，同时传参，实例化类cat1，让

1
2
cat1 instanceof cat == true
cat1 instanceof animal == true

给的定义函数是这样的animal.prototype.bind=funciton()
大概意思就是让你手搓个es5 中的bind函数
恩恩恩恩恩，我就大概说了下他是通过绑定函数来实现构造实例的。。。。恩恩恩，
构造函数继承的方法，我的上篇博客有写，不懂或者记不清的看上篇可以看看，这里我查了下，基本可以做到true的效果。
解析

1
2
3
4
5
6
7
8
9
10
11
function animal(name,color){
    this.name = name;
    this.color = color;
    return this.name + " , " + this.color;
}
animal.prototype.bind=function(x){
    let cat = Array.prototype.slice.call(arguments)
    return cat[0] = x
}
var Cat = animal.bind("猫")
var cat1 = new Cat("大毛")
1
2
3
4
5
6
cat1 instanceof animal
true

cat1 instanceof Cat
true
}

bind还能实现柯里化，等等妙用，恩，下次出个bind总结，源码就先不写了。

7 第七题考的是函数节流

合理利用setTimeout，优化，
笔试的时候考了控制重绘重流，所对于性能优化，讲道理还是好好看了下的，这题写出来了的。
节流的概念：DOM操作是很消耗性能的，如果某个事件不用一直执行，改成过一段时间执行一次的话，很降低很多不必要的消耗，所以就要用节流

红宝书，高程中的一段节流函数。

1
2
3
4
5
6
function throttle(method, context) {
    clearTimeout(methor.tId);
    method.tId = setTimeout(function(){
        method.call(context);
    }， 100);
}

就是把定时器ID记录下来之后，存为属性，然后就可以调用.

1
2
3
window.onresize = function(){
    throttle(myFunc);
}

还有一种写法

1
2
3
4
5
6
7
8
9
10
var throttle = function(fn, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay);
    };
 };

写成闭包形式，然后封装函数，最后可以这样调用

1
window.onresize = throttle(myFunc, 100);

两种方法各有优劣，前一个封装函数的优势在把上下文变量当做函数参数，直接可以定制执行函数的this变量；后一个函数优势在于把延迟时间当做变量（当然，前一个函数很容易做这个拓展），而且个人觉得使用闭包代码结构会更优，且易于拓展定制其他私有变量，缺点就是虽然使用apply把调用throttle时的this上下文传给执行函数，但毕竟不够灵活。

8 最后一题，算法题

给定一个数组，找出n个元素，判断其和是否等于sum,然后判断时间复杂度
数组，无序不重复
当时没写出来，后面查了下，可以用动态规划或者深度检索来做。
难点是熟悉动态规划，确定边界和逐层判断吧
js 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
function findGroup(arr,n,sum){
    if(sum == 0 && n == 0){
        return true;
    }else if(n <= 0){
        return false;
    }
    if(n > 0)
        for(var i = 0; i < arr.length; i++){
            var temp = arr.slice(i+1,arr.length);
            return findGroup(temp,n-1,sum-arr[i]) || findGroup(temp,n,sum);
        }
}
时间复杂度n**n

总结

感觉自己大部分是知道的，也答出来，写出来了，不知道为什么没有中奖，还需要继续加油啊，准备不是很充足呀，js基础还是要加深啊。争取秋招前做个项目出来，node大概会用。秋招加油啦

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

只是一个慢慢长大的小孩罢了