快手前端实习一面面经

首先问了项目的背景。
问了js的数据类型
闭包、闭包的应用
ES6的新特性
1. 提了promise，进而提出宏微任务。我说dom的是异步操作是宏任务，面试官给我讲了下，说应该是微任务。给我举例了vue中的nextTick方法，是在所有dom的异步操作后执行。然后问我nextTick的实现原理，如果dom操作是异步宏任务，会等的比较长的时间，（宏任务执行优先级低？所以等的时间长，不是，而是macrotask有哪些可选的方案呢？前面提到了setTimeout是一种，但它不是理想的方案。因为setTimeout执行的最小时间间隔是约4ms的样子，略微有点延迟。），异步操作是微任务的话，就直接在微任务后添加一个微任务就可以按顺序执行了，也就是说nextTick也是微任务。
2. 可以参考另一个笔记【异步详解和nextTick关系,待更新，可私聊我发你...】

题目的输出

    function bar() {
            console.log(myName)；
    }

    function foo() {
            var myName = '快手’；
              bar()；
    }

    var myName = ‘用户增长’；
    foo();

var name = ‘window’;
const person1 = {
      name: ‘person1’,
      sayName: () => {
            console.log( ‘this.name’ );
    }
}
person1.sayName();

var a = ‘globalA’;
var obj = {
      a: ‘objA’,
      test
}
function test() {
      console.log(this.a)
}
obj.test();
const globalTest = obj.test;
globalTest();

console.log(‘script start’);
setTimeout(function() {
  console.log(‘setTimeout’);
}, 0);
Promise.resolve().then(function() {
  console.log(‘promise1’);
}).then(function() {
  console.log(‘promise2’);
});
console.log(‘script end’);

CSS方面
1. position的属性值有哪些，都有什么区别。
2. flex的属性名都有哪些？
  1. 这个没怎么打出来，都给忘了，很不应该。
  2. justify-content:flex-start,space-around,space-between,center,flex-end;
  3. align-items:flex-start,flex-end,center,baseline,stretch
  4. flex-direction:row,row-reverse,column,column-reverse
  5. flex-wrap:nowrap,wrap,wrap-reverse
3. 实现一个div的水平垂直居中。
  1. 答了利用浮动，flex，绝对定位。
实现左侧固定，右侧自适应
1. 手写几种代码。

算法题

实现二分查找

//while循环实现
// function search(arr,target){
//     let max = arr.length-1,
//         min = 0;
//     while(min<=max){
//         let mid = Math.floor((min+max)/2);
//         if(arr[mid]<target){
//             min = mid+1;
//         }else if(arr[mid]>target){
//             max = mid-1;
//         }else{
//             return mid;
//         }
//     }
//     return -1;
// }

//递归实现
function search(arr,target){
    let midIndex = Math.floor(arr.length/2);
    if(arr[midIndex]==target) return midIndex;
    if(arr[midIndex]<target){
        search(arr.slice(midIndex+1),target);
    }
    if(arr[midIndex]>target){
        search(arr.slice(0,midIndex-1),target);
    }
    console.log(arr[midIndex])
    return -1;
}

console.log(search([1,2,3],6));

b. 使用两个栈实现一个队列

//用两个栈实现一个队列。

// 封装一个栈，只有进栈，出栈操作。
class Stack {
    constructor(arr){
        this.ary = arr||[];
        this.length = this.ary.length;
    }
    push(item){
        this.ary.push(item);
        this.length++;
        // console.log(this.ary);
    }
    pop(){
        this.length--;
        return this.ary.pop();
    }

}

//两个栈模拟队列。

function stackToQueue(){
    this.stack1 = new Stack();
    this.stack2 = new Stack();
}
stackToQueue.prototype.enqueue = function(item){
    this.stack1.push(item);
}
stackToQueue.prototype.dequeue = function(){
    if(this.stack2.length){
        return this.stack2.pop();
    }else{
        while(this.stack1.length){
            this.stack2.push(this.stack1.pop());
        };
        return this.stack2.pop();
    }
}
stackToQueue.prototype.toString = function(){
    let str = '';
    for(let i=this.stack2.length-1;i>=0;i--){
        str+=this.stack2.ary[i];
    }
    for(let i=0;i<this.stack1.length;i++){
        str+=this.stack1.ary[i];
    }

    return str;
    //return this.stack2.reverse().join(',')+','+this.stack1.join(',');
}

let queue = new stackToQueue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
queue.enqueue(4);
queue.enqueue(5);
queue.enqueue(6);
console.log(queue.toString());
queue.dequeue();
console.log(queue.toString());
queue.enqueue(7);
queue.enqueue(8);
console.log(queue.toString());

#实习##面经##快手##前端工程师#