Web前端最全想写好前端，先练好内功(2)，中高级前端面试题目汇总解答

2401_84620303

于 2024-05-17 04:32:30 发布

阅读量721

点赞数 17

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84620303/article/details/138986132

版权

程序员专栏收录该内容

95 篇文章 0 订阅

订阅专栏

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

提供受控属性 value 或其它与 valuePropName 的值同名的属性。
提供 onChange 事件或 trigger 的值同名的事件。
不能是函数式组件。

这正是“开闭原则”的一个典型实践案例，即表单核心逻辑（校验、提交等）保持不变并封装在 Form 组件中，自定义表单项只需要满足上述三条规约，就能平滑接入到 Form 组件中，和 Ant Design 原生组件契合在一起。

Ant Design 中的 Form 组件通过这样一个简洁的设计，完美提供了表单类型页面的统一解决方案。

函数式编程

随着人工智能、区块链、AR、VR、新零售等业务场景的出现，产品界面交互正在变得越来越复杂，这就对现代的前端开发者提出了更高的要求。如何快速、正确、高效地开发出高复杂度页面是目前前端技术最需要解决的问题。

函数式编程（以下简称 FP ）凭借其高复用性、易测试性和与之带来的健壮性和简洁开始逐渐占据前端技术圈，我们发现越来越多的前端框架以 FP 为设计核心准则。

我们先简单介绍一下 FP，函数式编程的特征主要包括以下几个方面：

函数为“一等公民”
模块化、组合
引用透明避免状态改变
避免共享状态

JS 语言中的函数不同于 Java ，C/C++ 等语言, 可以被当做参数和返回值进行传递，因此天生具备“一等公民”特性。“模块化、组合”、“引用透明”、“避免状态改变”、“避免共享状态”这四个特征都需要通过特定代码模式实现。先举两个小例子：

找出字符串中率先出现的四个非数字字符？

非 FP 风格

var words = [], count = 0;var text = str.split(‘’);

for (var i = 0; couont < 4, i < text.length; i++) {

if(!text[i].match(/[0-9]/)) {

words = words.concat(text[i]);

count++;

}

FP 风格

var words = str.split(‘’).filter(function(x){

return (!x.match(/[1-9]+/))}).slice(0,4);

第二段代码中使用的 js 数组方法 filter 和 slice，去掉了 for 循环，代码更简洁流畅。在写具体业务代码的时候，“模块化、组合”是 FP 最常用的技术，也是最重要的实现功能的手段。

分别实现数组所有元素相加、相乘、相与？

非 FP 风格

function plus(array) {

var res = array[0];

for (let i = 1; i < array.length; i++) {

res += array[i];

}}function mul(array) {

var res = array[0];

for (let i = 1; i < array.length; i++) {

res *= array[i];

}}function and (array) {

var res = array[0];

for (let i = 1; i < array.length; i++) {

res = res & array[i];

}

plus(array);

mul(array);and(array);

FP 风格

var ops = {

“plus”: (x,y)=>x+y,

“mul” : (x,y)=>x*y,

“and” : (x,y)=>x&y

}

function operation(op, array) {

return array.slice(1).reduce(ops[op], array[0]);

}

operation(“plus”, array);

operation(“mul”, array);

operation(“and”, array);

后一段代码中，使用了 reduce 函数代替了 for 循环，并将数值计算部分作为模块提取出来，当有新的计算类型时，只需要在 ops 对象中定义计算过程。这里就体现了 FP 中“模块化、组合”的特性。在 FP 风格下，我们习惯将复杂逻辑切割成一个个小模块，通过组合这些模块实现新的业务功能，当有新的需求到来时，我们尽可能地复用已有模块达到目标。FP 代码在复用性方面相比 OOD 有明显的优势。