叶子科技

css

盒模型
清除浮动
响应式
rem 的原理
CSS 三角
BFC
wm

JS

基础类型
Symbol
类型检测
class 静态属性 ()
ES6 新特性
...运算符
generator

generator 与 async、await 和 Promise 的异同

遍历的方法

for of 和 for in 的异同
for of 遍历数组的原因

斐波拉契数列

优化点

let var 区别
Set、Map、WeakSet、WeakMap

webpack

mode
开发态和生产态的异同
webpack 的编译流程
AST
webpack 依赖树

鼎捷

面向对象编程和函数式编程

面向对象编程

面向对象编程是以 Class 为核心，侧重于对于数据的管理和各种处理方法

特点：

封装

Class 其本身就说明了对于逻辑的封装特性

继承

其使用原型链维护了子类与父类属性和方法的结构

多态

多态允许同一个方法执行是存在两种不同的行为：重载和覆盖

区别于 Java 的重载，在 JS 中同一作用域下函数名相同的会进行覆盖，其本身就支持重载的特性

覆盖：子类的方法会覆盖父类的方法

优缺点

优点：

高效率开发
易维护，结构清晰
易扩展
可重用

缺点：

过度的对象化
状态的共享导致耗内存和并发问题

函数式编程

函数式编程以函数为核心，侧重于数据的流转，只关心什么样的输入从而得到什么样的输出结果

特点：

函数式一等公民

说函数和其他数据类型一样处于平等的地位，可以作为变量赋值给其他变量、可以作为参数进行传递、可以作为其他函数的返回值等，正是由于函数的特殊地位我们才能去实现函数式编程。

纯函数

副作用

函数本身不依赖函数外部也不会修改函数外部的数据，如 this

引用透明

引用透明就是指输入相同的参数永远会得到相同的输出

数据不可变

其主要指的是引用类型的入参，如果需要修改，不要修改参数本身，而是重新生成一份进行修改 (immer.js)

优缺点

优点：

代码简洁，易于理解首先函数式编程使用的是声明式代码，因此特别易于理解，同时函数式编程将功能细分化能够有效的提高函数的复用率。
并发速度快使用 immutable 数据管理方式可以避免掉很多情况的 lock，并发处理速度会很快。
出错率少

缺点：

性能消耗大
资源占用大

Class 组件和函数组件的区别

相同点：

都是为了实现相同的组件功能，其效果都是一致的

不同点：

设计思想

类组件：其基于面向对象编程（OOP），所以其也包含了面向对象编程的特点：继承、封装、多态，也有内部的状态管理
函数式组件：其基于函数式编程(FP), 对于相同的输入必定得到相同的输出。所以其更纯粹、简单，更利于测试

独有能力

类组件：存在生命周期的能力
函数式组件：不存在生命周期方法，但是使用 Hooks 去实现了生命周期的功能

为什么主推函数式组件：

this 的模糊性
业务逻辑耦合在生命周期中

函数劫持

什么是 Hooks

Hooks 指的 "钩子"。指的是系统在执行到某一时机的时候回调被注册到该时机的回调函数。如const [num ,setNum] = useState(1)在需要的时候可以执行 setNum 的回调钩子函数.

目的：

更好的跨组件状态复用

如上述在多个组件使用 setNum 的功能的时候，如使用 Mixin，但是其存在很多问题，如合并的时候属性和方法名被不小心覆盖

提交组件内业务代码的高度内聚

类组件的同一逻辑的业务代码被分散到各个生命周期和属性定义中，通过抽离到同一个 Hooks 从而更好的阅读和测试

nextTick

介绍一下微前端
微前端中如何加载资源的
单例模式（设计模式）
继承、多态、封装
软件工程
团队管理

前端团队是如何搭建的
团队中遇到的棘手问题，如何解决的
如何保证团队的代码质量的
业务组件库如何维护的

Webpack 中的模块化

小西科技

原型和原型链

1. ES5 和 ES6 的继承

ES5 的继承主要为以下几个方面：

原型链继承

通过修改子对象的 prototype 指向父对象的实例对象，从而继承父对象的实例属性和方法。

缺点：

所有子对象实例对象的原型都指向同一个父对象的实例对象，使得父对象一修改实例属性或方法就会影响到所有的子对象的实例对象
不能够给父对象传递参数
子对象不能继承父对象的静态属性或者方法

构造函数继承

通过在子函数中通过 Parent.call(this) ,从而为每一个子实例对象生成一个新的父对象, 其修改了上述问题 1 和 2

缺点：

其不能继承父对象的原型对象

组合式继承
Promise 的原理
ES6 特性
BFC
自定义指令
脚手架搭建流程
Webpack 的编译流程
loader 的原理
常用的 loader 和 plugin

金智教育

微前端原理和选型
$message
组件运行时引入

可以借助于webpack5的联邦模式，将构建的组件作为一个

算法题

一维数组转换成二维数组

var translateArray = (targetArray, limit) => {
  var result = []
  while (targetArray.length) {
    result.push(targetArray.splice(0, limit))
  }
  return result
}
var translateArray2 = (targetArray, limit) => {
  var result = []

  for (let index = 0; index < targetArray.length; index++) {
    const element = targetArray[index]

    if (index % limit === 0) {
      result.push([element])
    } else {
      result[result.length - 1].push(element)
    }
  }
  return result
}

console.log(translateArray2([1, 2, 3, 4, 5, 6, 7, 8, 9], 2))
console.log(translateArray2([1, 2, 3, 4, 5, 6, 7, 8, 9], 1))
console.log(translateArray2([1], 2))

叶子科技 ​

css ​

JS ​

webpack ​

鼎捷 ​

面向对象编程和函数式编程 ​

Class 组件和函数组件的区别 ​

函数劫持 ​

什么是 Hooks ​

nextTick ​

小西科技 ​

1. ES5 和 ES6 的继承 ​

金智教育 ​

算法题 ​