网站设计与制作简单吗,比较好看的企业网站,wordpress修改个人头像,网站工程是干啥的24岁的我选择了裸辞 前言 说实话选择裸辞后很迷茫#xff0c;但是又不想在原本的公司上班#xff0c;目前处于昏昏沉沉的状态#xff0c;工作也是混一天是一天#xff0c;没有了什么明确的目标#xff0c;不知道屏幕前的你们有没有这种感觉,目前想着休息一段时间#xff…24岁的我选择了裸辞 前言 说实话选择裸辞后很迷茫但是又不想在原本的公司上班目前处于昏昏沉沉的状态工作也是混一天是一天没有了什么明确的目标不知道屏幕前的你们有没有这种感觉,目前想着休息一段时间可是又不敢休息钱包不允许。
今年的金九银十根本没有环境确实很差。 公司A
公司A:第一家面试的公司没过一家初创公司没过也是情理之中毕竟我面试的状态太差了很多问题都没回答上来这时候没什么准备刚开始刷面试题不过说实话有点打击作为毕业以后第一次换工作的经历刚毕业的时候面一个拿一个offer甚至都怀疑这两年工作是不是白做了技术一直下坡路。
笔试题目 第一题. [1,3,5,2,19,30,10] 请将数组排序从小到大 [1,3,5,2,19,30,10] .sort((a,b) a - b)
加分项 题目之外还可以自己写一些排序例如算法但是笔者只答了 sort方法排序 什么是防抖和节流 它们有什么区别 怎么实现 防抖 是规定时间内多次触发方法只执行一次
节流 延迟一定时间执行某一方法如果重新触发时间重置
区别: 一个是立即执行规定时间内不重复执行一个是规定时间内只执行一次其实区别可以不用回答介绍防抖和节流就包含了区别
实现 因为现场是笔试所以我这里的答案是简易版的防抖和节流
防抖实现
function debounce(func, time) {let timer null;return function (...args) {clearInterval(timer);timer setTimeout(() {func.apply(this, args)}, time)}
}节流实现
function throttle(func, time) {let timer null;return function (...args) {if (timer) return;timer setTimeout(() {func.apply(this, args);timer null;}, time)}
}超出文本省略css和js的实现方式, 考虑兼容性 css这里我只答出这个如果css实现方式考虑兼容性应该还要加个-webkit 类似开头但是笔试忘记怎么写了
overflow: hidden;
text-overflow: ellipsis;Jsjs实现文字超出隐藏其实核心逻辑就是循环添加文字添加完之后判断滚动高度(scrollHeight)是否大于可视高度offsetHeight如果大于就把后面三个字符替换成...
function textHidden() {let box document.getElementById(box);let str 测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字;for (let i 0; i str.length; i) {if (box.offsetHeight box.scrollHeight) {console.log((box.innerHTML).substring(0, i - 3) ...);box.innerHTML str.substring(0, i - 3) ...} else {box.innerHTML box.innerHTML str[i];}}
}什么是柯里化函数你对柯里化了解多少 柯里化 柯里化是一个高阶函数,它可以将多个形参的函数转成单一的形参的函数
代码实现:其实柯里化函数的核心点主要在args.length和fn.length的判断当传入的参数个小小于原始函数的参数个数则继续柯里化
function curry(fn, ...args) {return function (...params) {const _args [...args, ...params];if (_args.length fn.length) {return fn(..._args)} else {return curry.call(this, fn, ..._args)}}
}Json.parse和Json.stringify的实现 这题没能回答出来虽然知道大致的核心逻辑面试的时候比较乱,个人认为这个题目可能是要思路而已如果真的要立马写代码量还是不小而且是笔试
具体答案https://zhuanlan.zhihu.com/p/638767443 一文彻底弄懂JSON.parse()与JSON.stringify()
公司B
这家公司技术面就是直接发一个需求文档做出来后也没有回音不知道是不是白嫖党略过吧对这家公司印象也很差不知道大家面试过程中有没有遇到这种公司。
公司C vue3的时候ref为什么要使用.value属性 如果是你有什么办法更好的实现它吗 .value属性首先我们要知道vue3是基于proxy和reflect实现的响应式数据的proxy能代理的东西是什么
答案是对象那么其实就不难猜出为什么ref要.value
那么有什么更好实现ref这里其实想问的是.value访问太麻烦而且容易搞混近期对于ref的争议也很大,也有人提出ref sugar即ref语法糖也就是去除ref那么如何去除? 核心就是对set和get进行操作 get(target, key) {if (key value) {return target.value}return target.value[key]
},核心内容就是如下因为vue模板编译的时候会自动取value,所以要判断key为value的情况下最后return target.value[key]则是我们正常在js里不通过value进行访问的逻辑
function magicRef(initialValue) {const reactive ref(initialValue)const proxy new Proxy(reactive, {get(target, key) {if (key value) {return target.value}return target.value[key]},set(target, key, value) {if (key value) {target.value value} else {target.value[key] value}return true},})return proxy
}这里引用了别人的文章https://juejin.cn/post/7226540105698771003?searchId20231002075204FF098F426246DB507E79 SSR渲染流程是什么样 客户端发送URl请求到服务端服务端查询数据库拿到数据组合好页面服务端返回整个DOM结构给客户端 vuex如何解决页面刷新丢失数据的问题 通过本地储存解决localStorage或sessionStorage存储通过插件vuex-persistedstate解决 后台系统中权限是实现到什么等级? 具体怎么实现的 目前大多数的是实现到按钮级实现的方法是通过自定义指令
流程具体如下
从服务器一个对象对象里包含了所有按钮的权限给按钮添加自定义指令并且为每个按钮传递不同参数通过自定义指令的bind生命周期设置按钮的display控制是否展示按钮或者直接删除元素 说说对于vite和webpack的理解 webpack和vite都是很好的打包工具对于webpack在大型项目中构建比较蛮因为它需要对文件执行多次扫描和转译从而衍生出了vitevite是以开发模式极速构建著称它利用了ES模块的特性只构建正在编辑的模块而不是项目真正做到按需引入。
但是webpack目前的插件生态会相对丰富对于vite插件相对较少同时对于项目的话个人认为webpack适合大型项目,vite适合中小型项目 import 和 require的区别 首先是标准不同import/export是ES6标准, require和module.exports是CommonJS的标准执行过程require是运行时才执行即同步加载import是编译时执行异步加载require的性能会相对稍微低于import 去除字符串中出现次数最少的字符不改变原字符串的顺序 const removeLeasetFrequenChar (str:string) {const charMap:any {};for(let i 0; i str.length; i) {const char str[i];if (charMap[char]) {charMap[char] charMap[char] 1;} else {charMap[char] 1;}}// 找出最少次数let minChar:string ;let min:number Infinity;for(let i in charMap) {if(charMap[i] min) {minChar i;min charMap[i]}}// 直接把原本字符串处理替换空return str.replace(minChar, );
}如何控制请求并发数量 这里问的应该是Promise.all如何控制请求的并发量核心点如下
按照最大并大量对请求进行分组然后利用async await的特性分组请求
// 请求url数组
const urls:Arraystring [https://www.baidu.com/s?wd1,https://www.baidu.com/s?wd3,https://www.baidu.com/s?wd2,https://www.baidu.com/s?wd2,https://www.baidu.com/s?wd2,https://www.baidu.com/s?wd2,https://www.baidu.com/s?wd2
]
// 最大并发量
const maxRequest:number 3;
// 请求
const fetchUrl (url:string) {return new Promise((resolve, reject) {fetchUrl(url).then(res resolve(res)).catch(err reject(err))})
}
// 分组的方法
const grouping (arr:Arraystring, num:number) {let result:ArrayArraystring [];for(let i 0; i arr.length; inum) {result.push(arr.slice(i, i num));}return result;
}
// 进行分组
const urlGroup grouping(urls, maxRequest);
// 分组请求
const maxNumRequest async () {try {for(let urls of urlGroup) {const promiseArr: Arrayany urls.map(url fetchUrl(url));// 核心点在这里 利用async await 分批请求const reuslts await Promise.all(promiseArr);console.log(reuslts);}} catch (error) {console.log(error);}
}公司D 讲一讲vue3的生命周期以及它们的作用 vue3的生命周期主要有4个阶段9个钩子分别是:
创建 ——在组件创建时执行挂载——DOM被挂载时执行更新——当响应式数据被修改时执行销毁——在元素销毁之前执行
钩子函数分别有 beforeCreate—— 初始化事件以及生命周期此时data和dom都为创建无法问题 created——创建后此时已经初始化完毕data已经可以访问但是dom元素依然不行 onBeforeMount ——在挂载开始之前调用,此时dom元素已经生成但是未挂载到页面上可以进行异步操作 onMounted—— 组件挂载时调用此时可以访问dom元素可以进行异步操作 onBeforeUpdate ——数据更新前调用这里可以访问更新前的dom通常用来移除事件监听 onUpdated—— 由于数据改变更新dom之后调用这里可以访问更细后的dom onBeforeUnmount——卸载组件之前调用通常用于清除计时以及事件监听 onUnMounted—— 组件卸载之后调用可以用于清除一些资源占用
另外补充vue2生命周期
beforeCreate: 创建前初始化事件以及生命周期此时data和dom都为创建无法问题created: 创建后此时已经初始化完毕data已经可以访问但是dom元素依然不行beforeMounted 挂载前此时dom元素、data、计算属性等已经生成但还dom未挂载到页面上面可以进行异步操作mounted: 挂载后此时dom元素已经挂载完毕可以访问dom可以进行异步操作beforeUpdate: 更新前此时可以获取到更新前的dom元素可以对更新前的状态进行保存update: 更新后此时页面已经更新完毕可以访问更新后的dom元素beforeDestoy 销毁前组件销毁之前调用通常用来清除计时器、事件监听、destroyed: 销毁后此时dom元素已经卸载可以释放组件用过的资源等操作 setup什么时候执行 setup在beforeCreate之前执行在组合式api中setup生命周期取代了beforeCreate和created两个生命周期。 异步请求放在created和mounted哪个合适create会不会有性能提升 异步请求放在create和moutned都是可以的放在created更快的说法性能并没有多少提升
created和mounted两者生命周期执行间隔差距其实很小甚至到几微米如果说再created请求数据请求后需要对数据进行操作那么就得插入到主线程中那么我们就需要打断x渲染线程除此之外有时候请求后我们需要对dom进行操作那么created生命周期还没讲dom元素挂载上此时操作时不适合的
另外如果是服务端渲染(ssr)是需要放到created里进行异步请求因为服务端不支持mounted 怎么看待CompositionApi和Options Api? 我认为两种api各有各的优缺点在OptionsAPi,我们对一个options进行配置包括了props、data、methods、computed等这种方式在结构清晰、易于理解在小型的项目中比较实用.而在大型项目中CompositionAPi会更加适用
CompositionApi来说它通过函数的形式来组织我们的代码让我们允许把相关功能组合在一起提高代码可维护性和重用性。
例如 当我们实现一个todoList
在OptionsApi中我们得去data里声明一个list然后再去methods声明一个方法,最后再去声明周期里调用等
而在CompositionApi我们声明list和methods都可以放在一起同时如果将来需要复用此功能只需要在将这一块的代码复制而OptionsAPi则要去data里找再到methods里找 vue2对比vue3做了哪些改进 性能的优化 vue3采用Proxy替代Object.definedPropety实现响应式并且使用的静态提升技术提高渲染的性能但是对于proxy有一个缺点对ie11不支持组合式api可以更好的复用组件逻辑TypeScript支持vue3已经完全支持Typescript新的自定义渲染Api,Vue3对于生命周期组件事件等都需要进行自定义以及控制 Proxy和Object.defineProperty的区别 性能方面Proxy的性能优于Object.definePropety拦截对象不同proxy可以对整个对象进行控制Object.definePorpety只能对象单个属性控制这也是为什么Vue2要使用Vue.$set去设置属性的原因Object.definePropety是对原始的对象进行操作而Proxy会在原始对象上面创建一个代理层Object.definePropety操作原始对象就可以触发拦截器而Proxy则要操作代理对象兼容性的区别Object.definePropety兼容性相对较好Proxy无法兼容IE11
公司E css的三大特性有哪些属性可以被继承 css三大特性 继承性、层叠性、优先性
可以继承属性有 font-size;font-family;font-style;text-align;line-heightcursor等等 浏览器从输入到渲染的过程经历哪些过程 这题面试的时候只答出了DNS查询、构建DOM树、构建CSS树、组合合成渲染树有些给忘记了 晕
详细的步骤如下
DNS查询服务器IPTCP三次握手TLS协商发送GET请求HTML文件将HTML内容构建DOM树将CSS内容构建CSSOM树将DOM树和CSSOM树合成渲染树根据渲染树进行页面元素的布局绘制到页面上 for in循环对象的时候是有序的吗 无序的for in循环的时候不要依靠顺序去进行判断。 前端做过哪些优化 一些第三方库通过CDN方式引入使用iconfont代替图片图标图片懒加载代码层面例如防抖节流 频繁切换的场景 使用v-show替换v-if利用webpack-boundle-analyzer分析打包后文件大小进行优化 前端图片懒加载的原理 核心原理是通过判断图片元素是否显示在视图中如果显示在视图中即显示图片据图步骤如下
声明img标签但是src属性为空我们可以另外设置一个自定义属性data-src用来赋值图片的url然后就是监听scroll事件同时sroll事件可以加上节流减少资源浪费判断当前图片是否有在可视范围内,判断方法有多种例如 offsetTopoffsetHeight scrollTop或者getBoundingClientRect判断 top和left小于视窗高度(clientHeight)如果是的情况下我们获取这个img元素的data-src然后把属性赋值src即可 说说网络错误码有哪些 分别代表什么意思 这里我只答出200、404、500、304
网络错误码 以下面前缀开头分别代表不同的错误
1 开头 表示消息2 开头 表示成功3 表示 重定向4 表示 客户端错误5 表示 服务器错误
1XX段表示请求已被接受需要继续处理。这类响应是临时响应只包含状态行和某些可选的响应头信息
常见的有
100(客户端继续发送请求这是临时响应)101(服务器根据客户请求切换协议)
2xx段 表示请求已成功被服务器接收、理解、并接受
常见的有
200成功 请求已成功并且返回所希望的响应头和数据体201 (已创建): 请求成功并且服务器创建了新的资源202 已创建 服务器已接收请求但是尚未处理完成203非授权信息: 服务器已成功处理请求,但返回的信息可能来自另一来源204(无内容) 服务器成功处理请求但无返回内容205(重置内容) 服务器成功处理请求但没有任何返回内容206(部分内容) 表示服务器成功处理了部分请求通常在断电续传或者分块下载使用
3xx段 表示完成请求需要进一步操作。
常见的有
300多种选择针对请求服务器可执行多种操作301(永久移动) 请求的页面已永久移动到新位置302(临时移动): 服务器目前从不同位置的页面响应请求303(查看其它位置) 请求者应对不同的位置单独使用get请求来检索响应304(协商缓存) 服务器通过状态304可以告诉客户端请求资源成功305 使用代理 请求者只能使用代理访问请求的网页。 如果服务器返回此响应还表示请求者应使用代理307 临时重定向 服务器目前从不同位置的网页响应请求但请求者应继续使用原有位置来进行以后的请求
4xx段 表示服务器无法处理请求客户端错误
常见的有 400错误请求 服务器不理解请求的语法 401未授权 请求要求身份验证。 对于需要登录的网页服务器可能返回此响应。 403禁止 服务器拒绝请求 404未找到 请求的资源不存在 405方法禁用 禁用请求中指定的方法 406不接受 无法使用请求的内容特性响应请求的网页 407需要代理授权 此状态代码与 401未授权类似但指定请求者应当授权使用代理 408请求超时 服务器等候请求时发生超时
5xx段 表示服务器无法完成明显有效的请求。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生
常见的有
500服务器内部错误服务器遇到错误无法完成请求501尚未实施服务器不具备完成请求的功能。 例如服务器无法识别请求方法时可能会返回此代码502错误网关 服务器作为网关或代理从上游服务器收到无效响应503服务不可用 服务器目前无法使用由于超载或停机维护504网关超时 服务器作为网关或代理但是没有及时从上游服务器收到请求505HTTP 版本不受支持 服务器不支持请求中所用的 HTTP 协议版本 箭头函数和普通函数的区别 箭头函数没有原型所以箭头函数没有this箭头函数this继承外层的第一个普通函数不能直接修改箭头函数的this指向箭头没有argements箭头函数只能声明匿名函数(箭头函数可以通过表达式让箭头函数具名),普通函数可以是具名函数也可以是匿名函数 var和let有什么区别 var和let都有变量提升但是let有一个暂时性死区var是函数作用域let是块级作用域var可以重复声明而let不行
公司F 为什么要使用Ts ts可以对代码类型进行检查避免了js遇到一些错误ts可以改进js同时规范化我们的代码ts附带了许多功能可以协助我们开发ts使得代码容易阅读和理解 什么是Ts的方法重载 方法重载是一种特性允许生命多个不同的函数签名根据传入的参数来执行不同的操作
function sayHello(name: string): string;
function sayHeelo(name: string, age: number): string;上面两句代码定义了两个函数签名如果传一个name就执行第一个操作,如果传入name和age就执行第二个
但是下面我们还需要提供一个函数来实现相应的操作
function sayHello(name: string, age?: number): string {if (age ! undefined) {return Hello, ${name}! You are ${age} years old.;} else {return Hello, ${name}!;}
}谈谈ts的枚举 枚举是Ts的一种数据类型它能允许我们定义一组命名常量枚举可以帮助我们把需要的集合列举出来方便使用也更加的简洁明了。
enum Gender {Male,Female,Other
}ts的内置类型有哪些 numberstringnullundefinedboolean
高级数据类型有
ArrayTupleEnumAny 刚刚你谈到了Tuple它有什么作用 有什么特点 Tuple又称为元组它是一个有顺序的数据类型有以下特点
明确知道数组的长度并且知道元素类型可以知道每个元素的所在的位置长度固定因为需要对每个元素定义类型
type tupleNum [string, number]type和interface有什么区别 interface可以重复声明type不行 tyoe可以用typeof去获取某个一数据类型 tyoe支持使用in去遍历映射类型
type names firstName | lastName | AKA
type nameType {[key in names]: string
}模块化导出type必须先声明再导出
export default interface User { name: stringage: number
}
type User {name: stringage: number
}
export default Userts的never和vioid有什么区别 void表示没有任何类型值可以是null或者undefinednever表示这个值永远不会存在 为什么vue的data必须是一个函数 vue是如何实现的data互相不污染 在组件中vue其实是通过构造函数去new一个组件当data是一个函数的时候它会有自己的作用域而不会去印象其他的组件如果说组件的data不是一个函数而是一个对象那么会导致这个data会被放到原型上此时其他实例就可以访问 说说双向绑定的原理 首先在new Vue的时候会对data里面执行响应化处理这个过程发生在observer中通过Object.definePropety对data的属性逐个递归遍历添加set和get方法同时对模板进行编译这个过程在compile中执行主要操作有两个获取data里初始化视频绑定更新函数定义一个Watcher观察者功能主要有添加订阅者和更新定义一个Dep用来保存观察者并且当数据发生更变通知更新 公司G
笔试题目,只记得几题有些没答出来答案是后续补上的 如何实现路由懒加载 在router通过回调的方式引入组件就可以实现异步加载
原理:主要是因为javscipt运行机制、事件循环以及打包工具的配合
当打包工具遇到import的时候会把这些组件当做单独js文件进行打包页面加载的时候 只有主要boundle会被下载当用户需要组件的时候再发起网络请求请求对应的异步组件然后进行下载和执行最后渲染 diff算法原理 diff算法主要是采用深度优先算法逐层进行比较具体实现如下 首先会有两个虚拟DOM树,分为新的子节点集合旧子节点集合 同时会有4个索引分别指向 新子节点的首尾旧的子节点首尾4个这里以oldS、oldE、newS、newE代表4个索引 比较的话肯定是 oldS和oldE要分别对newS、newS进行比较就有四种情况了 相等情况分为4种 1.oldS旧节点的头与newS新节点头相等那么就oldS和newS分别索引1 2.oldS旧节点头部与newS(新节点的尾相等)那么就是oldS1然后 newE-1 3.oldS旧节点尾部…还有两种情况以此类推 最后会出现一种情况就是如果存在不相等的节点的时候 会有两种结果 new的子节点集合大于旧的子节点集合 添加新的子节点旧的节点集合大于新的节点集合那么就会真实的DOM中这里划重点不是在旧节点中删除多余的子节点 import和require的区别 标准不同 import是ES6的标准require是CommonJs的标准require是运行时执行既同步加载import是编译时执行既异步加载import会 提升到文件的顶部require的性能稍低于import es6有哪些新的特性 类class, extends箭头参数let const模板字符串扩展运算符...解构赋值import、exportPromiseSymbolProxy函数参数默认值
公司H 如果让你从数组中查找元素你会如何实现 如果是基础类型的数组考虑使用indexOf进行查找
如果是对象数组则使用findIndex进行查找 indexOf和includes有什么区别 indexOf是返回下标如果找到返回对应下标如果没有则-1 includes返回值是true和false indexOf是严格等于相当于()而includes是使用是零等值法 0 可以等于 -0 这里特别说明indexOf中 NAN永远返回-1 ,而 includes NAN可以是true
第三点太难了 在面试的根本想不到 箭头函数的this会指向什么 箭头函数this通常在创建的时候就已经确定了他的指向会指向外层的this 以下代码this会指向什么 const fn () {console.log(this);}const obj {func: fn};console.log(obj.func());this会指向window因为它声明的使用会指向外层的this
那么如果箭头函数改成普通函数呢 function fn() {console.log(this);}const obj {func: fn};console.log(obj.func());此时还是指向window函数会根据执行时谁调用了它而指向谁
如果箭头函数加上bindthis会指向什么
依旧指向window因为箭头函数不可改变this的指向
总结
历经近一个月的时间我目前已经收到两家的offer第一家可能不是很满意拒了第二家开出的薪资也比较符合我的预期考虑到目前的环境的情况我就不做犹豫选择了入职此文章后续可能不会再继续更新但是我会努力继续写一些好的文章分享给大家。感谢各位的关注。
在这里给一些求职者或者将要寻求其他发展机会的人一些拙见 我感觉国庆后的市场机会多了一些但是也只是一点如果说还能撑一撑的伙伴们我建议还是再撑一撑 就算换了工作现在其实很多公司可能给不到你预期的工资你可能会面临两个问题 一、选择平跳就是工资涨幅不大可能福利待遇会好一些的情况 二、空窗期一段时间从众多机会中寻找这个可能就得看运气具体的时间不好控制 如果已经处于再寻找工作的人我建议 一、面试后及时复盘面试其实也是对自己进行一个查缺补漏你会发现很多自己不足那么既然都要是完了就不要去在意面试中的问题及时补上才是王道 二、尽量不要在家里复习查看面试题家里可能比较舒适这样一个环境很难进入学习状态当然你如果做得到也是狠人可以忽略我这一点建议个人推荐去图书馆因为我近几天去图书馆你会发现很多人其实很多人也跟你一样也许离职了在寻求新的机会你并不是孤单的一个人你没有被世界抛弃 心态问题这一点很重要我心态其实很不好离职了,就有一种感觉和世界脱轨的感觉所以需要调整好自己的心态我自己是周一到周五面试周末面试官和Hr都在休息了Boss直聘也没有什么消息那么我也休息周末好好出去玩找朋友聚一聚谈谈最近自己的情况。也可以喝点小酒放松一下心态在求职过程中我个人认为是一个极其重要的点。
最后在这里祝大家早日找到心仪的工作。
