前端溜圈群技术小题复盘-第二周

前端溜圈群技术小题复盘-第二周

每周工作日会出一道小题，一周五题，周六分享会复盘结束后本人会将问题与答案整理出来~方便群内小伙伴复习。

这里只整理简短的解析与答案(但是我会在每周复盘中详细讲解以及扩展)，具体内容不懂的话可以谷歌或者私我，当然还是建议大家多多思考多多讨论。

每天第一名正确回答并解释完整的同学可以获得群主的奖励红包

第一天

• 整个 script 为一个宏任务
• await 让出线程，其语法糖可以简单理解为

async function f() {
  await p;
  fn();
}

=>

function f() {
  return Promise.resolve(p).then(() => {
    fn();
  })
}
复制代码

p 立即执行，fn 为 Promise resolve后的回调，推入微任务队列

• setTimeout 为宏任务，promise 为微任务
• 每次 Loop 后，取出一个宏任务执行，然后清空微任务

答案:

script start async1 start async2 promise1 script end async1 end promise2 setTimeout

第二天

核心代码为 var a = b = 3，其等同于

b = 3;
var a = b;
复制代码

• b 全局声明
• var a 为 IIFE 内的局部变量
• typeof 不存在的变量为 undefined

答案:

undefined

number

第三天

• 第一个 fn 虽然在 obj 中调用，但是实际执行时是在 window 环境(因为并不是 obj.fn )
• Arguments 为类数组，执行其中方法，this 指向该 arguments

答案: 10 2

第四天

• 使用 Class 并返回实例来实现链式调用
• 用队列来维护事件执行顺序
• 使用延时器来模拟 Sleep
• 注意绑定 this

class ManagerClass {
  constructor(name) {
    this.taskList = [];
    console.log(`Hi I am ${name}`);
    setTimeout(() => this.next(), 0);
  }

  sleepFirst(time) {
    let fn = () => {
      console.log(`Sleep ${time}s...`);
      setTimeout(() => {
        this.next();
      }, time * 1000);
    }

    this.taskList.unshift(fn);
    return this;
  }

  sleep(time) {
    let fn = () => {
      console.log(`Sleep ${time}s...`);
      setTimeout(() => {
        this.next();
      }, time * 1000);
    }

    this.taskList.push(fn);
    return this;
  }

  eat(name) {
    let fn = () => {
      console.log(`I am eating ${name}`);
      this.next();
    }

    this.taskList.push(fn);
    return this;
  }

  next() {
    let fn = this.taskList.shift();

    fn && fn();
  }
}

function Manager(name) {
  return new ManagerClass(name);
}

Manager('AddOne').eat('breakfast').eat('lunch').sleepFirst(2).sleep(1).eat('dinner');
复制代码

第五天

CSS

请用一种简单方案实现如图效果

第一种：绘制三角形后定位到左上角

第二种：渐变

background:linear-gradient(135deg, #F3AC3C 100px, #0B2429 0);
复制代码

JS

使用 requestAnimationFrame 实现一个 setInterval

• 注意 requestAnimationFrame 的使用方法即可

function setInterval(func, interval) {
  let last = +new Date();
  let timer;

  const loop = () => {
    let now = +new Date();
    timer = window.requestAnimationFrame(loop);
    if(now - last >= interval) {
      last = now;
      func(timer);
    }
  }

  timer = window.requestAnimationFrame(loop);

  return timer;
}

let count = 0;
setInterval(timer => {
  console.log(1);
  count++;
  if(count === 5) cancelAnimationFrame(timer);
}, 1000)
复制代码

广告

每天群内会发一道技术小题，每周末会有视频技术分享和前端题复盘。

只面向前端大学生，希望积极活跃的你进群聊生活聊技术聊Idea。

欢迎大学生前端进群交流呀 ~ 小群人数不多，进群就是朋友，以后规模也会限制在50人左右~