undefined

vuePress-theme-reco Smalin    2020
undefined

Choose mode

  • dark
  • auto
  • light
首页
分类
  • Linux
  • Vue
  • Nginx
  • 树莓派
  • NodeJs
  • JavaScript
  • CSS
  • git
  • 面试
  • HTML
  • Video
  • Tools
  • VSCode
标签
时间轴
Contact
  • GitHub
  • 简历
author-avatar

Smalin

34

Article

22

Tag

首页
分类
  • Linux
  • Vue
  • Nginx
  • 树莓派
  • NodeJs
  • JavaScript
  • CSS
  • git
  • 面试
  • HTML
  • Video
  • Tools
  • VSCode
标签
时间轴
Contact
  • GitHub
  • 简历

面试题集(7)-- 头条

vuePress-theme-reco Smalin    2020

面试题集(7)-- 头条


Smalin 2020-07-23 JavaScript 面试

被面试官虐的体无完肤,之前基础什么的都还好,最后写了几道题,几乎都是错的。。。

所以一面就挂掉了。。

# 1. this 指向的问题

# 2. 箭头函数的作用?

# 3. 来做道题吧,这个输出什么?

const a = function () {
  const x = {
    m: function () {
      console.log(this)
    },
    n: () => {
      console.log(this)
    }
  }
  return x
}
const b = {}
const c = a.call(b)

c.m()
c.n()

# 4. JS 的作用域和作用域链讲讲?

# 5. EventLoop 机制?

# 6. 宏任务和微任务?

# 7. 哪些是宏任务?哪些是微任务?

# 8. new 的作用?

# 9. 实现一个 new

const Car = function () {}

const car = new Car

const car1 = New(Car)

// 实现 New

# 10. 说说变量提升

# 11. 为什么有变量提示?

# 12. let 和 const 有变量提升吗?

# 13. 像 var 一样使用 let 和 const 有什么问题吗?(暂时性死区)

# 14. 为什么会有暂时性死区?

# 15. ES6 了解吗?Promise 能解释一下吗?

# 16. Promise 除了 then cache 还有别的方法吗?

# 17. HTTPS 和 HTTP 的区别?

# 18. HTTPS 的原理?

# 19. 说一下浏览器的缓存机制

# 20. CSS 的定位有几种?

# 21. 分别相对于什么元素来定位的?

# 22. 来做道题吧,实现 reduce

Array.prototype.customReduce = function () {

}

# 23. 实现一个 render 函数

用 Javascript 对象模拟 DOM 树,并实现它的 render 方法,通过调用该方法可以转成真正的 DOM 节点。例如我们已经实现了 element.js,通过 require('element.js'),我们可以定义 ul,如下:

const el = require('./element.js');
const ul = el('ul', {id: 'list'}, [
  el('li', {class: 'item'}, ['Item 1']),
  el('li', {class: 'item'}, ['Item 2']),
  el('li', {class: 'item'}, ['Item 3'])
])

现在 ul 只是一个 JavaScript 对象表示的 DOM 结构,页面上并没有这个结构。我们可以根据这个 ul 构建真正的 <ul>,最终当我们这样调用时,

const ulRoot = ul.render();
document.body.appendChild(ulRoot);

body 中就有了真正的 DOM 结构,如下

<body> 
  <ul id='list'>
    <li class='item'>Item 1</li>
    <li class='item'>Item 2</li>
    <li class='item'>Item 3</li>
  </ul>
</body>

也就是说,我们需要实现 element.js

点击查看代码

function el (tag, data, el) {
  return {
    render: function () {
      const element = document.createElement(tag)
      element.el = el
    
      if (data) {
        for (let key in data) {
          switch (key) {
            case 'id':
            case 'class':
              element.setAttribute(key, data[key])
              break
            default: break
          }
        }
      }
    
      for (let i = 0; i < el.length; i++) {
        if (el[i].render) {
          element.append(el[i].render())
        } else {
          element.append(el[i])
        }
      }
      return element
    }
  }
}

# 24. 写一个双向链表,实现 insert 和 removeAt 方法

Javascript 构造一个双向链表,并且实现它的插入和删除方法,例如 insert(position, element) 表示在 position 位置插入值为 element 的节点,removeAt(position) 表示删除 position 位置的节点。

// 链表节点
class Node {
    constructor(element) {
        this.element = element
        this.prev = null
        this.next = null
    }
}