头条面试题

1.用reduce实现map

用reduce实现map

2.Promise和setTimeout综合输出顺序问题，宏事件微事件考察。

• 浏览器运行机制详解
• 重点在于：在执行异步队列时，执行完一个宏任务 ==> 执行完所有微任务 ===> 执行下一个宏任务，即优先执行微任务。

3.实现一个函数delay(alert,3,4000)(“hello”),每间隔4秒打印一次“hello”，打印三次。

  function delay(func, times, delay) {
    return async function(content) {
        for (var i = 0; i < times; i++) {
            await new Promise(resolve => {
                setTimeout(() => {
                    func.call(this, content);
                    resolve(true);
                }, delay);
            });
        }
    };
}

delay(console.log, 3, 4000)(123);

4.手写一个双向绑定，input输入的值响应在p标签上

5.实现左右布局，输入框自适应，按钮定宽的样式

<style>
div {
  display: flex;
}
input {
  flex: 1;
}
button{
  width: 100px;
}
</style>
<div>
    <input type="text" />
    <button>提交</button>
</div>

6. 伪数组转换为数组的方法

    let fakeArr = {
        0: 2,
        1: 3,
        2: 4,
        3: 4,
        length: 4
    }

    console.log(Array.prototype.slice.call(fakeArr, 0))
    console.log(Array.from(fakeArr))

7. 抽取数组中n个数字，其和为sum的函数

面试题：

1. 一个元素，先transform:translate(100px,100px),再rotate(45deg)的效果，以及两个操作颠倒执行后的效果

rotate会导致元素的X、Y轴旋转

2. 响应码的意义

3.

   function A(params) {
        this.c = 1;
    }
    let a = new A();
    A.prototype = {
        c: 1,
        d: 2
    };
    console.log(a.c);
    console.log(a.d);

• a始终指向A之前无数据的原型
• a实例本身包含属性c
• 所以输出1 undefined

4. 手写一个360旋转的动画

    /* animation-name   规定需要绑定到选择器的 keyframe 名称。。
    animation-duration  规定完成动画所花费的时间，以秒或毫秒计。
    animation-timing-function   规定动画的速度曲线。
    animation-delay 规定在动画开始之前的延迟。
    animation-iteration-count   规定动画应该播放的次数。
    animation-direction 规定是否应该轮流反向播放动画。*/

    @keyframes circle {
        100% {
            transform: rotate(360deg);
        }
    }

    .box1 {
        animation: circle 3s linear 0s infinite;
    }

5. keydown keypress keyup的区别

key相关事件发生顺序：onkeydown onkeypress onkeyup，只有onkeyup能够获取输入框完整的输入。

6. 防抖节流函数

7. 输入查询时， 两次的ajax都会修改dom， 如何解决

7. ==和===的比较规则

• 双等号==：
  • 1. 如果两个值类型相同，再进行三个等号(===)的比较
  • 2. 如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
    • 如果一个是null，一个是undefined，那么相等
    • 如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较
• 三等号===:
  • 1. 如果类型不同，就一定不相等
  • 2. 如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）
  • 3. 如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
  • 4. 如果两个值都是true，或是false，那么相等
  • 5. 如果两个值都引用同一个对象或是函数，那么相等，否则不相等
  • 6. 如果两个值都是null，或是undefined，那么相等

8. rem的使用

9. react如何绑定事件处理函数