HTML题目

• HTML5 中有哪些语意化标签，都有什么用

  例如导航链接, 头部, 以及尾部等。用来明确一个Web页面的不同部分，能够清楚的描述其意义给浏览器和开发者。

<header>  <nav> <section> <article> <aside> <figcaption> <figure> <footer>

• 有哪些标签是属于块级元素的

<div> <h1>  <p>  <ul>  <table>

• 内联块有什么特性，和块级元素、行内元素有什么不同

默认情况下，行内元素不会以新行开始（无法设置宽高上下外边距），而块级元素会新起一行）。
内联块同时具有区块和行内元素的特点（不会另起一行、但是可以设置宽高外边距）

---

CSS题目

• css 常用选择器有哪些，优先级如何

  • 标签选择器、类选择器、ID 选择器
  • id选择器 > 类选择器 > 标签选择器

• 伪类/伪元素选择器有哪些

:hover                   
:active                
:frist-child            
:last-child        
::before
::after

• em / rem 单位属性的意思

  • 浏览器的默认字体都是16px，那么1rem=16px
  • rem 则是从根节点开始，计算字体的大小

• display:flex，使用该属性后，当前节点下元素会有发生什么变化

  • 所有元素变成flex item，所有元素按照主轴方向排列，每个元素可以自由设置宽度高内外边距，元素默认不换行，过长的元素会按比例压缩
  • 子元素的float、clear和vertical-align属性将失效。

• flex 布局中默认主轴和相交轴的方向是怎样的， 如何改变他们的方向

  • 默认情况主轴横向，相交轴竖直方向
  • flex-direction 属性可以改变主轴的方向，相交轴自动与主轴垂直

• flex:1 该属性是什么意思，在什么场景下会使用，flex简写包含了那几属性

  • 会被识别为 flex-grow:1，元素会按比例充满父级元素的内部
  • 一般会在平均分配元素空间的时候用到
  • flex是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis

• flex-shrink属性有什么作用

  • flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
  • 在某些时候为了避免元素被压缩 可以设置 flex-shrink:0

• 下图每个黑点是一个区块，用flex布局如何实现以下样式。

image.png

<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

.box {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    background: #ccc;
    padding:10px;
    box-sizing: border-box;
}

.item{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: black;
}

.row{
    flex-basis: 100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.row:nth-child(2){
    justify-content: center;
}

.row:nth-child(3){
    justify-content: space-between;
}

---

JavaScript 题目

• 在很多网页中的js文件都调用window.onload 或者 window.addeventlistener('load', fn)，这是为什么，DOMContentLoaded 与 load有什么不同

  • 因为网页代码从上往下执行，确保JavaScript脚本在文档加载完成之后再执行，这样避免了加载未完成就执行脚本，而无法获取对象的情况。
  • HTML文档被加载和解析完成时，会触发DOMContentLoaded事件；页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件

• call / apply / bind 这几个方法会用在什么地方有什么不同

  • 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向
  • call 与 apply在改变函数作用域的同时会执行函数， 而bing在改变作用域的时候则不会执行，而是返回一个新的函数
  • call 接受位置参数，apply接受数组

• 如何清除一个数字数组中，重复的数字

  • 可以用Set数据结构清除掉重复掉数字

const arr = [1,2,3,4,5,1,2,3,4,7,8,9]
const arr2 = [...new Set(arr)]

• 如何清除一个对象数组中，字面量重复的元素，（比例请求账单列表的时候，可能会出现两条完全一样的内容）

  • 和清除数字原理类似，将对象转成json，去重后再转回对象就可以了

const arr = [{a:1},{b:2},{c:3},{a:1},{d:4}]
const arr2= [... new Set(arr.map(item=>JSON.stringify(item)))].map(item=>JSON.parse(item))

• XMLHttpRequest / Fetch / Axios 三种请求方式的异同

  • 都是网络请求的api， Axios 是第三方工具包，XMLHttpRequest / Fetch 是原生api
  • XMLHttpRequest 请求的时候可以监听进度条，而Fetch 不支持。
  • XMLHttpRequest 使用的是回调函数方式处理返回， Fetch返回promise
  • Fetch请求默认不带cookies

• Promise / generataor 函数 / async/await 三者的联系

  • Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象
  • 一个 Promise有以下几种状态: pending: 初始状态，既不是成功，也不是失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。
  • generataor 函数 可以在函数内部调用 yield 关键字调用promise ，避免了回调嵌套的产生，但是yield不用调用promise 的返回值。
  • async/await 是 generataor 函数的语法糖，用新的关键字 awati 替代了 yield，await可以接受promise 的返回值。并且async/await 返回的也是一个promise

• 多个请求次序请求如何处理，例如请求服务器返回一组作者名称列表，再按每个作者名称查询他的文章，应该如何操作

  • 用async/await 语法可以避免回调嵌套。

const getData = async () => {
  const res1 = fetch('/author');
  const authorList = await res1.json();
  const res2 = await Promise.all(authorList.map(item=>fetch('/article?author='+item)))
  const articleList = await Promise.all(res2)
}

• 多个请求并发处理如何处理，例如，已经拿到了作者名称列表时，需要同时查询每个作者的文章，应该如何操作

  • 把peding的promise放进一个数组，使用 Promise.all 方法调用，可以让所有请求同时发出，并等待一起返回。

const getData = async () => {
  const res1 = fetch('/author');
  const authorList = await res1.json();
  const res2 = await Promise.all(authorList.map(item=>fetch('/article?author='+item)))
  const articleList = await Promise.all(res2)
}

---

React 题目

• react的常用的生命周期有哪些

  • 当一个 component 的 instance 被建立且加入 DOM 中时，其生命周期将会依照下列的顺序调用这些方法：

  constructor()
  static getDerivedStateFromProps()
  render()
  componentDidMount()
  

  • 当 prop 或 state 有变化时，就会产生更新。當一个 component 被重新 render 时，其生命周期将会依照下列的顺序调用这些方法：

  static getDerivedStateFromProps()
  shouldComponentUpdate()
  render()
  getSnapshotBeforeUpdate()
  componentDidUpdate()
  

  • 当一个 component 被从 DOM 中移除时，这个方法将会被调用：

   componentWillUnmount()
  

• react的更新机制是怎么做的

  • 状态树（state， props）更新都会对比与上一颗状态树的异同，当发现节点状态不同后，会更新当前虚拟dom，如果更新当虚拟dom不同，则刷新真实当dom

• PureComponent 有什么用

  • 只会浅层比较props 与state中的数据，避免某些额外的虚拟dom更新

• 在用数组循环渲染的组件中，用索引(index)作为key会有问题吗

  • 在数组元素不发生重排的时候，不会有问题，如果数组重排，可能会引发一些不可控制的展示bug

• 什么情况下需要需要用到redux（connect一个组件后，返回的是一个什么）

  • 在项目组件过多，传递props需要穿过多层组件的时候使用，方便统一数据管理
  • connect 默认返回的是一个PureComponent

• redux的数据流程

  • action => store => reducer => store => 更新component

• 过往的项目中是如何在redux发起异步请求的，比如在输入用户名密码后，显示个人中心，代码逻辑是怎么做的

  • 因为reducer处理数据是同步的，所有异步数据处理需要用redux-thunk / redux-saga中间键来处理异步
  • 可以在action处理完异步请求，直接向路由对象push一个新的地址

• 如何理解函数式编程，map filter reduce 函数在项目中用的多吗

  • 函数是"第一等公民"
  • 只用"表达式"，不用"语句"
  • 没有"副作用"
  • 不修改状态
  • 引用透明
  • map filter reduce 三个函数式编程代代表性的函数，应该会用的比较多

---

算法题目

• 常见数据结构有哪些

  • 数组 链表 字典 栈 队列 树 图

• 链表与数组在查询/插入元素的时候有什么不同

  • 链表插入删除速度快，但是查询速度慢
  • 数组插入热速慢，但是查询速度快

• 时间复杂度是什么，冒泡算法的事件复杂度是多少，原因？

  • 算法的时间复杂度（Time complexity）是一个函数，它定性描述该算法的运行时间，时间复杂度常用大O符号表述。
  • On^2, 每一次循环遍历数组的时候，元素只会向前移动一个位置，所以如果要保证所有元素正确排序，比如最小的元素在原数组的最后，需要排到最前，需要循环套循环，才能保证排序正确。

• 如何将以下数据转化成 两个 数组（服务器返回一组数据，需要将它转化为用于表格渲染的数据格式）

const obj = {
  '0': { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5, },
  '1': { key1: 11, key2: 12, key3: 13, key4: 14, key5: 15, },
  '2': { key1: 21, key2: 22, key3: 23, key4: 24, key5: 25, },
  '3': { key1: 31, key2: 32, key3: 33, key4: 34, key5: 35, },
}

// 转化以下格式
[ 'key1', 'key2', 'key3', 'key4', 'key5' ]
[
  [ 1, 2, 3, 4, 5 ],
  [ 11, 12, 13, 14, 15 ],
  [ 21, 22, 23, 24, 25 ],
  [ 31, 32, 33, 34, 35 ]
]

// 解答
const header  = Object.keys(obj[Object.keys(obj)[0]])
const body = Object.values(obj).map(item=>Object.values(item))

---

项目规划题目 (高级工程师的问题)

• 有没有做过从零搭建项目的经验

  • 如果没有做过，新建项目时候大概率会留坑

• 如何划分功功能模块/路由页面的

  • 按业务流程先后循序分
  • 按照业务的差异性区分
  • 大的路由页面内部，如何划分小的功能模块

• 过往中有没有遇到，因为项目前期设计不合理导致开发繁琐的事情，举例说明

  • 遗传下来的项目很可能有不合理的地方，能发现问题才能解决问题

• 如何处理以往项目不合理设计部分

  • 直接在原有基础上封装？
  • 改写原有基础逻辑？
  • 一边更新一边重构 ？

---

90%以上，并且能回答高级工程问题的，可以定位高级工程师
80%-90%为中级工程师，90%以上但是不能回答高级工程师的问题的
60% - 80 % 初级工程师
60%以下，待定吧，这套题目不太复杂。