兴盛优选参考面经02
兴盛优选前端实习一面
学校里没有前端课程，如何学习前端的
- 开始是通过B站的一些网课学习HTML、CSS、JavaScript，还有前端框架Vue、React
- 现在更多的是通过官方文档或论坛来学习一些新技术新知识
flex布局
Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持。（设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。）容器属性
flex-direction：决定主轴方向 （rowcolumn）flex-wrap：当轴线放不下成员时，是否换行 (wrapnowrap)flex-flow：前两个属性（flex-directionflex-wrap）的缩写justify-content：成员在主轴上的对齐方式 （flex-startflex-endcenterspace-betweenspace-around）align-items：成员在交叉轴上如何对齐 （flex-startflex-endcenterstretchbaseline）stretch默认值：如果成员未设置高度或设为auto，将占满整个容器的高度。baseline: 成员的第一行文字的基线对齐。
align-content：属性定义了多根轴线的对齐方式。如果成员只有一根轴线，该属性不起作用，取值为flex-start | flex-end | center | space-between | space-around | stretch。
成员属性
order：定义成员的排列顺序，数值越小，排列越靠前，默认为0。flex-grow：属性定义成员的放大比例，默认为0flex-shrink：属性定义了成员的缩小比例，默认为1，即如果空间不足，该成员将缩小flex-basis：属性定义了在分配多余空间之前，成员占据的主轴空间main size，浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即成员的本来大小。flex：属性是flex-grow,flex-shrink和flex-basis的简写，默认值0 1 auto。后两个属性可选。align-self：**属性允许单个成员有与其他成员不一样的对齐方式，可覆盖align-items属性。**默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
grid和flex差别
- flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。
- flex 布局一次只能处理一个维度上的元素布局，一行或者一列。
- Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
css position有哪些值
static：正常定位，正常的布局行为（此时top,right,bottom,left和z-index属性无效。）relative：相对定位，在不改变页面布局的前提下调整元素位置absolute：绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，绝对定位完全脱离文档流与文本流，不占据文档空间fixed：固定定位，相对于窗口进行偏移定位,sticky：粘性定位，- 如果top、right、bottom、left四个属性都不设置具体值，sticky（粘性定位）不会生效，其表现效果与static一致
- 当在top、right、bottom、left四个属性中至少设置一个具体值时，元素具备两种状态 — 类似relative（相对定位状态）和类似fixed（固定定位状态）
meta标签
meta标签只能位于head元素内部。 在html中，meta标签没有结束标签。在xhtml中，meta标签必须被正确地关闭。 meta标签共有两个属性，分别是http-equiv属性和name属性。
如果设置了 name 属性，
<meta>元素提供的是文档级别（document-level）的元数据，应用于整个页面。如果设置了 http-equiv 属性，
<meta>元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。如果设置了 charset 属性，
<meta>元素是一个字符集声明，告诉文档使用哪种字符编码。如果设置了 itemprop 属性，
<meta>元素提供用户定义的元数据。
画一个彩色圆
border实现 边框均分原理.circle { width: 0px; height: 0px; /* border: 50px solid red; */ border-top: 10rem solid red; border-bottom: 10rem solid rgb(99, 15, 255); border-right: 10rem solid rgb(0, 0, 0); border-left: 10rem solid rgb(98, 246, 0); border-radius: 50%; }linear-gradient()渐变.circle1 { width: 10rem; height: 10rem; border-radius: 50%; background-image: linear-gradient(45deg, rgb(98, 246, 0), red, rgb(99, 15, 255), rgb(0, 0, 0), rgb(98, 246, 0)); }
font-size单位：
- px：绝对单位，页面按精确像素展示
- em：相对单位，基准点为父节点字体的大小，如果自身定义了
font-size按自身来计算，整个页面内1em不是一个固定的值 - rem：相对单位，可理解为
root em, 相对根节点html的字体大小来计算 - vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单
canvas和svg
canvas- Canvas 通过 JavaScript 来绘制 2D 图形。
- Canvas 是逐像素进行渲染的。
- 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
svg- SVG 是一种使用 XML 描述 2D 图形的语言。
- SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
- 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
区别
- canvas是H5时期才有绘图方法，而svg已经有了十多年的历史；
- canvas绘图是基于像素点，是位图，如果进行放大或缩小会失真；svg基于图形，用html标签描绘形状，放大缩小不会失真；
- canvas需要在js中绘制，svg在html绘制；
- canvas支持颜色比svg多；
- canvas无法对已经绘制的图像进行修改、操作，svg可以获取到标签进行操作。
React生命周期钩子
- 组件初始化阶段
- constructor
- getDeriviedStateFormProps
- render
- componentDidMount
- conponentWillUnmount
- 组件更新阶段
- getDeriviedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpDate
- componentWillUnmount
- 组件初始化阶段
防抖节流
防抖和节流都是用来防止高频率的js代码的执行
防抖：防抖的本质就是不管触发多少次事件，只会执行最后一次事件
- 非立即防抖：实现思路：每次触发事件时都取消之前的延时调用方法并重设定时器。
- 立即防抖：实现思路：判断是否存在定时器，没有则执行事件处理函数，然后无论是否已经存在定时器都需要重设定时器。
节流：节流的本质就是在一定时间内连续触发事件，但事件只会执行一次
- 定时器实现：实现思路：判断是否存在定时器，没有则执行事件处理函数并重设定时器。
- 时间戳实现：实现思路：通过时间戳记录上次事件处理函数执行时间，事件触发时若时间差大于执行周期则执行事件处理函数并赋值执行时间为当前时间戳。
闭包怎么产生的，为什么会有闭包，应用场景
- 怎么产生：
- 通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止。
- 原理：将闭包所需的数据，都存储到堆（Heap）上。
V8会将闭包所需的数据，存在函数的[[Scope]]的Closure对象上，这个对象在堆（Heap）上。
- 怎么产生：
- 为什么会有： - 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被用包围），这样的组合就是闭包（closure）。 - 闭包让你可以在一个内层函数中访问到其外层函数的作用域。 - 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。
- 应用场景：
- 模块：解决命名空间污染的问题（IIFE + 闭包即可实现。）
- 私有属性：
- 高阶函数、有状态的函数：（高阶函数、科里化、节流防抖（等要判断状态的函数））
- 缺点：
- 内存泄露
原型链
- 原型链：原型链可以简单理解为将原型连成一条链，
js每一次获取对象中的属性都是一次查询过程，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不到，就会去原型对象的原型中查找，也就是按照原型链查找，直到查找到原型链的顶端，也就是Object的原型。 prototype：每个函数对象都会有一个prototype属性，prototype就是调用构造函数所创建的那个实例对象的原型，prototype可以让所有对象实例共享它所包含的属性和方法。__proto__：是原型链查询中实际用到的，它总是指向prototype，就是指向构造函数Student的原型对象prototype。例如实例化的stu会使用__proto__向Student的prototype寻找方法或属性。若stu寻找到了调用的方法或属性，则不会使用__proto__寻找原型对象。constructor：每个原型都有一个constructor属性指向关联的构造函数Student，实例的constructor指向构造函数Student。
- 原型链：原型链可以简单理解为将原型连成一条链，
在string每一个字符后添加一个逗号：for循环，正则
function addDouHao(str) { let strReg = new RegExp(/\w/g); // 正则 查询所有的字符 console.log(str.replace(strReg, function (newStr) { // replace 传入函数,实现添加逗号 // console.log(newStr); return newStr + ',' })); }promise的三个状态；resolve()方法的返回值；
三个状态：
- 初始态
pending：创建Promise对象时的初始状态，这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。 - 成功态
resolved：调用resolve()方法 - 失败态
rejected：调用reject()方法
- 初始态
resolve的返回值Promise.resolve(value)方法返回一个以给定值解析后的 Promise 对象。- 如果这个值是一个 promise，那么将返回这个 promise；
- 如果这个值是 thenable（即带有 then 方法），返回的 promise 会“跟随”这个 thenable 的对象，采用它的最终状态；
- 否则返回的 promise 将以此值完成。此函数将类 promise 对象的多层嵌套展平。
数据结构有哪些
数组：在程序设计中，为了处理方便， 一般情况把具有相同类型的若干变量按有序的形式组织起来，这些按序排列的同类数据元素的集合称为数组
栈：一种特殊的线性表，只能在某一端插入和删除的特殊线性表，按照先进后出的特性存储数据；先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据
队列：跟栈基本一致，也是一种特殊的线性表，其特性是先进先出，只允许在表的前端进行删除操作，而在表的后端进行插入操作
链表：
- 是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的
- 链表由一系列结点（链表中每一个元素称为结点）组成，结点可以在运行时动态生成
- 一般情况，每个结点包括两个部分：一个是存储数据元素的数据域，另一个是存储下一个结点地址的指针域
树：树是典型的非线性结构，在树的结构中，有且仅有一个根结点，该结点没有前驱结点。在树结构中的其他结点都有且仅有一个前驱结点，而且可以有两个以上的后继结点
图：一种非线性结构。在图结结构中，数据结点一般称为顶点，而边是顶点的有序偶对。如果两个顶点之间存在一条边，那么就表示这两个顶点具有相邻关系
堆：堆是一种特殊的树形数据结构，每个结点都有一个值，特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆
散列表：若结构中存在关键字和
K相等的记录，则必定在f(K)的存储位置上，不需比较便可直接取得所查记录
- 线性结构有：数组、栈、队列、链表等
- 非线性结构有：树、图、堆等