面试题2(day2)

[robbiemie]

1. 设计一个左边是img元素，右边是一个内容无限多的p元素，要求p元素随父元素的宽度自适应

<template>
  <div>
    <div class="img"></div>
    <p></p>
  </div>
</template>

<style>
.img {
  width: 100px;
  height: 100px;
  float: left;
  background: red;
}
p {
  background: bisque;
  width: calc(100% - 100px);
  height: 100px;
  margin-left: 100px;
}
</style>

2. 设计一个并发数为n的请求器

const ajax = console.log

// 请给出代码

const request = requestPool(3)
request.start()

题解

const ajax = console.log
const urls = ['1', '2', '3']

function requestPool(val) {

  let pool = [];
  let urls = val

  function execTask() {
    if(urls.length) return
    const url = urls.pop();
    const task = ajax(url)
    pool.push(task)
    task.then(res => {
      const index = pool.findIndex(item => item === task);
      pool.splice(index, 1);
    })
  }

  function loopTask(race) {
    if(!race) return
    race.then(res => {
      execTask()
      const race = Promise.race(pool)
      loopTask(race)
    })
  }

  return {
    start(num) {
      let max = num;
      while(pool.length < max) {
        execTask()
      }
      const race = Promise.race(pool)
      loopTask(race)
    }
  }
}

const request = requestPool(urls)
request.start(3)

typeof typeof null 值是多少

题解

typeof null: 'object'
typeof 'object': 'string'

如何判断数组类型

1. Array.isArray
2. xxx instanceof Array // true
3. Object.prototype.toString.call(xxx) // [object Array]
4. xxx.constructor == Array // true

给定下划线命名的字符串，要求转换为驼峰法格式，提供多种解法

题解

// 解法1
const str = 'you_code';

let [left, right] = str.split('_')

right = right[0].toUpperCase() + right.slice(1);

console.log(`${left}${right}`)

// 解法2
const str = 'you_code';
str.replace(/_(.?)/, ($1) => {
  return $1.slice(1).toUpperCase()
})

实现一个checkbox组件，和一个全选框，要求两个组件保持联动，请说明设计思路

• 条件1 点击全选框后，checkbox所有选项都要选中
• 条件2 checkbox中只要有一个选项未选中，全选框不可选中

伪代码

const checkboxGroup = {
  template: `
    <checkbox-group></checkbox-group>
  `,
  props: {
    id,
    defaultVal,
    options
  },
  data: {
    type,
    size,
    checked,
    disabled,
    map
  },
  methods: {
    addEventListener() {
      $on('broadcast', (id, value) => {
        map[id] = value
        this.check()
      })
    },
    check() {
      let isAllChecked = true
      Object.keys(map).forEach(key => {
        if(!map[key]) {
          isAllChecked = false
        }
      })
      return this.checkedAll = isAllChecked
    }
  },
}


const checkbox = {
  template: `
    <checkbox></checkbox>
  `,
  props: {
    id,
    type,
    size,
    disabled,
    checked
  },
  data: {
    value
  },
  methods: {
    onChange() {
      if(this.disabled) return
      this.value = !this.value;
      $emit('broadcast', this.id, this.value)
      $emit('change', this.value)
    }
  }
}