2020-06-12 面试

笔试题

1.请用 CSS 浮动，绝对定位，flex 布局实现两列布局，要求左列宽度 200px ，右列占满剩余空间（尽可能多的解决方案）。

浮动：

<div class="box_1">
  <div class="left">left1</div>
  <div class="right">right1</div>
</div>

/* 触发父元素 BFC */
.box_1 {
  overflow: hidden;
}
.box_1 .left {
  float: left;
  width: 200px;
  height: 200px;
}
.box_1 .right {
  margin-left: 200px;
  height: 200px;
}

定位：

<div class="box_2">
  <div class="left">left2</div>
  <div class="right">right2</div>
</div>

.box_2 {
  position: relative;
  width: 100%;
  height: 200px;
}
.box_2 .left {
  position: absolute;
  width: 200px;
  height: 200px;
}
.box_2 .right {
  margin-left: 200px;
  width: calc(100% - 200px);
  height: 200px;
}

flex：

<div class="box_3">
      <div class="left">left3</div>
      <div class="right">right3</div>
    </div>

.box_3 {
  display: flex;
  height: 200px;
}
.box_3 .left {
  width: 200px;
  height: 100%;
}
.box_3 .right {
  flex: 1;
  height: 100%;
}

2.下面的代码运行结果是什么：

(function (){
  var i = 0
  var arr = []
  for(i;i<3;i+=1){
    arr.push(function(){
      console.log(i)
    })
  }
  arr[0]()
  arr[1]()
  arr[2]()
})()

解答：

3
3
3

3.以下代码的运行结果是什么：

const a = new Promise((rs) => {
  console.log('1')
  rs()
}).then(() => {
  console.log('2')
})
console.log('3')
setTimeout(() => {
  console.log('4')
}, 0)
a.then(() => {
  console.log('5')
})

解答：

// 注意 new Promise 里面的逻辑是同步
1
3
2
5
Promise {<resolved>: undefined}
4

4.有对象 json，请实现一个 treeLog 方法，以控制台缩进的方式打印这个对象的树状结构：

const a = {b: 1, c: 1, d: {e: 'hh', f: 10}}
// 要求结果
--b:1
--c:1
--d
  --e:hh
  --f:10

解答：

function treeLog(obj, num = 0) {
  const arrKeys = Object.keys(obj)
  if (arrKeys.length > 0) {
    arrKeys.forEach((key) => {
      const el = obj[key]
      if (Object.prototype.toString.call(el) === '[object Object]') {
        console.log(`--${key}`)
        treeLog(el, 1)
      } else {
        console.log(`${num === 1 ? '\t' : ''}--${key}:${el}`)
      }
    })
  }
}

5.请实现一个防抖函数，在多次调用后的 wait 秒后执行 fn 函数

function debounce(fn, wait) {

}

解答：

export const debounce = (fn, wait) => {
  let timer = null
  return function() {
    let args = arguments
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, wait)
  }
}

6.请用 ES6 和 ES5 实现类的继承：父类 Person 包含属性 name 和方法 sayName，子类 Man 继承父类，并额外拥有属性 sex 和方法 sayNameAndSex
解答：
ES6

class Person {
  constructor() {
    this.name = 'yanxugong'
  }
  sayName() {
    return this.name
  }
}

class Man extends Person {
  constructor() {
    super()
    this.sex = '男'
  }
  sayNameAndSex () {
    return `${this.name} ${this.sex}`
  }
}

// 测试：
const man = new Man('男')
man.sayName()
man.sayNameAndSex()

ES5

function Person(name) {
  this.name = name
}
Person.prototype.sayName = function () {
  return this.name
}
function Man(sex) {
  Person.call(this, 'yanxugong')
  this.sex = sex
}
Man.prototype = Object.create(Person.prototype)
Man.prototype.constructor = Man
Man.prototype.sayNameAndSex = function () {
  return `${this.name} ${this.sex}`
}

// 测试：
const man = new Man('男')
man.sayName()
man.sayNameAndSex()

面试题