面试题目整理

作者: 那个大螺丝 | 来源:发表于2020-08-23 22:53 被阅读0次

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%以下，待定吧，这套题目不太复杂。

面试题目整理

HTML题目

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

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

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

CSS题目

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

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

em / rem 单位属性的意思

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

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

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

flex-shrink属性有什么作用

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

JavaScript 题目

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

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

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

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

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

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

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

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

React 题目

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

react的更新机制是怎么做的

PureComponent 有什么用

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

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

redux的数据流程

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

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

算法题目

常见数据结构有哪些

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

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

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

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

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

`flex-shrink`属性有什么作用

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

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

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