2024年前端最新8个工程必备的JavaScript代码片段（建议添加到项目中），前端程序员进大厂面试必备基础技能

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

export function sleep(ms) {

return new Promise(resolve => setTimeout(resolve, ms))

}

//使用方式

const fetchData=async()=>{

await sleep(1000)

}

4. 生成随机字符串

---

/**

• 生成随机id

• @param {*} length

• @param {*} chars

*/

export function uuid(length=8, chars=‘0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ’) {

let result = ‘’

for (let i = length; i > 0; --i)

result += chars[Math.floor(Math.random() * chars.length)]

return result

}

使用方式

//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位

uuid()

使用场景：用于前端生成随机的ID,毕竟现在的Vue和React都需要绑定key

5. 简单的深拷贝

---

/**

*深拷贝

• @export

• @param {*} obj

• @returns

*/

export function deepCopy(obj) {

if (typeof obj != ‘object’) {

return obj

}

if (obj == null) {

return obj

}

return JSON.parse(JSON.stringify(obj))

}

缺陷：只拷贝对象、数组以及对象数组，对于大部分场景已经足够

const person={name:‘xiaoming’,child:{name:‘Jack’}}

deepCopy(person) //new person

6. 数组去重

---

/**

• 数组去重

• @param {*} arr

*/

export function uniqueArray(arr) {

if (!Array.isArray(arr)) {

throw new Error(‘The first parameter must be an array’)

}

if (arr.length == 1) {

return arr

}

return […new Set(arr)]

}

原理是利用Set中不能出现重复元素的特性

uniqueArray([1,1,1,1,1])//[1]

7. 对象转化为FormData对象

---

/**

• 对象转化为formdata

• @param {Object} object

*/

export function getFormData(object) {

const formData = new FormData()

Object.keys(object).forEach(key => {

const value = object[key]

if (Array.isArray(value)) {

value.forEach((subValue, i) =>

formData.append(key + [${i}], subValue)

)

} else {

formData.append(key, object[key])

}

})

return formData

}

使用场景：上传文件时我们要新建一个FormData对象，然后有多少个参数就append多少次，使用该函数可以简化逻辑

使用方式：

let req={

file:xxx,

userId:1,

phone:‘15198763636’,

//…

}

fetch(getFormData(req))

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容