前端开发可能问到的问题：
自我介绍（一定要对项目很熟悉）
ui-app web前端技术体系？
react框架 – hooks有哪些？
- useState 返回一个状态和一个设置状态的数组，相当于在类组件中的 state（vue里的data）
- useReducer : 和 redux 很像，useState就是靠他实现的。逻辑很复杂且包含子值，或者下一个state依赖于之前的 state
- useContext: 可以让能够读取 context 的值，以及订阅 context 的变化，用来使用上层组件传递来的 Provider (注入、依赖)
- useEffect: 副作用， 指那些没有发生在数据向视图转换过程中的逻辑，例如：ajax请求，访问原生dom元素，本地持久化缓存，添加订阅，定时器，记录日志等，还有一个清楚副作用的操作，放在 return 返回的回调函数
- useRef: 返回一个可用的 ref 对象 ，它的 current 属性被 初始化为 传入的参数
- 别的不怎么用 就这几个常用的
性能优化怎么做？
- 减少http请求
- 使用服务器渲染，首屏加载快，seo好，缺点 ：配置麻烦，增加服务器压力
- 使用静态资源 CDN
- 使用字体图标 代替图片图标
- 利用浏览器缓存机制，不重复加载相同资源
- 图片延迟加载，移动端先不设置原图，点击显示原图
- 多用事件委托
- webpack 使用摇树优化（把无效的属性样式擦除），作用越提升（把所有代码放一个作用域里，适当重命名防止控图，监视函数声明和内存开销）
- 抽离公共文件，使用webpack把公用的代码 单独提取到一个文件
hooks好处？
- 让使用函数也可以用 state和其他 React 特性
- 使用 useEffects（副作用） 代替了声明周期
- 自己也可以编写 hooks 在多个组件中复用
组件通信办法？
- 父子组件通讯
- props， 和传入回调
- 兄弟组件
- 状态提升，找到共同的父元素组件，然后使用 props传递
- Provider/Consumer (相似 vue3 的注入和依赖) 在父组件里提供数据，子组件使用直接接收
- 使用插件 ，pubsub-js 插件 订阅者和发布者模式来完成 兄弟组件通讯
- redux 状态管理
redux是什么？
是 react 的状态管理工具，类似于 vuex
redux 的三大原则：
- 单一数据源 ：整个应该的state都存储在一个 store 中
- State是只读的 ：唯一改变的方法就是 触发 action,用于描述已发生事件的普通对象
- 使用纯函数来执行修改 ： 为了描述action改变state,要先编写 reducers
响应式怎么做？
promise是什么？
用来处理异步函数，回调地狱的一种编程解决方案，Promise 是一个对象，可以获取异步操作的消息
有三种条状，等待态，已成功，已失败 。状态一旦改变就不可以逆向
then可以链式调用时,因为上一个 then 里面返回一个 Promise
catch 用来捕获错误，可以只用一个 catch，也可以多个
all 接收一个数组，等里面所有的Promise 都返回 在执行
race 数组中 谁跑的快就执行谁
box-sizing有哪些值
标准盒子模型 只有宽，怪异盒子模型 width+padding+border
解释css伪类伪元素、css画圆
伪类是 ：hover :active
伪元素：：：before, ::after
画圆：先定义一个正方形，然后 border-radius:50%
项目中react是多少版本的？
16.8.0 2019年 2月
数组api
pop push shift unshif reserve sort splice slice join forEach map some every find findIndex indexOf filter reduce from toString
类组件与函数组件的区别？
- 类组件是声明周期，函数组件使用的 是 hooks 技术
- 函数组件获取的是 事件发生前的值，类组件获取的是最新的值
- 类组件有this
React倒计时组件
react-countdown 都是看着文档操作 ， 在npm 或者 github上
render跟状态的差异
类组件的生命周期？
阻止冒泡，阻止事件默认行为
文本垂直居中。 line-height设置为元素高度。
函数组建销毁的时候打印当前时间
在副作用 函数 useEffect 里面 return 的返回值是一个 回调函数，当组件销毁前会调用
用reduce讲数组中的对象进行合并
解释localstorage sessionstorage cookie
eventbus满足event.on('eventname', callback)
冒泡排序
function sort(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
let temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
}
}
}
return arr
}
display有几个值？默认值？
position有几个值？默认值？
div水平垂直居中？
position有哪些值
react函数组件销毁时打印时间、react打印元素内容 、组件销毁时代码写在哪
useEffect（副作用） 返回的函数是 销毁前执行
react相关问题（概念理解、通讯组件等）、react常用内置
React-router
html+css
代码数组 [1, 2, 3, 4]的每一项加2，然后取出所有偶数，再进行求和数组的api
var arr = [2, 1, 3, 5, 2, 10]
// 过滤出来所有的偶数
let result = arr.filter(item => item % 2 === 0)
// 求和
let sum = result.reduce((count, next) => count + next, result.length * 2)
console.log(sum);
多机型适配问题如何解决的？
- 设置理想窗口
- 移动端使用 的是 REM + vw 布局方案 ，px自动转 REM 使用的插件，amfe-flexible，postcss-pxtorem
- vw 插件px自动转换 ** postcss-px-to-viewport**
axios封装
在 工具文件夹，创建 request.js 对 axios 进行封装，设置请求时间，添加路径， 设置请求拦截器和响应拦截器，并做处理
登陆实现
验证用书 input 输入正确在提交，然后编码发起请求， 发请求用节流，请求不返回点击无效，登录成功返回 token 存到 vuex 中，然后通过 vuex 的持久化存储方案 ，插件（vuex-persist）
请求返回然后 跳转首页，通过 token 发起请求获取信息，在axios请求拦截器判断 不是登录 有token就带上 token 请求头
页面增删改查
常用request header 有哪些？
Cookie ： 客户端存储的cookie字符串
Host ： HTTP访问使用的域名
Cache-Control 控制缓存的时效性
Accept-Language： 浏览器端接收的语言类型,用于服务器判断多语言
常用的reponse header 有哪些？
Cache-Control 缓存控制,用于通知各级缓存保存的时间,如果max-age=0,标识不要缓存
Content-Encoding： 内容编码方式,通常是gzip
Content-Type 内容类型,所有请求网页的都是text/html
Set-Cookies： 设置cookie,可以存在多个
flex控制元素放大和缩小的属性
- flex-direction 排列方式
- flex-wrap 是否换行
- flex-flow 排列方式+换行 简写
- justify-content 主轴排列方式
- align-items 交叉轴排列方式
- align-content 多轴排列方式 单行不生效
order子元素 排列顺序flex-grow子元素 放大比例flex-shrink子元素 缩小比例flex-basis子元素 分配多余空间之前，项目占据的主轴空间flex放大 缩小 和 占据多于空间 的缩写align-self子元素 可以单一排列和其他元素排列不一样
position的值 absolute relative fixed static
react父组件怎么调用子组件的方法
this.child.子组件方法
工作中是怎么联调和上线的（现场想合适的前后端联调方式，能和webpack环境切换联系起来）
antd的Form shouldUpdate增量更新方式，性能优化。
对Hooks的理解
可能做的笔试：数组扁平化、数组拍平算法、setTimeout Promise化、将data的value对象组合成一个新的数组、实现find函数、冒泡排序
// 数组扁平化 数组拍平算法 是一个
var arr = [1, [2, 3, [4, [5]], 6]]
// 递归方式
function flat(arr) {
let res = []
// 遍历这个数组
arr.map(item => {
// 数字每一项 ，如果还是数组 就进入递归
if (Array.isArray(item)) {
// 返回的是数组 扩展开 然后放入
res.push(...flat(item))
} else {
// 不是数组 直接放进去
res.push(item)
}
})
return res
}
console.log(flat(arr));
// join + split
function flat(arr) {
// join 转成字符串 1,2,3,4,5,6
// split 转成数组 ['1', '2', '3', '4', '5', '6'] 都是字符串 ，然后转成数字 隐试转换 + , -0 ,*1 ,或者 parseInt 强转
return arr.join(',').split(',').map(item => +item)
}
console.log(flat(arr));
// 实现 find
var arr = [
{
id: 1,
name: '大黄',
age: 18
}, {
id: 2,
name: '陈航',
age: 18
}, {
id: 3,
name: '刘傲',
age: 20
}, {
id: 4,
name: '张三',
age: 40
}, {
id: 5,
name: '李四',
age: 33
},
]
// 传入 数组 和 回调函数
function find(arr, fn) {
for (let i = 0; i < arr.length; i++) {
if (fn(arr[i], i, arr)) {
return arr[i]
}
}
}
console.log(find(arr, (item) => item.age == 18)); // {id: 1, name: '大黄', age: 18}
// 放到数组原型上
Array.prototype.myFind = function (fn) {
for (let i = 0; i < this.length; i++) {
if (fn(this[i], i, this)) {
return this[i]
}
}
}
let result = arr.myFind((item) => item.age == 18) // {id: 1, name: '大黄', age: 18}
console.log(result);
1:数组对象去重
// 使用 set
var arr = [1, 2, 3, 4, 1]
function f(arr) {
return [...new Set(arr)]
}
console.log(f(arr));
// 数组 + indexOf
function f(arr) {
var res = []
arr.forEach(item => {
if (res.indexOf(item) === -1) {
res.push(item)
}
});
return res
}
2:查找数组中的整数
var arr = [1.2222, 33.333, 1.2, 1, 3, 90, 90.1, 99.999999]
// 小数 %1 ！== 0 整数 都 === 0
let result = arr.filter(item => item % 1 === 0)
console.log(result);
3:操作dom点击事件向服务器上传数据，在上传未完成之前不可重复操作事件
4:日期格式化，日期不足前两位补0（2021-06-06 06:06:00）
var date = new Date(Date.now());
// 格式化 时间戳
function formatDate(date) {
let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDay()
let h = date.getHours()
let mintue = date.getMinutes()
let s = date.getSeconds()
m = m > 9 ? m : '0' + m;
d = d > 9 ? d : '0' + d;
h = h > 9 ? h : '0' + h;
mintue = mintue > 9 ? mintue : '0' + mintue;
s = s > 9 ? s : '0' + s;
console.log(y + '-' + m + '-' + d + ' ' + h + ':' + mintue + ':' + s);
return y + '-' + m + '-' + d + ' ' + h + ':' + mintue + ':' + s
}
formatDate(date) // 2021-11-06 11:40:25
5.获取url参数
console.log(window.location.search);
给定一个纯数字数组，先对数组做去重，在排序，升序
var arr = [1,1,2,5,4,8,3,4,41,6,1]// 数组去重
var res = [...new Set(arr)]
// 数组升序
res.sort((a,b)=>a-b)
console.log(res); //[1, 2, 3, 4, 5, 6, 8, 41]
// 数组降序
res.sort((a,b)=>b-a)
console.log(res); //[41, 8, 6, 5, 4, 3, 2, 1]
用css写一个布局，左侧固定宽度，右侧自适应
给定一个json格式的数据，然后从中取出来相同的属性，并把属性值合并累加，最后输出一个对象
你看
……
