2023年金三银四面试题目集合

前言

又是一个金三银四面试季节，开始了一轮轮的面试，现在把面试题目集合一下

常用题

1、数组去重

Array.from(new Set([1, 1, 2, 3, 3, 4, 5]))
[...new Set([1, 1, 2, 3, 3, 4, 5])]

2、数据类型

// 判断数据类型
Object.prototype.toString.call(arg)
// 基本类型
1              '[object Number]'
''             '[object String]'
true           '[object Boolean]'
undefined      '[object Undefined]'
null           '[object Null]'
Symbol()       '[object Symbol]'
// 引用类型
[]             '[object Array]'
{}             '[object Object]'
() => {}       '[object Function]'
/reg/          '[object RegExp]'
new Date()     '[object Date]'
new Map()      '[object Map]'
new WeakSet()  '[object WeakSet]'
new Set()      '[object Set]'

3、深浅拷贝

// 浅拷贝
[].slice()
[].concat()
Array.from([], val => val)
Object.assign({}, obj)
{...obj}
// 深拷贝
JSON.parse(JSON.stringify(obj))

4、reduce用法

// 1、数组求和、乘积
[1, 2, 3, 4, 6].reduce((res, cur) => res + cur, 0)
// 2、数组最大值
[111, 345, 2].reduce((res, cur) => res > cur ? res : cur)
// 3、统计字符串的次数
'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas'.split('').reduce((res, cur) => {
  res[cur] ? res[cur]++ : res[cur] = 1; 
  return res;
}, {});
// 4、数组转对象
const list = [{value: '技术', key: 'name'}, {value: 30, key: 'age'}]
list.reduce((res, cur) => {res[cur.key] = cur.value; return res;}, {});
// 5、数组扁平
[[1, 2, 8], [3, 4, 9], [5, 6, 10]].reduce((res, cur) => res.concat(cur), [])
// 6、函数柯里化
var a = (x) => x + 1;
var b = (x) => x * 2;
var c = (x) => x - 1;
var compose = (...args) => {
  // args(数组)：记录的是所有的函数
  // 这里其实也是利用了柯里化的思想，函数执行，生成一个闭包，预先把一些信息存储，供下级上下文使用
  return (x) => {
    var len = args.length;
    // 如果没有函数执行，直接返回结果
    if (len === 0) return x;
    if (len === 1) args[0](x);
    return args.reduceRight((res, func) => {
      return func(res);
    }, x);
  };
};
var resFn = compose(c, b, a, a);
resFn(1);

5、forEach和map

• 能用forEach()做到的，map()同样可以。反过来也是如此。
• map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
• forEach()允许callback更改原始数组的元素。map()返回新的数组

6、Vue首屏加载优化

• 对于第三方js库的优化，分离打包
• 减小入口文件体积
• vue-router使用懒加载
• 静态资源本地缓存
• UI框架按需加载
• 图片资源压缩、icon资源使用雪碧图
• 使用cdn
• 开启GZip压缩、减少文件体积
• 使用SSR

面试一

• vuex
• vue-router 中两种方式 hash history区别
• webpack中plugin和loader的区别
• Object.defineprototype
• 数据响应式更新
• data和computed的区别
• $nextTick
• v-for里面的key
• 浏览器从url到渲染的过程
• TCP的三次握手
• 箭头函数普通函数的区别
• 判断数组的方式：isArray
• Object.prototype.toString.call()与typeof的差别
• 说说Promise

面试二

• js变量提升
• 作用域、作用域链
• setTimeout(fn, 0)
• 浏览器事件循环
• css盒模型
• css的BFC
• 浏览器页面渲染过程
• 重绘和回流
• vue的v-model
• vue组件通讯方式

面试三

• 数组遍历的几种方式
• map和foreach的区别
• some和every的区别
• reduce的用法
• js跨域，开发模式/生产模式
• 正则中. ? +用法，以及贪婪模式和非贪婪模式
• js事件委托的原理

面试四

• 箭头函数与普通函数的区别（arg）
• 封装promise函数，实现请求超时
• 组件式开发如何解决重复依赖
• 离职原因，新公司规划
• 组件式开发，多组件如何保证加载速度
• 组件式开发，匹配组件与展示

面试五

• 如何看待业务与技术
• Taro迁移到React，为什么，提升
• React Hooks解决了什么，类组件完全替换Hooks注意什么
• Webpack与Babel
• 服务端渲染，Nuxt
• 比较Vue和React
• 比较Mobx和Hooks Reducer
• 比较两种diff算法
• webpack热更新
• mobx组件通信
• webpack打包后解决依赖
• webpack loader plugin
• 深浅拷贝
• js对象相等比较
• reduce
• 网络安全

面试6

• 模块查找规则
• webpack分割
• cookie section
• cookie挟持，应对
• 中间件
• promise.all promise.resolve
• csr
• 浏览器缓存
• react 状态变化后发生了什么
• 深度和广度遍历
• 浏览器cache control取值
• 模块化import
• 伪类和伪元素
• 安全策略CSP
• css盒模型、动画
• node事件循环，为什么有事件循环