# 知识总结

# html

  • html5 新标签以及语义化

# css

# 1. 简单介绍下BFC以及作用

BFC(Block Formatting Context)块级格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC 形成条件:

  1. 浮动元素,float 除 none 以外的值;
  2. 定位元素,position(absolute,fixed);
  3. display 为以下其中之一的值 inline-block,table-cell,table-caption;
  4. overflow 除了 visible 以外的值(hidden,auto,scroll);

BFC 特性:

  1. 内部的 Box 会在垂直方向上一个接一个的放置;
  2. 垂直方向上的距离由margin 决定;(解决外边距重叠问题)
  3. bfc 的区域不会与 float 的元素区域重叠;(防止浮动文字环绕)
  4. 计算 bfc 的高度时,浮动元素也参与计算;(清除浮动)
  5. bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素;

# JavaScript

# 什么是闭包

函数 A 内部有一个函数 B,函数 B 可以访问到函数 A 中的变量,那么函数 B 就是闭包。

function A() {
  let a = 1
  window.B = function () {
      console.log(a)
  }
}
A()
B() // 1
  • 说下你对原型链和原型的理解

  • 说下对 ES6 中的 promise 的理解

  • 手写 promise

  • 介绍下 this 关键字

# 手写 new 关键字

在调用 new 的时候发生的事情:

  1. 生成一个新的对象
  2. 连接到原型
  3. 绑定this
  4. 返回新的对象
function _new(fn,...args){
  //先用Object创建一个空的对象,
  const obj = Object.create(fn.prototype) 
  //现在obj就代表Dog了,但是参数和this指向没有修改
  const rel = fn.apply(obj,args)
  //正常规定,如何fn返回的是null或undefined(也就是不返回内容),我们返回的是obj,否则返回rel
  return rel instanceof Object ? rel : obj
}

实现步骤:

  1. 接收不定量的参数, 第一个为构造函数, 后续参数为构造函数所使用
  2. 创建一个空对象 obj , 并指定 __proto__
  3. obj 绑定到构造函数中, 并传入剩余参数
  4. 判断构造函数返回值是否为对象,如果为对象就使用构造函数返回的值,否则使用 obj,这样就实现了忽略构造函数返回的原始值

关于构造函数的返回值:

  • 返回值不为对象, 则无任何意义。例子如下:
function Test(name) {
	this.name = name
	return 1
}
const t = new Test('hecun')
console.log(t.name) // 'hecun'
  • 返回值为对象, 则返回对象
function Test(name) {
	this.name = name
	console.log(this) // Test { name: 'hecun' }
	return { age: 26 }
}
const t = new Test('hecun')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'
  • 手写 bind apply等
# 手写 instanceof

instanceof 可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype

function myInstanceof(left, right) {
  let prototype = right.prototype
  left = left.__proto__
  while (true) {
    if (left === null || left === undefined)
      return false
    if (prototype === left)
      return true
    left = left.__proto__
  }
}

实现步骤:

  1. 首先获取类型的原型
  2. 然后获得对象的原型
  3. 然后一直循环判断对象的原型是否等于类型的原型,直到对象原型为 null,因为原型链最终为 null
  • map 和 set 的区别

  • 介绍下 JavaScript 中的类

# 手写一个深拷贝

方法一:

通过 JSON.parse(JSON.stringify(object)) 来解决。

局限性的:

  • 会忽略 undefined
  • 会忽略 symbol
  • 不能序列化函数
  • 不能解决循环引用的对象

方法二:

function deepCopy(data) {
  const t = typeOf(data);
  let o;

  if (t === 'array') {
    o = [];
  } else if ( t === 'object') {
    o = {};
  } else {
    return data;
  }

  if (t === 'array') {
    for (let i = 0; i < data.length; i++) {
      o.push(deepCopy(data[i]));
    }
  } else if ( t === 'object') {
    for (let i in data) {
      o[i] = deepCopy(data[i]);
    }
  }
  return o;
}
# 类型转换
# == 和 === 有什么区别?

==

  • var、let 及 const 区别

  • 原型如何实现继承?Class 如何实现继承?Class 本质是什么?

  • 为什么要使用模块化?都有哪几种方式可以实现模块化,各有什么特点?

  • Proxy 可以实现什么功能?

  • setTimeout、setInterval、requestAnimationFrame 各有什么特点?

  • 如何避免回调地狱问题?

# 设计模式

# 数据结构和算法

  • 手写冒泡排序

  • 手写快速排序

  • 手写插入排序

  • 手动实现里一个栈, 并简单介绍

  • 手动实现里一个队列, 并简单介绍

# 什么是搜索二叉树

二叉搜索树(BST)的性质:

  • 节点 NN 左子树上的所有节点的值都小于等于节点 NN 的值
  • 节点 NN 右子树上的所有节点的值都大于等于节点 NN 的值
  • 左子树和右子树也都是 BST
# 判断给定二叉树是否为搜索二叉树

方法一: 在中序遍历后,成升序 方法二: 使用递归 利用二叉树概念 进行判断

# 二叉树的前序遍历 中序遍历和后续遍历
  • 介绍一下链表

  • 算法题: 合并两个有序链表

  • 算法题: 检测链表是否有环

  • 为什么树形结构中常用递归

# 广度优先遍历

典型广度优先题目

广度优先通过队列处理 【深度优先用栈】

  • 将一层记录在数组中 并记录数组长度
  • 找下一行所有数据
  • 将数组首位弹出 将首位的左右节点追在数组后
  • 按照记录的数组长度 将上层的结点全部弹出后 此时数组只剩下下一行结点了 此时就完成了一层的遍历

模板代码:

var arr=[]  //用来记录行节点 每行都存与arr数组中
arr.push(root)
while(arr.length>0){
  //你的操作    
  //本题是记录末位

  var len=arr.length
  while(len>0){
    var now=arr.shift()
    if(now.left!=null)
      arr.push(now.left)
    if(now.right!=null)
      arr.push(now.right)
    len--
  }
}

# 浏览器

  • 进程与线程区别?JS 单线程带来的好处?

  • 什么是执行栈?

  • 异步代码执行顺序?解释一下什么是 Event Loop

# 描述一下EventLoop的执行过程
  • 一开始整个脚本作为一个宏任务执行

  • 执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列

  • 当前宏任务执行完出队,检查微任务列表,有则依次执行,直到全部执行完

  • 执行浏览器UI线程的渲染工作

  • 检查是否有Web Worker任务,有则执行

  • 执行完本轮的宏任务,回到2,依此循环,直到宏任务和微任务队列都为空

  • V8 下的垃圾回收机制是怎么样的?

  • 事件的触发过程是怎么样的?知道什么是事件代理嘛?

  • 什么是跨域?为什么浏览器要使用同源策略?

  • 你有几种方式可以解决跨域问题?了解预检请求嘛?

  • 有几种方式可以实现存储功能,分别有什么优缺点?

  • 浏览器渲染原理?

  • 什么是重绘(Repaint)和回流(Reflow)?

# vue

  • 什么是 MVVM?比之 MVC 有什么区别?

# react

# TypeScript

# webpack

# pwa

  • 什么是 Service Worker?

# 前端性能优化

# docker 和 jenkins

# 自动化部署

# http

Last Updated: 5/9/2020, 9:51:11 AM