fordeal 前端实习一面凉经-CSDN博客

本文链接：https://blog.csdn.net/weixin_44765858/article/details/114553998

fordeal 前端实习一面凉经

其实是3.4号面的，去面试之前还询问了牛客网的一位帅哥，这里就不@他了，面试官还是挺好的，只是本人实力比较差，所以应该是凉了。

好了，直接开始吧

首先是笔试题，有五道，30分钟内做完
题目忘了。。。

面试题

js的数据类型，你提到了symbol，说一下symbol的应用场景
答：我提到了基本的string,boolean,null,undefind,number,symbol还有es2020出的bigInt
数组扁平化怎么做
答：
1、可以使用es2019的方法Array.flat(Infinity)实现
2、可以使用递归的方式
3、可以使用JSON对数组进行序列化后再用正则匹配掉中括号
其实还有可以使用reduce实现

const flatten = arr => {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  }, [])
}
const res4 = flatten(arr);

作者：洛霞
链接：https://juejin.cn/post/6875152247714480136
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

正则是怎么用的，写一下匹配中括号的( 我没写上来)
有时间得好好复习一下正则，平时都是用到了再去查的

/\[|\]/g

node用的熟悉吗（不是很熟悉，只会使用express进行简单的curd，就说不熟悉）
webpack了解吗（自己不是很了解，所以面试官也就笑笑就过去了）
单页面和多页面的区别（这个当时说了很多，但是其实不太对）

	单页面应用（SinglePage Web Application，SPA	多页面应用（MultiPage Application，MPA）
组成	一个外壳页面和多个页面片段组成	多个完整页面构成
资源共用	共用，只需在外壳部分加载	不共用，每个页面都需要加载
刷新方式	页面局部刷新或更改	整页刷新
url 模式	a.com/#/pageone a.com/#/pagetwo	a.com/pageone.html a.com/pagetwo.html
用户体验	页面片段间的切换快，用户体验良好	页面切换加载缓慢，流畅度不够，用户体验比较差
转场动画	容易实现	无法实现
数据传递	容易	依赖 url传参、或者cookie 、localStorage等
试用范围	需要单独方案、实现较为困难、不利于SEO检索可利用服务器端渲染(SSR)优化	实现方法简易
开发成本	高要求的体验度、追求界面流畅的应用	适用于追求高度支持搜索引擎的应用
维护成本	较高，常需借助专业的框架	较低，但页面重复代码多
维护成本	相对容易	相对复杂

为什么要使用reacthook(这题我答的也不好)
大概是下面这样，其他的大家可以再看看文章，太多了，就不拷贝上来了
一、更容易复用代码
二、清爽的代码风格+代码量更少
说一下常见的状态码，并说一下都是什么问题（这题我就说了几个）

200 成功请求成功。一般用于GET与POST请求

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替（重定向）

400 Bad Request 客户端请求的语法错误，服务器无法理解（参数问题）

404 Not Found 服务器无法根据客户端的请求找到资源（网页）

500 Internal Server Error 服务器内部错误，无法完成请求

深冻结和浅冻结了解吗（不了解。。。）
浅冻结：直接使用Object.freeze() 可以冻结对象，此对象的属性不能修改，添加与删除属性的操作也被禁止，但是只可以防止第一层级的属性被修改，更深层级的属性操作却不能被禁止。
深冻结：（没有深冻结的方法，只能自己封装函数进行深冻结）使用递归
parseInt(‘FD12’)等于什么，parseInt(‘12FD’)又等于什么？内部是怎么实现的？
答：NAN，12，他会一个一个字符的检测，直到检测到非数字字符为止
translate,transform,transition的区别？（当时自己记混了答的不是很好）
translate:移动，transfrom的一个方法
　　通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）
　　
transform:变形，改变
　　CSS3中主要包括
　　　　旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
　　　　扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)
　　　　缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
　　　　移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离

transition:允许CSS属性值在一定的时间区间内平滑的过渡，
　　需要事件的触发，例如单击、获取焦点、失去焦点等
　　transition:property duration timing-function delay;
　　　　property: CSS的属性，例如：width|height|all 为 none 时停止所有的运动，可以为 transform
　　　　duration: 持续时间
　　　　timing-function: 过渡效果，ease等
　　　　delay: 延迟
　　注意：当property为all的时候所有动画
　　例如：transition: all 2s ease 0s;

场景题
调用后端api,一个循环一个参数如：[1,2,3,4,5] api(1),api(2)…类似这样的，怎么保证他返回的结果是[api(1)…api(5)]
这个答的不太会。。。
css Layers(图层)了解吗
当时回答了z-index,但是面试官说不仅仅是这个，然后就不会了，网上找答案好像也只是说到了z-index。
seo了解吗？该怎么做？
不了解，不会。。。。

总体面试完，总共大概一个半小时，虽然我答的不怎么样，但是面试官还是挺好的，最后也给了我一些建议，系统学习。