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

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

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

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

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

第一天

• 基础的原型链属性访问
• RHS 与 LHS

child.a++ 
=>
child.a = child.a + 1;
复制代码

答案:

2

2

3

2

第二天

实现一个简单的双向数据绑定，使得 input 中的值可以及时显示在 div 中

<input id="input" />
<div id="content"></div>
复制代码

• 通过定义变量的 set 和 get 方法来实现值的获取与设置

答案:

let input = document.getElementById('input');
let content = document.getElementById('content');
let data = {};

Object.defineProperty(data, "value", {
  configurable: true,
  get: () => input.value,
  set: (value) => {
    input.value = value;
  }
});

input.onkeyup = () => {
  data.value = input.value;
  content.innerHTML = data.value;
}
复制代码

或者用 Proxy

let input = document.getElementById('input');
let content = document.getElementById('content');
let data = {
  value: ''
};

const proxy = new Proxy(data, {
  get: (target, key, receiver) => data['value'],
  set: (target, key, value, receiver) => {
    input.value = value;
  }
});

input.onkeyup = () => {
  data['value'] = input.value;
  content.innerHTML = data.value;
}
复制代码

Proxy 对整个对象进行拦截，不管是操作便利程度还是底层功能上都强于 Object.defineProperty

第三天

简单实现一个较为成熟的继承方式

• 避免相同的引用
• 注意性能，避免挂载多余的属性

function inherit(child, parent) {
  // 创建原型副本
  let prototype = Object.create(parent.prototype);

  // 调整构造函数
  prototype.constructor = child;

  // 挂载原型
  child.prototype = prototype;
}

function Parent(age) {
  this.age = age;
  this.arr = [1, 2];
}

function Child(age) {
  // 调用构造函数
  Parent.call(this, age);
}

inherit(Child, Parent);

let instance = new Child();
instance.arr.push(3);
let instance2 = new Child();

console.log(instance.arr); // [1, 2, 3]
console.log(instance2.arr); // [1, 2]
复制代码

第四天

实现一个异步的 Sleep 函数，然后使用适当的循环遍历 times 数组，让其达到如下效果

let times = [100, 200, 300, 400, 500]
function sleep(time) {...}; // time时间后打印time

// 100ms后
100
// 300ms后
200
// 600ms后
300
// 1000ms后
400
// 1500ms后
500
复制代码

• 使用 Promise 模拟 Sleep 函数
• 使用 Async/Await 来模拟异步循环，让其 One By One 地执行

let times = [100, 200, 300, 400, 500];

let sleep = (time) => 
  new Promise(resolve => setTimeout(() => resolve(time), time))
    .then(res => console.log(res));

(async function() {
  for (let time of times) {
    await sleep(time);
  }
}());
复制代码

第五天

添加代码，使以下代码成立

if(a == 1 && a == 2 && a == 3) return true;
复制代码

• 隐式转换时会调用对象的 toString 或valueOf 方法

const a = {
  i: 1,
  toString() {
    return a.i++;
  }
}

复制代码

广告

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

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

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

转载于:https://juejin.im/post/5d04fcd66fb9a07eb94f8998