面试题

未分类

前端基础

纯css实现正方形，只允许设置width，不允许设置height

flex布局

dom结构如下, 已知 container 元素是flex布局，container的宽为600px, first-child的宽为500px， last-child的宽为400px, 给first-child增加flex-shrink:1, last-child增加flex-shrink:2。求first-child和last-child的宽,并描述解答思路。

<div class="container">
  <div class="first-child"></div>
  <div class="last-child"></div>
</div>   

.container{
  display: flex;
  width: 600px;
  height: 300px;
  .first-child{
    width: 500px;
    flex-shrink: 1;
    height: 100px;
  }
  .last-child{
    width: 400px;
    flex-shrink: 2;
    height: 100px;
  }
}

HTTP的缓存控制

CSRF和XSS的原理及预防

实现一个函数，每次调用返回下一个偶数，不允许使用全局变量

getNumber() // 2
getNumber() // 4

举例说明js的函数的参数传递方式

var foo = {
    key: 1,
}
function func(obj) {
    obj.key = 2
}
func(foo)
console.log(foo) // 此时的输出结果是？

实现一个JSONP

实现domready方法

JS的new操作符具体做了什么

ES6 module require/exports/module.exports的区别

事件循环

在nodejs中，输出以下代码的执行顺序：

setTimeout(() => {
  console.log('timeout')
}, 0)
setImmediate(() => {
  console.log('immediate')
})

将上述代码放入文件回调又怎么输出？

const fs = require('fs');
fs.readFile("xxxx", function(err, file){
  setTimeout(() => {
    console.log('timeout')
  }, 0)
  setImmediate(() => {
    console.log('immediate')
  })
})

事件循环

用鼠标点击一下屏幕，输出结果是什么；为什么？事件循环是什么，微任务是什么，他们的执行顺序是什么样？哪些你知道的方法是微任务？

document.body.addEventListener('click', () => {
  Promise.resolve().then(()=> {
    console.log(1)
  });
  console.log(2)
});
document.body.addEventListener('click', () => {
  Promise.resolve().then(()=> {
    console.log(3)
  });
  console.log(4)
});

事件循环

const first = () => (new Promise((resovle,reject)=>{
  console.log(1);
  let p = new Promise((resovle, reject)=>{
    console.log(2);
    setTimeout(()=>{
      console.log(3);
      resovle(4); 
    },0)
    resovle(5);
  }); 
  resovle(6);
  p.then((arg)=>{
    console.log(arg);
  });
}));
first().then((arg)=>{
  console.log(arg);
});
console.log(7);

编码能力

实现一个数组随机排序的方法

函数柯里化

实现如下函数add,使如下执行都等于9

add(2,3,4)=9
add(2)(3,4)=9
add(2)(3)(4)=9
add(2,3)(4)=9

实现发布订阅模式

JS实现一个带并发限制的异步调度器

JS实现一个带并发限制的异步调度器Scheduler，保证同时运行的任务最多有两个。完善代码中Scheduler类，使得以下程序能正确输出

class Scheduler {
  add(promiseCreator) { ... }
  // ...
}
const timeout = (time) => new Promise(resolve => {
  setTimeout(resolve, time)
})
const scheduler = new Scheduler()
const addTask = (time, order) => {
  scheduler.add(() => timeout(time))
    .then(() => console.log(order))
}
addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')
// output: 2 3 1 4
// 一开始，1、2两个任务进入队列
// 500ms时，2完成，输出2，任务3进队
// 800ms时，3完成，输出3，任务4进队
// 1000ms时，1完成，输出1
// 1200ms时，4完成，输出4

实现一个Promise.all方法

JavaScript实现对象深拷贝方法

实现bind方法

实现debounce和throttle方法

vue的双向绑定实现

实现一个类，可以监听对象属性的值变化。
另外： 如何用proxy实现？

class Observe {
  constructor(data: Object) {
  }
  // 监听属性变更
  $on() {
  }
  // 触发属性变更事件
  $emit() {
  }
}
const data = new Observer({
  a: 1
});
coonsole.log(data.a) // console: 1
data.$on('a', (newValue, oldValue) => {
  // this === data
  console.log(newValue, oldValue);
});
data.a = 2 // console: 2 1

算法题目

已知两个链表, 从某个节点开始就交叉了，已知这两个链表的头节点, 求出交叉的节点

合并两个有序数组

二分查找

/**
  * 给定有序数组array和数字n，找出n在array中起始位置的下标和终止位置的下标
  * 如 array = [1, 1, 2, 2, 3], n = 2; 返回[2, 3]
  */
search(array: number[], n: number): [number, number]

链表

已知两个链表, 从某个节点开始就交叉了，已知这两个链表的头节点, 求出交叉的节

二叉树中的最大路径和

给定一个非空二叉树，返回其最大路径和。从树中任意节点出发，达到任意节点的序列。该路径至少包含一个节点，且不一定经过根节点

二叉树求和

给定一个二叉树和一个数字n，判断二叉树中是否有一个从根节点开始的路径上的数字之和等于给定的数字n

求无序数组中第K大的值

（快排或堆排序）

服务循环依赖检测

对于一个具体应用，已知各个服务的调用关系（即依赖关系），请判断是否存在循环调用。

求无需数组的中位数

工程能力

webpack

• tree shaking原理及使用
• loader与plugin的区别及使用
• loader plugin编写

babel

• 如何处理es6代码
• 如何才能避免tree shaking失效
• 如何解决polyfill问题

11月22日补充

标题：判断单向链表是否有环

描述信息
判断一个链表中是否有环

例如：A->B->C->D->B->C->D

D指向B形成环

要求：在空间复杂度O(1)的情况下，时间复杂度最小

求数组的有序度和逆序度

例如 [1, 2, 3, 0]
有序度： [1, 2] [1, 3] [2, 3]
逆序度： [1, 0] [2, 0] [3, 0]

基于promise的各种抽象

1. 将setTimeout封装成promise名为delay，调用形式如下

delay(ms).then(() => console.log('print after ms'))

1. 实现sleep方法

function sleep() {}
async function test() {
  console.time('sleep')
  await sleep(2000)
  console.timeEnd('sleep')
}

1. 并行请求

parallelFetch(['/api1','/api2']).then(list => console.log(list[0],list[1]))

1. 串行请求

serialFetch(['/api1','/api2']).then(list => console.log(list[1],list[1]))

1. 延迟请求

delayFetch('/api1',ms).then(data => console.log('data:',data)) 

1. 重试请求,重试之间有间隔

tryFetch('/api1',n,ms) 

1. 竞态请求

基于cancel请求实现一个搜索框，要求保持搜索数据永远是最新一次发送请求的结果，顺便考察防抖和节流

设计类似 Vue.js 双向绑定功能的核心逻辑“监听对象属性变化”功能

实现一个类，可以监听对象属性的值变化。加分项：考虑对象存在值为数组或对象的属性。

class Observe {
  constructor(data: Object) {
  }
  // 监听属性变更
  $on() {
  }
  // 触发属性变更事件
  $emit() {
  }
}
const data = new Observer({
  a: 1
});
coonsole.log(data.a) // console: 1
data.$on('a', (newValue, oldValue) => {
  // this === data
  console.log(newValue, oldValue);
});
data.a = 2 // console: 2 1

拟实现loadash中的_.get()函数

get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name')

当我们在使用new操作符时，它在对象操作的过程中具体做了什么

简单回答：
创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
属性和方法被加入到 this 引用的对象中。
新创建的对象由 this 所引用，并且最后隐式的返回 this 。

function Animal(name) {
      this.name = name;
}
  Animal.prototype.run = function() {
      console.log(this.name + 'can run...');
}
var cat = new Animal('cat'); //    
new Animal('cat')=function(){
let obj={}; //       
obj.__proto__=Animal.prototype; // obj->Animal.prototype->Object.prototype->null
return Animal.call(obj,'cat');//   this        
}

funtion getNumber() {
    let n = 0
    return () => {
        n++
        return n
    }
}
const func1 = getNumber()
const func2 = getNumber()
func1() // 结果是？
func2() // 结果是？
func1() // 结果是？
func2() // 结果是？